Figma
Figma est le standard du design produit. Collaboration temps réel, composants, variants, auto-layout, Dev Mode pour les devs. Avec le MCP Figma, Claude peut lire directement les designs pour générer du code.
Comment je l'utilise
- ›Wireframes et maquettes haute fidélité
- ›Design system avec variants et tokens
- ›Prototypes cliquables pour user tests
Installation
Prérequis.Compte sur figma.com (gratuit suffit pour démarrer). L'app desktop est nettement plus performante que le browser, notamment pour les fichiers lourds et pour Dev Mode.
$ brew install --cask figmaPlan Pro (15 $/éditeur/mois) requis si tu veux publier des composants partagés ou utiliser les libraries. Plan gratuit suffit pour du design perso ou quelques écrans.
Configs et workflows qui valent le coup
Auto-layout partout (sinon ton design casse quand les textes changent)
Dès que tu as 2 éléments alignés, utilise Auto-layout (Shift+A). Tu définis l'espacement, l'alignement, le comportement en hug/fill. Le bénéfice : un bouton qui s'adapte à son texte, une card qui grandit avec son contenu. Sans auto-layout, tu passes ta vie à aligner manuellement.
Variants de composant
Un bouton = UN composant avec 4-5 variants (primary/ghost/disabled/loading/danger), pas 5 composants différents. Tu changes le variant via un dropdown dans Inspector. Tes designs restent cohérents, et un changement de style se propage partout.
Figma MCP + Claude Code pour générer du code depuis un design
Active Dev Mode dans Figma, branche le MCP Figma dans Claude Code, et tu peux dire 'génère le composant React du frame sélectionné en respectant mes tokens Tailwind'. Claude lit la structure du design, les variables, l'auto-layout, et sort un composant aligné sur ton design system.
# Dans Figma Desktop → Preferences → Enable Dev Mode MCP Server # Claude Code détecte auto le serveur local (port 3845) # Tape dans Claude : "Génère le composant du frame sélectionné en React + Tailwind"