Figma a été créé en 2011 par deux Américains : Dylan Field et Evan Wallace. Leur volonté ? Rendre le design accessible à tous grâce à une solution web en ligne. Des années plus tard, le pari est tenu : Figma est devenu l’outil de référence du design d’interface, utilisé aussi bien par des freelances que par la grande majorité des équipes produit.
Ce qui n’a pas changé, c’est l’idée de départ : permettre à des personnes d’horizons et de rôles différents de collaborer et de créer ensemble.
Un mot sur l’IA avant de commencer
Si vous démarrez le design aujourd’hui, une question vous trotte probablement dans la tête : est-ce que ça vaut encore le coup d’apprendre à utiliser Figma aujourd’hui alors que l’IA fait déjà une partie du travail ? Le rapport 2026 de Figma sur l’IA montre que le design gagne en importance, il n’en perd pas. La raison est assez logique : quand produire du code devient rapide et bon marché, ce qui fait la différence se déplace vers les décisions en amont, savoir quoi construire et pour qui.
L’autre enseignement, c’est que le vrai gain n’est pas individuel mais collectif : six fois plus de personnes qu’il y a deux ans estiment que l’IA a transformé leur façon de collaborer, les développeurs participent davantage à la conception et les designers touchent davantage au code. Et cette collaboration se passe sur le plan de travail, exactement là où nous allons passer les prochains épisodes. Retenez surtout ceci : les équipes qui tirent le plus de bénéfices de l’IA sont celles qui l’utilisent sur des bases propres, avec un design system structuré et des composants bien nommés. Tout ce que vous allez apprendre ici ne devient donc pas obsolète avec l’IA, c’est précisément ce qui vous permettra de vous en servir correctement.
Lien vers l’article Figma avec le rapport de 2026 sur l’IA
Les produits Figma
Au fil des années, Figma a étendu son offre bien au-delà du fichier de design. Voici les produits disponibles aujourd’hui et le rôle de chacun.
| Produit | À quoi ça sert | Quand l’utiliser |
|---|---|---|
| Figma Design | Concevoir, prototyper et tester des interfaces web et applicatives | Le cœur du réacteur, c’est là que vous passerez 90 % de votre temps |
| FigJam | Tableau blanc collaboratif en ligne | Brainstorming, ateliers, arborescence, parcours utilisateur |
| Figma Slides | Créer des présentations sans renoncer au design | Présenter une recommandation, un concept, un rapport à un client |
| Figma Buzz | Produire des visuels de marque en série à partir de gabarits | Décliner des posts réseaux sociaux, bannières, supports marketing |
| Figma Sites | Publier un site web directement depuis Figma | Landing pages, sites vitrines simples, prototypes en ligne |
| Figma Make | Générer des prototypes fonctionnels à partir d’une description | Tester une idée d’interaction rapidement, sans écrire de code |
Ne vous laissez pas impressionner par cette liste. Pour apprendre Figma, tout se joue dans Figma Design. Les autres produits viendront naturellement quand vous en aurez besoin.
Figma Design et FigJam sont particulièrement complémentaires : ils couvrent l’ensemble de votre processus de conception, de la réflexion et l’esquisse d’idées dans FigJam, à leur conception et réalisation dans Figma.
Pourquoi utiliser Figma ?
La conception collaborative
Figma permet une collaboration en temps réel. Plusieurs personnes peuvent travailler sur le même fichier simultanément, ce qui permet d’inclure tous les acteurs du projet dans la conception, de simplifier les échanges et d’accélérer le processus.
Concrètement, votre client peut commenter une maquette pendant que vous la modifiez, et votre développeur peut inspecter un composant sans vous demander d’export. Fini les allers-retours de fichiers par mail avec des noms comme « maquette-v3-FINAL.psd ».
Les graphiques vectoriels
Vous pouvez créer dans Figma des designs complexes que vous exportez sans perte de qualité, peu importe leur taille. Les graphiques vectoriels sont parfaits pour vos logos, icônes, illustrations et tous les éléments qui doivent rester nets quelle que soit leur résolution.
L’Auto Layout
Figma propose une fonctionnalité appelée Auto Layout, qui permet la conception de designs réactifs. Concrètement, l’Auto Layout vous permet de distribuer l’espace entre vos éléments, de les aligner et de les adapter automatiquement en fonction de leur contenu. L’ensemble de ces paramètres vous permet de créer des éléments flexibles et de simuler leur comportement sur différentes tailles d’écran.
Si vous êtes familier avec les langages de développement, l’Auto Layout est l’équivalent du Flexbox en CSS. Et depuis 2025, Figma propose également un mode Grid, qui reprend la logique du CSS Grid.
Le prototypage
Une des fonctions phares de Figma ? La possibilité de créer des prototypes réalistes et interactifs. Cela vous permet d’avoir une meilleure vision d’ensemble du projet et de tester rapidement vos conceptions : interactions, animations, mais surtout flux utilisateurs.
Vous pouvez ensuite partager et itérer vos idées auprès de vos équipes/collaborateurs et leur permettre de réagir directement en créant des commentaires ciblés.
Le design system
Figma est un outil idéal pour créer un système de design : il permet de centraliser toutes vos ressources en un seul endroit. Vous pouvez ainsi partager vos composants, styles et variables entre tous vos fichiers et équipes. Ces fonctionnalités facilitent la cohérence de vos designs, la collaboration entre les membres de votre équipe et accélèrent tout votre processus de conception.
Votre design system est également plus facile à maintenir : vous pouvez le faire évoluer et mettre à jour composants, styles et variables partout où ils sont utilisés. Les évolutions sont appliquées automatiquement et de manière cohérente sur l’ensemble de vos conceptions.
Du design au code
Figma propose le Dev Mode, un environnement dédié aux développeurs qui facilite grandement le passage du design au code. Dans ce mode, les développeurs peuvent :
- Inspecter les propriétés CSS directement depuis les designs
- Récupérer le code des composants
- Accéder aux assets et exports optimisés
- Voir les spécifications techniques précises et l’état d’avancement de chaque écran
Figma propose également un serveur MCP, qui permet de connecter vos fichiers de design directement à votre agent IA.
Ce point est particulièrement intéressant si vous intégrez vous-même vos maquettes : plus vos variables et vos composants sont structurés dans Figma, plus l’intégration derrière est rapide et fidèle.
Un outil qui évolue sans cesse
Figma évolue en permanence, avec des améliorations en continu et des nouveautés majeures dévoilées chaque année à la Config (conférence annuelle). L’équipe est reconnue pour son écoute : une bonne partie des fonctionnalités les plus attendues viennent de demandes de la communauté.
Une communauté active
Enfin, Figma bénéficie d’une communauté passionnée qui publie constamment des plugins, des widgets et des fichiers en libre accès. Ces ressources peuvent vous aider à automatiser certaines tâches, améliorer l’accessibilité de vos conceptions, générer du contenu de remplissage réaliste, et bien plus encore.
Où utiliser Figma ?
Dans votre navigateur
Une des forces de Figma, c’est qu’il est directement accessible depuis n’importe quel navigateur. Vous pouvez ainsi inviter vos équipes et vos clients à collaborer sur un projet, sans qu’ils aient besoin d’installer quoi que ce soit.
L’application de bureau
Figma se décline aussi en application desktop pour Windows et Mac. C’est la version que je vous recommande au quotidien : elle gère mieux les polices installées localement sur votre machine et vous permet de travailler sur plusieurs fichiers en onglets.
L’application mobile
Il existe également une application mobile pour iOS et Android. Elle vous permet de tester vos prototypes directement sur téléphone, dans les conditions réelles d’usage, et d’accéder à vos commentaires.
Tester un prototype mobile sur un vrai téléphone change tout. Une zone cliquable qui paraissait généreuse sur votre écran 27 pouces peut devenir inatteignable au pouce. Prenez l’habitude de tester tôt.
Créer un compte
Pour accéder à Figma, vous aurez besoin de créer un compte. Rendez-vous sur figma.com et cliquez sur Commencer gratuitement.
Une fenêtre va s’ouvrir avec plusieurs options de connexion : continuer avec Google, ou remplir un formulaire de création de compte.
Continuer avec Google
Plutôt que de renseigner votre adresse e-mail et créer un nouveau mot de passe, vous pouvez cliquer sur « Continuer avec Google ». Le service vérifie qui vous êtes sur Google et crée automatiquement un nouveau compte pour vous. Lorsque vous souhaiterez vous reconnecter à Figma, vous pourrez simplement cliquer sur « Continuer avec Google » pour accéder à votre compte.
Une fois vos informations renseignées, cliquez sur « Créer un compte ». Figma vous posera ensuite quelques questions sur votre utilisation de l’outil, votre rôle… Ces questions sont à but purement informatif et ne modifieront pas votre expérience Figma.
Faut-il payer Figma ?
Non, pas pour suivre cette formation. L’offre gratuite de Figma vous permet de créer des fichiers de design, de prototyper et de collaborer. Elle est largement suffisante pour apprendre et pour de petits projets.
Certaines fonctionnalités avancées nécessitent en revanche un abonnement payant (ex. : le nombre de fichiers par projet, les librairies partagées, certains modes de variables, les fonctionnalités IA…). Je vous préciserai au fil des épisodes quand une fonctionnalité est concernée.
Si Figma devient votre outil de travail au quotidien, le passage à une offre payante se rentabilise très vite. Les fonctionnalités qu’elle débloque vous feront gagner un temps réel sur chaque projet.
En résumé
- Figma est un outil de design d’interface collaboratif et accessible depuis un navigateur
- C’est aujourd’hui une suite de produits : Design, FigJam, Slides, Draw, Buzz, Sites et Make
- Ses points forts : la collaboration temps réel, l’Auto Layout, le prototypage, le design system et le pont vers le code
- L’offre gratuite suffit pour démarrer et suivre cette formation
Maintenant que vous avez votre compte, passons à la découverte de l’interface !