Comment mettre un prototype Figma dans un portfolio
Publié le
En bref : Tu as trois options. Intégrer le prototype en direct avec Share, puis Get embed code ;[1] mettre un lien avec l’accès réglé sur Anyone ;[2] ou montrer une courte vidéo du parcours. L’embed et le lien dépendent de ton fichier Figma, qui doit rester public et à jour. Une vidéo se charge vite, marche sur tous les sites de portfolio et ne demande jamais de connexion.
Un recruteur passe une minute ou deux sur une étude de cas. Si le prototype est un lien qui ouvre Figma, demande une connexion puis charge pendant dix secondes, il a déjà fait défiler la page. La façon de montrer le prototype compte autant que le prototype.
Trois façons de mettre un prototype Figma dans un portfolio
| Option | Idéal pour | Attention à |
|---|---|---|
| Prototype intégré (embed) | Laisser cliquer dans le vrai parcours | Lourd à charger, dépend des réglages de partage du fichier[1] |
| Lien vers le prototype | Un bouton « essaie-le » sous l’étude de cas | Fait quitter ton site, et peut demander une connexion[2] |
| Courte vidéo ou GIF | Montrer le parcours en quelques secondes, en haut de page | Pas cliquable |
Comment intégrer un prototype Figma
- Ouvre le prototype et clique sur Share.
- Choisis Get embed code, puis Copy.[1]
- Colle le code dans un bloc HTML ou embed de ton site (Webflow, Framer, Notion et la plupart des créateurs de sites en ont un).
- Vérifie d’abord l’accès du fichier : l’embed suit les réglages de partage, donc pour un portfolio public il doit être ouvert à toute personne qui a le lien.[1][2]
Un fichier protégé par mot de passe ne s’affiche pas dans un embed.[1] Si ton étude de cas est sous NDA et demande un mot de passe, oublie l’embed.
Le piège des prototypes en direct
- C’est le fichier vivant. Renomme un frame, archive une page ou change un réglage de partage, et le portfolio casse sans prévenir.
- Les visiteurs ne savent pas où cliquer. Un prototype sans guide reçoit deux taps, puis on s’en va.
- Ça ne tourne pas en boucle. Rien ne bouge tant qu’on ne clique pas : la page a l’air figée.
- Figma Motion n’aide pas ici. Il exporte en MP4 ou GIF les animations faites dans Motion, pas le parcours de ton prototype.[3]
Le montage auquel la plupart des designers arrivent : une courte vidéo en boucle en haut de l’étude de cas, et un lien vers le prototype en direct dessous pour ceux qui veulent l’essayer. Notre guide pour partager un prototype Figma sans connexion couvre la partie lien.
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 gratuitPour aller plus loin : une vidéo propre pour chaque étude de cas
Proto to Video enregistre le prototype que tu ouvres avec Present et exporte un MP4, un GIF ou un WebM recadré sur le frame, sans curseur ni interface Figma. Pose-le dans un cadre iPhone, iPad ou MacBook sur un dégradé doux, et ça se lit comme une photo produit. Le WebM et le MP4 se jouent en boucle et sans le son dans une balise <video> sur n’importe quel site de portfolio, et le GIF marche sur Dribbble et Behance. Un seul raccourci, Alt Maj R : une nouvelle vidéo après des retours prend une minute.
FAQ
Peut-on intégrer un prototype Figma dans un portfolio ?
Oui. Clique sur Share, puis Get embed code et Copy, et colle le code dans ton site. L’embed suit les réglages de partage du fichier, et un fichier protégé par mot de passe ne s’affiche pas dans un embed (aide de Figma, Embed files and prototypes).
Vidéo ou prototype en direct dans un portfolio ?
Les deux ensemble marchent le mieux : une courte vidéo en boucle en haut montre le parcours sans aucun clic, et un lien vers le prototype en direct laisse les curieux l’essayer.
Comment mettre un prototype Figma sur Behance ou Dribbble ?
Ces deux sites acceptent des images et des vidéos, pas des prototypes en direct. Enregistre le prototype et mets en ligne la vidéo ou un GIF du parcours.
Sources
- Figma Learn, aide de Figma. Embed files and prototypes. (en anglais) https://help.figma.com/hc/en-us/articles/360039827134
- Figma Learn, aide de Figma. Share files and prototypes. (en anglais) https://help.figma.com/hc/en-us/articles/360040531773
- Figma Learn, aide de Figma. Export animations from Figma. (en anglais) https://help.figma.com/hc/en-us/articles/41307983648407
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