Aller au contenu
Guide6 min de lecture

Démo de portfolio Figma Make

Mettez l'application en fonctionnement dans votre portfolio, pas une capture d'écran.

Montrez une application Figma Make en fonctionnement dans un portfolio, pas une capture d'écran, et prouvez que le parcours fonctionne avant qu'on le demande.

Voir comment ça marcheLes 60 premières secondes de vidéo sont gratuites, avec un filigrane. Vérifiez votre adresse e-mail pour la télécharger.

Une entrée de portfolio construite autour d'une capture d'écran demande à un relecteur de croire que tout ce qui se trouve sous la ligne de flottaison fonctionne aussi. Une capture d'écran prouve la mise en page. Elle ne prouve pas qu'un bouton fait quelque chose, qu'un formulaire valide, ou que l'interaction à laquelle un recruteur tient vraiment se comporte comme l'image figée le laisse croire. L'écart entre « paraît terminé » et « fonctionne » est exactement ce qu'une vidéo referme, et c'est la plus grande différence entre une entrée de portfolio qui obtient un second regard et une qui se fait défiler sans attention. Un relecteur qui parcourt une pile de candidatures a rarement le temps d'ouvrir chaque projet lié, si bien que les entrées qui survivent à ce premier passage sont celles qui répondent à la question du fonctionnement sans exiger un clic supplémentaire.

Une application Figma Make se prête bien à cet exercice car le résultat est un prototype fonctionnel accessible via un lien de prévisualisation partageable, pas un fichier de conception qui nécessite d'ouvrir Figma lui-même pour l'inspecter. Ce lien est en général accessible sans connexion, puisque la plupart des projets Figma Make sont des prototypes plutôt que des logiciels dotés d'un système de compte complet, ce qui signifie que le parcours montré dans la vidéo est le même que celui qu'un relecteur pourrait ouvrir et essayer lui-même juste après avoir regardé.

Que doit prouver une démo de portfolio ?

Une démo de portfolio doit prouver l'interaction unique qui a demandé le plus de jugement à réussir. Ce n'est presque jamais l'écran de connexion ou la barre de navigation. C'est généralement un point précis de logique : un formulaire qui réagit intelligemment à une saisie, une mise en page qui se réorganise d'une manière qui a demandé une vraie itération, ou un parcours qui résout un problème d'interface réellement délicat. Nommez ce moment avant d'enregistrer quoi que ce soit, de la même manière que vous nommeriez le point le plus fort d'une étude de cas écrite.

Une vidéo de galerie de lancement doit gagner l'attention d'un inconnu dans les deux premières secondes. Un visiteur de portfolio a déjà choisi de regarder de plus près, en général parce qu'un CV ou un lien l'a amené là, si bien que la vidéo peut se permettre une arche légèrement plus longue : un début qui pose le problème, un milieu qui montre l'interaction, et une fin qui montre l'état résolu.

Moment du portfolioCe qu'il doit prouverCe qu'il faut laisser de côté
Mise en placeLe problème que résout l'interactionUne visite de pages sans rapport
InteractionLe choix de logique ou de mise en page précisChaque chemin alternatif sur le même écran
RésolutionL'état qui montre que l'interaction a fonctionnéUne narration trop proche d'un argumentaire commercial

Comment préparer l'application pour l'enregistrement ?

Ouvrez le lien de prévisualisation comme le ferait un relecteur, à froid, sans supposition sur l'état dans lequel il devrait se trouver. Vérifiez tout ce qui pourrait sembler inachevé : un texte de substitution laissé d'un brouillon antérieur, une liste vide sans contenu, ou un composant qui affiche encore des valeurs par défaut au lieu du contenu que vous vouliez démontrer. Un relecteur qui évalue une entrée de portfolio cherche déjà des raisons de passer à la suivante, et un détail visiblement inachevé lui offre cette raison gratuitement.

  • Ouvrez le lien de prévisualisation à froid et confirmez que rien ne ressemble à un état de brouillon antérieur.
  • Remplissez toute liste, formulaire ou tableau avec un contenu qui se lit comme intentionnel, pas vide.
  • Testez l'interaction précise de bout en bout avant d'écrire l'indication du rendu.
  • Retirez tout ce qui ressemble aux données d'une vraie personne, même un texte de substitution qui paraît trop précis.

Remplissez les données qui soutiennent l'interaction sans se faire passer pour les informations d'un vrai utilisateur. Un calendrier sans événement ou un tableau de bord sans chiffres ne donne rien au relecteur pour réagir, tandis que des données visiblement fictives laissent l'interaction se lire clairement.

Mettre le processus en ordre aide à garder la vidéo correctement cadrée dès le départ :

  1. Nommez l'interaction la plus forte de l'application avant d'enregistrer quoi que ce soit.
  2. Préparez le lien de prévisualisation pour qu'il s'ouvre à froid sans aucun état inachevé visible.
  3. Écrivez l'indication en nommant l'état de départ, l'interaction et le résultat, puis relisez le rendu avant de le publier.

À quel point l'indication doit-elle être précise ?

Écrivez l'indication de la même manière que vous décririez la pièce à un relecteur de conception lors d'un entretien. Nommez l'état de départ, l'interaction et le résultat. « À partir du formulaire vide, saisissez une valeur qui déclenche le message de validation, puis montrez l'état corrigé » est assez précis pour que le rendu de GogoScreen ait une cible claire, et assez précis pour qu'un relecteur de la vidéo terminée puisse vérifier le rendu par rapport à l'indication.

GogoScreen renvoie un fichier MP4 narré et monté construit à partir de cette indication et de l'URL, avec des zooms sur le clic qui compte, un lissage du curseur, des coupes des temps morts et des sous-titres incrustés. Rien de tout cela ne remplace le choix de la bonne interaction. Un enregistrement proprement monté d'un écran générique reste une entrée de portfolio générique, et les relecteurs qui en regardent beaucoup dans une journée remarquent vite la différence entre une affirmation précise et une affirmation générale.

Que met-on autour de la vidéo dans le portfolio ?

Associez la vidéo à une courte note écrite nommant le problème, la décision, et pourquoi cette décision était la bonne. La vidéo montre le résultat. Le texte explique la réflexion, ce qui est souvent ce qu'un recruteur ou un client cherche réellement à évaluer. Gardez les deux séparés plutôt que de superposer une narration du processus sur l'interaction en train de fonctionner, car un relecteur qui essaie à la fois de regarder l'interface fonctionner et de lire une explication a tendance à ne bien absorber ni l'une ni l'autre.

Relisez le rendu terminé par rapport au comportement réel de l'interaction avant de le publier où que ce soit. Environ un rendu sur cinq nécessite une nouvelle tentative ou échoue complètement, et le temps n'est utilisé que lorsqu'un rendu réussit, donc intégrez une courte relecture dans le processus plutôt que de publier le premier fichier qui arrive. Cette relecture est aussi le moment où un décalage entre l'indication et l'interface a tendance à apparaître, ce qui vaut la peine de regarder le clip entier une fois avant de décider qu'il est prêt à être mis en ligne.

Où cela s'inscrit-il par rapport aux guides voisins ?

Pour un relecteur qui doit donner son accord avant que l'application ne soit livrée plutôt que la juger comme une pièce de portfolio, la vidéo de relecture d'application Figma Make couvre ce public distinct et le problème de transmission qui vient avant qu'une entrée de portfolio ne vaille même la peine d'être faite. Pour un traitement similaire sur un autre outil de création, comparez une vidéo de démo Bubble, une vidéo de page d'accueil Bubble, une vidéo de lancement Bubble sur Product Hunt, et le partage d'un projet Bubble avec un client, car les applications Bubble se trouvent plus souvent derrière une vraie connexion par défaut.

Pour prouver le résultat d'une interaction précise plutôt qu'un parcours général, le guide de vidéo de résultat de test pour agent IA et le guide de vidéo de démo QA pour agent IA couvrent des formats de preuve voisins. Une vidéo de démo produit intégrée est utile une fois que l'entrée de portfolio doit s'insérer dans une page plutôt que de renvoyer vers un lien extérieur, une vidéo de démo d'application Lovable couvre le travail équivalent pour cet outil de création, et une présentation de produit plus large pour un SaaS est le bon format une fois que l'entrée doit couvrir plus d'une interaction. Pour une comparaison des outils d'enregistrement pour ce type de travail, lisez GogoScreen face à Clueso. Commencez par la page d'accueil GogoScreen, consultez les tarifs, parcourez la bibliothèque de guides complète, ou consultez le reste des comparaisons.

Précisions

Avant de commencer

Pourquoi une capture d'écran ne suffit-elle pas pour une entrée de portfolio ?

Une capture d'écran prouve seulement que l'interface peut être mise en page correctement à un instant figé. Elle ne peut pas montrer si l'interaction fonctionne réellement, ce qui est habituellement exactement ce qu'un relecteur essaie de juger.

La vidéo de portfolio doit-elle montrer le processus Figma Make ou l'application terminée ?

Montrez l'application terminée en train de faire le travail pour lequel elle a été construite. Le processus a sa place dans une étude de cas écrite à côté de la vidéo, pas dans le même clip, car mélanger les deux dilue les deux.

Ai-je besoin de vraies données dans la démo pour la rendre convaincante ?

Vous avez besoin de données plausibles, pas de vraies données. Un contenu de substitution qui se lit comme intentionnel suffit à montrer que l'interaction fonctionne, et utiliser de vraies données client n'est pas approprié pour une entrée de portfolio publique.

Collez une URL, décrivez un parcours et obtenez une vidéo de démonstration de votre application web.

Les 60 premières secondes de vidéo sont gratuites, avec un filigrane. Vérifiez votre adresse e-mail pour télécharger la vidéo.