Figma

Figma est un outil de design collaboratif en ligne qui permet de concevoir des interfaces, des prototypes et des design systems. Son atout principal est la collaboration en temps réel : plusieurs designers peuvent travailler simultanément sur le même fichier, comme dans un Google Docs. C'est devenu le standard de facto pour les équipes UX/UI, remplaçant progressivement Sketch et Adobe XD depuis son acquisition par Adobe (annulée) et son essor pendant la période de travail à distance.

Figma propose un plan gratuit qui couvre la plupart des besoins individuels : projets illimités, jusqu'à 3 fichiers Figma actifs et 3 projets. Les plans payants (Figma Professional, Organization) débloquent les fichiers illimités, les bibliothèques partagées entre équipes, les contrôles d'accès avancés et les fonctionnalités de design system comme les variables et les modes. Pour une petite équipe, le plan gratuit suffit souvent pour débuter.

Figma est l'outil de design : on y conçoit des interfaces, des composants et des prototypes. FigJam est l'outil de collaboration visuelle : on y organise des ateliers, des rétrospectives, des mappings et des sessions de co-conception sur des tableaux blancs interactifs. Les deux sont intégrés dans le même écosystème Figma et permettent de passer de l'idéation (FigJam) à la conception (Figma) sans changer d'outil.

Figma génère automatiquement les spécifications de design (valeurs CSS, dimensions, couleurs, typographie) pour chaque élément d'une maquette, accessibles aux développeurs via l'onglet Dev Mode. Les variables et design tokens peuvent être exportés dans des formats compatibles avec le code. Des plugins comme Tokens Studio ou Figma Variables permettent une synchronisation plus poussée entre les tokens Figma et les variables CSS ou les thèmes de code.

Oui, c'est l'une de ses fonctions principales. Les bibliothèques de composants Figma permettent de publier des composants réutilisables accessible à toute l'équipe. Les variables Figma (disponibles depuis 2023) permettent de gérer les design tokens directement dans Figma : couleurs, typographie, espacement, modes sombre/clair. Un design system bien structuré dans Figma, avec des composants et des variables, réduit significativement les inconsistances visuelles sur un produit complexe.