Figma
Définition
Outil de design collaboratif en ligne, référence pour les maquettes, prototypes interactifs et design systems. Permet le handoff propre entre designers et développeurs.
Qu'est-ce que Figma
Figma est l'outil de référence pour le design d'interfaces web et mobile. Tout vit dans le navigateur, sans installation ni licence machine. Plusieurs personnes peuvent travailler sur le même fichier en temps réel, voir les curseurs des autres, commenter directement sur le design. Le partage se fait par un simple lien, avec des droits granulaires (lecture, commentaire, édition). Figma a écrasé Sketch et Adobe XD depuis 2020 et règne désormais en standard absolu sur les équipes produit, design et front-end dans l'écosystème SaaS.
Ce qu'on y fait
Figma couvre toute la chaîne du design d'interface. On y fait les wireframes basse fidélité au démarrage, les maquettes UI haute fidélité, les prototypes interactifs avec transitions et états (hover, focus, validation, erreur), les design systems avec composants nommés et variants, et la documentation associée. On peut aussi y dessiner des illustrations, des icônes, des présentations. Pour la quasi-totalité des projets web et mobile sérieux, Figma est l'unique fichier source du design. Les autres outils (Notion, Miro) s'intercalent autour pour la doc et l'idéation.
Pour les développeurs
Figma expose les valeurs précises de chaque élément : couleurs en hex et HSL, espacements en px, typographies avec font-family et weight, propriétés CSS prêtes à copier. Le mode Dev (anciennement Inspect) permet aux développeurs de récupérer ces valeurs sans toucher au fichier. Le handoff design vers développement est devenu fluide, sans documentation séparée à maintenir : la maquette est la source de vérité, et le code la reproduit. Des plugins comme Figma to Code ou des intégrations avec Tailwind permettent même de générer une base de composants automatiquement.
Le design system dans Figma
Figma propose des composants réutilisables avec variants : un même Button déclare ses tailles, ses couleurs, ses états dans un seul composant maître. Modifier le maître propage à toutes les instances. Les Variables (introduites en 2023) permettent de gérer les tokens de design (couleurs, espacements, radius) avec aliases et modes (clair/sombre, marque A/marque B). Sur un projet sérieux, on bâtit le design system dans Figma en parallèle du code, et on synchronise les tokens via des plugins comme Tokens Studio.
Les bonnes pratiques
Quelques règles pour un fichier Figma exploitable. Pages claires avec nommage cohérent (Cover, Components, Wireframes, Designs, Archive). Composants nommés selon une convention stricte (Button/Primary/Large, pas Component42 copy 7). Auto-layout sur tous les composants, pour qu'ils se redimensionnent proprement comme du CSS flex ou grid. Styles de texte et de couleur centralisés, pas de valeurs en dur. Pages séparées pour les versions archivées plutôt qu'un dossier "old" qui pollue. Plus l'équipe respecte cette discipline, plus le front-end produit ressemble à ce qui a été imaginé.
Les limites à connaître
Figma a aussi ses faiblesses. Sur les très gros fichiers (centaines de pages, milliers de composants), les performances se dégradent et l'application devient lente. Le mode hors-ligne reste limité, ce qui pénalise en déplacement. Le pricing par siège grimpe sur les grosses équipes : compter quelques milliers d'euros par an pour une équipe produit. La gestion des versions est fonctionnelle mais moins fine qu'un git. Et l'acquisition par Adobe (avortée en 2023) puis le retour à l'indépendance ont créé une instabilité stratégique que certains regardent encore avec prudence.