Figma : c’est quoi, à quoi ça sert et usages côté produit

Figma est un logiciel de conception d’interfaces qui fonctionne dans le navigateur : les fichiers sont hébergés en ligne et plusieurs personnes peuvent y travailler en même temps. Designers, product managers et développeurs y consultent les mêmes écrans, les commentent et suivent l’évolution d’un produit au même endroit.

Cet article s’adresse au product manager ou au product owner qui n’est pas designer, et qui ouvre un fichier Figma sans savoir jusqu’où il a le droit d’aller. On y trouve la définition de l’outil, les quelques gestes réellement utiles côté produit, la fonction qui change la vie d’une équipe, et les limites à connaître avant de confondre une maquette avec une décision.

Figma, c’est quoi ? Définition et fonctionnement

Figma appartient à la famille des éditeurs de design d’interface, aux côtés de Sketch, d’Adobe XD ou de Penpot. Sa particularité ne tient pas à ses outils de dessin, comparables à ceux de ses concurrents, mais à son mode d’hébergement : le fichier ne vit pas sur le poste d’un designer, il vit en ligne. Chacun l’ouvre depuis une adresse web et voit les curseurs des autres se déplacer sur les mêmes écrans.

Cette architecture explique la place que l’outil a prise dans les équipes produit. Un fichier Figma s’organise en pages, elles-mêmes composées de frames, c’est-à-dire des cadres qui représentent chacun un écran ou un composant. Les tout premiers écrans y prennent souvent la forme de wireframes, puis se densifient jusqu’à des maquettes détaillées, parfois appelées mockups. Le même fichier peut donc contenir plusieurs états de maturité d’un même parcours, ce qui est à la fois sa force et sa première source de malentendus.

Figma, FigJam et Dev Mode : ce que recouvre le nom

Le mot « Figma » désigne dans l’usage courant plusieurs environnements distincts, ce qui brouille les conversations en réunion. Il existe une annonce structurante à faire une fois pour toutes dans une équipe : on ne travaille pas au même endroit selon ce qu’on cherche à produire.

• Figma Design : l’éditeur d’écrans proprement dit, celui où les maquettes se construisent.
• FigJam : un tableau blanc en ligne, adapté aux ateliers, aux votes et au regroupement de post-its — le support naturel d’un affinity diagram mené à distance.
• Dev Mode : un espace de consultation destiné aux développeurs, qui y lisent les mesures, les valeurs de style et les écarts entre deux versions d’un écran.

Figma vs Sketch : ce que le navigateur a changé

La comparaison Figma vs Sketch se joue moins sur les fonctions de dessin que sur le mode de travail. Sketch est une application native macOS : le fichier appartient à une machine, se partage par export ou synchronisation, et l’édition simultanée y est arrivée tardivement. Figma s’ouvre dans un navigateur sur n’importe quel système, un lien suffit à donner accès, et l’édition à plusieurs est le comportement par défaut plutôt qu’une option.

Ce détail technique a une conséquence organisationnelle directe : quand un lien remplace un fichier joint, la relecture cesse d’être un événement planifié pour devenir un geste continu. C’est ce qui rend l’outil intéressant pour un rôle produit. Reste que le choix de l’éditeur appartient rarement au product manager : il se décide côté design, souvent au niveau d’un head of design qui arbitre l’outillage et le système de design de toute l’organisation.

Ce qu’un product manager fait concrètement dans un fichier

Les droits d’accès posent déjà la limite. Un fichier se partage en lecture ou en édition, et un profil produit n’a besoin que du premier niveau : la lecture autorise la navigation, le mode présentation et les commentaires. Trois gestes suffisent alors à couvrir l’essentiel du besoin.

• Lire : circuler entre les pages, repérer la frame qui correspond à un écran discuté, lancer le mode présentation pour montrer un parcours sans montrer les calques.
• Commenter : poser un commentaire ancré sur l’élément concerné plutôt que dans un message séparé, répondre dans le fil, mentionner la personne attendue.
• Prototyper grossièrement : relier quelques frames existantes pour obtenir un enchaînement cliquable, quand il s’agit de faire tester une hypothèse et non de livrer une intention de design.

	Le product manager	Le designer
Lire et naviguer	Ouvre le fichier, suit les parcours, présente les écrans aux parties prenantes	Organise les pages, nomme les frames, signale l’état de chacune
Commenter	Décrit le problème observé, tranche les priorités, valide le périmètre	Répond, propose des alternatives, documente le choix retenu
Prototyper	Assemble un enchaînement rudimentaire pour un test	Construit le prototype de démonstration et ses animations
Modifier les écrans	Rien : ni couleur, ni libellé, ni espacement	Toute l’édition du fichier
Bibliothèque	Ne publie ni ne détache jamais un composant	Crée, publie et fait évoluer la bibliothèque

Cette répartition n’est pas une question de hiérarchie mais de traçabilité : un fichier où deux métiers éditent produit des écrans dont plus personne ne sait qui les a validés.

En vidéo : « Présentation de Figma » (Digidop), une visite guidée de l’interface et du vocabulaire de l’outil, en français.

Composants et bibliothèque : la fonction qui change tout

Un composant est un élément d’interface enregistré comme modèle : un bouton, un champ de formulaire, une carte produit. Il se réutilise sous forme d’instances, et une modification apportée au composant principal se propage à toutes ses instances. C’est le seul mécanisme de Figma qui change réellement le quotidien d’une équipe produit, et la documentation de Figma sur les composants en décrit le fonctionnement en détail.

Composant principal et instance : le mécanisme

Le rapport entre les deux objets est asymétrique, et c’est tout l’intérêt. Le composant principal fait autorité ; l’instance en hérite. Une instance accepte des ajustements locaux, appelés overrides — changer un libellé, masquer une icône — sans rompre le lien avec son modèle. Elle peut aussi être détachée, ce qui la transforme en calques ordinaires et la coupe définitivement des mises à jour.

La conséquence pratique se mesure au premier changement transverse. Corriger l’espacement interne d’un bouton demande une intervention sur le composant, pas quarante retouches écran par écran. À l’inverse, un écran dessiné en dehors de la bibliothèque impose la retouche manuelle : il produit une dette invisible, qui ne se révèle qu’au moment où l’on veut faire évoluer le produit.

La bibliothèque partagée : pourquoi c’est là que tout se joue

Une bibliothèque est un fichier dont les composants, les styles et les variables sont publiés pour être réutilisés dans les autres fichiers d’une équipe. Les mises à jour ne s’appliquent pas de force : chaque fichier consommateur reçoit une notification et accepte les changements quand son auteur le décide, comme l’expose le guide des bibliothèques de Figma.

Pour un rôle produit, l’intérêt est moins esthétique que budgétaire. Une demande formulée à l’échelle du système — « tous les boutons secondaires changent de traitement » — devient une tâche unique, estimable, au lieu d’un chantier diffus réparti sur une centaine d’écrans. C’est le seul endroit du fichier où une décision de design se transforme en mécanisme plutôt qu’en intention.

Une bibliothèque partagée est ce qui distingue un ensemble de maquettes cohérentes d’un système de design réellement opérant.

Il existe en revanche une question qu’un product manager gagne à poser tôt : qui possède la bibliothèque, et selon quel rythme elle évolue. Une bibliothèque sans propriétaire désigné se dégrade en quelques mois, et personne ne s’en aperçoit avant la refonte suivante.

Le prototype cliquable : un support de test, pas un livrable

Un prototype Figma relie des frames entre elles par des interactions : un clic sur un élément conduit à un autre écran, un survol révèle un menu. Le résultat s’ouvre dans un lien partageable et donne l’illusion d’une application fonctionnelle, sans une ligne de code. Le guide de prototypage de Figma détaille les types de liaisons disponibles.

À quoi sert un prototype : faire tester, pas faire valider

Un prototype se justifie quand il y a une question ouverte et un moyen de la fermer. Il n’a pas pour objet de convaincre un comité, mais d’exposer une hypothèse à quelqu’un qui n’a pas participé à sa fabrication. Voici les usages pour lesquels il tient réellement sa promesse :

• Éprouver un parcours : un test d’utilisabilité mené sur un prototype révèle les hésitations et les impasses avant qu’elles coûtent du développement.
• Alimenter la phase amont : c’est un artefact classique de product discovery, et l’étape de prototypage rapide du design thinking ne demande rien de plus.
• Collecter un avis situé : un retour client obtenu écran en main vaut davantage qu’un avis émis sur une description écrite.
• Cadrer une conversation technique : montrer l’enchaînement attendu évite une longue discussion sur ce que « l’écran suivant » désigne.

Les méthodes qui encadrent ces tests — protocole de test d’utilisabilité, user research, formalisation d’un user flow — se travaillent en dehors de l’outil. Figma n’est ici que le support ; il ne remplace ni le protocole ni la personne qui l’anime.

Pourquoi ce n’est pas un livrable de développement

Un prototype montre le chemin heureux. Il ne dit presque rien des états d’erreur, des champs vides, des libellés qui débordent, des données réelles ni du comportement sous mauvaise connexion — c’est-à-dire précisément ce qui occupe la majorité du temps de développement. Le transmettre comme spécification revient à confier une maquette de bâtiment à un maçon.

Le relais se prend ailleurs : dans une spec produit qui énonce les règles et les cas limites, dans des user stories assorties de critères d’acceptation, et dans un découpage de type story mapping quand le périmètre est large. La validation sur produit réel, elle, relève d’une phase de beta testing, pas d’un lien de prototype.

Les limites : ce qu’un fichier Figma ne dit pas

Une maquette Figma expose une solution possible. Elle ne démontre ni qu’un besoin existe, ni que la solution y répond, ni qu’elle est réalisable dans un délai raisonnable. Deux confusions coûtent cher aux équipes produit : prendre une maquette pour une décision, et prendre un fichier pour une source de vérité.

Une maquette n’est pas une décision produit

Un écran soigné emporte l’adhésion d’une salle en quelques secondes, ce qui est exactement son danger. La qualité graphique d’une proposition n’apporte aucune information sur la valeur du problème qu’elle traite. Une décision produit s’appuie sur autre chose : un problème formulé, des retours utilisateurs convergents, une place identifiée dans la customer journey map, et un coût de réalisation estimé.

La répartition des rôles est ici sans ambiguïté. Le product designer produit des options et documente leurs contreparties ; l’arbitrage entre ces options, lui, reste au product manager. Un fichier qui ne contient qu’une seule proposition n’a d’ailleurs pas donné lieu à un arbitrage : il l’a court-circuité.

Un fichier Figma n’est pas une source de vérité

C’est la limite la plus souvent ignorée, parce qu’elle se manifeste tard. Un fichier accumule des couches successives dont rien ne signale le statut, et le produit vécu par l’utilisateur se trouve en production, pas dans la maquette.

• Des variantes abandonnées qui continuent de circuler par lien direct, longtemps après avoir été écartées.
• Des écrans jamais développés, indiscernables de ceux qui sont en ligne pour qui ne connaît pas l’historique.
• Des ajustements faits en développement et jamais remontés dans le fichier, qui creusent l’écart au fil des sprints.

Le Dev Mode de Figma, qui permet de marquer l’état d’une section et de comparer deux versions d’un écran, réduit cet écart sans le supprimer. Une convention d’équipe reste nécessaire : une page « prêt à développer » clairement identifiée, et l’habitude d’archiver ce qui a été écarté.

Redessiner par-dessus le designer : l’erreur la plus courante

La tentation est compréhensible : l’outil est accessible, la modification paraît minime, elle fera gagner un aller-retour. Elle coûte pourtant deux fois. Sur le fond, un écran retouché en dehors de la bibliothèque casse la cohérence du système sans que son auteur s’en rende compte. Sur la forme, elle déplace la conversation de l’objectif vers le pixel, terrain sur lequel un rôle produit n’a aucun argument à opposer.

La règle de substitution est simple et se formule en une ligne : décrire le problème, jamais la solution. Un commentaire qui signale que l’utilisateur ne comprend pas où cliquer déclenche un travail de conception. Un commentaire qui demande un bouton vert déclenche une discussion sur la couleur du bouton.

S’il ne fallait retenir qu’une chose, ce serait celle-ci : je considère Figma comme un outil de conversation, pas comme un outil de décision. Sa valeur pour une équipe produit ne vient ni de la beauté des écrans ni du nombre de prototypes, mais de la bibliothèque partagée, qui transforme une intention de cohérence en mécanisme vérifiable. Le reste — apprendre à lire un fichier, commenter au bon endroit, s’abstenir de dessiner — s’acquiert en quelques heures et suffit largement.

FAQ — Tout savoir sur Figma

Figma, c’est quoi ?

Figma est un logiciel de conception d’interfaces qui s’utilise dans un navigateur, avec une application de bureau optionnelle. Les fichiers sont hébergés en ligne, plusieurs personnes peuvent les éditer simultanément, et un simple lien suffit à donner accès en lecture ou en édition à un collègue comme à un intervenant externe.

À quoi sert le logiciel Figma ?

Il sert à dessiner les écrans d’un site ou d’une application, à les faire relire par commentaires, à les assembler en prototype cliquable pour les faire tester, puis à les transmettre au développement. Il héberge aussi la bibliothèque de composants qui garantit la cohérence visuelle d’un produit entier.

Qu’est-ce qu’un fichier Figma ?

C’est un document hébergé en ligne, identifié par une adresse web plutôt que par un fichier local. Il se structure en pages, qui contiennent des frames et des calques. Un même fichier abrite fréquemment plusieurs états de maturité d’un parcours, des premiers jets aux écrans destinés au développement.

C’est quoi une frame sur Figma ?

Une frame est un cadre qui délimite une zone de travail et représente le plus souvent un écran complet, dans un format donné : mobile, tablette ou bureau. Elle peut aussi encadrer un composant isolé. Les frames servent également de points de départ et d’arrivée aux liaisons d’un prototype.

C’est quoi un composant sur Figma ?

Un composant est un élément d’interface enregistré comme modèle réutilisable, par exemple un bouton ou un champ de formulaire. Il se décline en instances, et toute modification du composant principal se répercute sur elles. Une instance accepte des ajustements locaux, ou peut être détachée, ce qui la coupe des mises à jour.

Figma est-il gratuit ?

Figma propose une offre gratuite, suffisante pour consulter, commenter et travailler sur un nombre limité de fichiers, ainsi que des formules payantes destinées aux équipes et aux organisations, qui étendent notamment la gestion des droits et le travail en bibliothèque. Le détail des offres évoluant régulièrement, il se vérifie sur le site de l’éditeur.

Quelle différence entre Figma et Sketch ?

Sketch est une application native macOS, dont le fichier est attaché à une machine et se partage par export ou synchronisation. Figma s’ouvre dans un navigateur sur n’importe quel système et fait de l’édition simultanée son comportement par défaut. Les outils de dessin sont proches ; c’est le mode de collaboration qui diffère.