Comment exporter un prototype Figma avec un cadre d’appareil

Publié le

Le même écran d’app montré nu, puis dans un cadre de téléphone sur un fond coloré doux

En bref : Figma peut afficher ton prototype dans un cadre d’appareil : dans l’onglet Prototype, sans rien sélectionner, choisis un appareil et un modèle, puis active Show device frame en mode présentation.[1][2] Figma n’exporte pas cette vue avec cadre. Pour l’avoir en vidéo, tu enregistres la présentation, ou tu prends un enregistreur qui ajoute le cadre pour toi.

Un écran nu de 390 × 844 dans une vidéo, ça fait maquette fil de fer. Le même écran dans un iPhone, ça fait une vraie app. D’où la recherche « prototype Figma avec cadre iPhone », et d’où une réponse un peu décevante.

Où est le réglage du cadre d’appareil dans Figma ?

  1. Ouvre la page de ton prototype et clique dans le vide du canevas pour ne rien sélectionner.
  2. Dans le panneau de droite, ouvre l’onglet Prototype.[1]
  3. Sous Device, choisis le type d’appareil, le modèle (et sa couleur) et l’orientation.[1]
  4. Sous Background, choisis la couleur autour de l’appareil en mode présentation.[1]
  5. Lance le prototype avec Present. Dans le menu d’options, Show device frame affiche ou masque le cadre.[2]

C’est disponible sur toutes les offres.[1] Deux détails piègent souvent. Tous les appareils marchent en mode présentation, mais l’aperçu intégré (inline preview) n’affiche que les cadres de téléphone, de montre et de tablette.[1] Et l’orientation vaut pour tout le prototype : impossible de passer du portrait au paysage en cours de route.[1]

Peut-on exporter le prototype avec son cadre ?

Non. Le cadre est un réglage de présentation, pas un calque. Les exports de Figma (images et animations Motion) ne l’incluent pas, et le prototype, lui, se joue seulement.[2] Retour donc à l’enregistrement d’écran pendant que le prototype tourne avec son cadre, comme dans notre guide pour enregistrer un prototype Figma sur Mac.

Les limites d’un cadre Figma enregistré

Ton prototype Figma en vidéo, sans curseur. Proto to Video enregistre le prototype que tu ouvres avec Present et l’exporte en MP4, GIF ou WebM, recadré sur ta frame, sans curseur ni interface Figma. Gratuit pour Chrome.

Ajouter à Chrome — c’est gratuit

Pour aller plus loin : ajouter le cadre à l’export

Proto to Video enregistre le prototype sans cadre, puis te laisse en choisir un à l’export : iPhone, Android, iPad, MacBook, une fenêtre de navigateur, ou aucun. Les cadres d’appareil font partie de l’offre Pro ; l’offre gratuite a « aucun cadre » ou le cadre navigateur. Derrière, une couleur unie ou une scène en dégradé doux. Tu peux changer de cadre après l’enregistrement : une seule prise te donne une version téléphone pour les réseaux et une version nue pour un ticket. Pas de curseur à l’écran, juste des cercles de tap si tu les veux.

FAQ

Comment mettre un cadre iPhone sur un prototype Figma ?

Sans rien sélectionner, ouvre l’onglet Prototype du panneau de droite, choisis un appareil et un modèle sous Device, puis lance le prototype. En mode présentation, le menu d’options a un réglage Show device frame (aide de Figma).

Pourquoi je ne vois pas le cadre d’appareil dans l’aperçu Figma ?

L’aperçu intégré n’affiche que les cadres de téléphone, de montre et de tablette. Tous les appareils sont disponibles en mode présentation (aide de Figma, Set prototype device and background settings).

Figma peut-il exporter un prototype en vidéo mockup ?

Non. Le cadre d’appareil est un réglage de présentation, et Figma n’exporte pas les prototypes en vidéo. Enregistre la présentation avec son cadre, ou utilise un enregistreur qui ajoute un cadre d’appareil à l’export.

Sources

  1. Figma Learn, aide de Figma. Set prototype device and background settings. (en anglais) https://help.figma.com/hc/en-us/articles/21158597546391
  2. Figma Learn, aide de Figma. Play your prototypes. (en anglais) https://help.figma.com/hc/en-us/articles/360040318013

Ton prototype Figma en vidéo, sans curseur

Proto to Video enregistre le prototype que tu ouvres avec Present et l’exporte en MP4, GIF ou WebM, recadré sur ta frame, sans curseur ni interface Figma. Gratuit pour Chrome.

Ajouter à Chrome — c’est gratuit

Autres articles