Figma a toute une couche orientée développeur qui va bien au-delà de regarder une maquette et d’estimer les espacements à l’oeil. Le Dev Mode donne les propriétés CSS, les valeurs d’espacement, les props des composants et les design tokens directement depuis le canvas. Comprendre comment lire un fichier Figma correctement fait la différence entre un workflow design-to-code fluide et des allers-retours constants avec l’équipe design.
Dev Mode : la vue développeur
Le Dev Mode est une vue séparée dans Figma qui masque les outils de design et ne montre que ce dont les développeurs ont besoin. On clique sur n’importe quel élément et le panneau de droite affiche ses propriétés CSS, les espacements relatifs aux éléments voisins, et les assets prêts à l’export.
/* Ce que le Dev Mode vous donne */
width: 320px;
padding: 24px;
border-radius: 12px;
background: #1A1A2E;
display: flex;
flex-direction: column;
gap: 16px;La sortie est du vrai CSS, pas une approximation grossière. Border radius, box shadows, gradients, blend modes, tout est traduit en propriétés valides. Pour les utilisateurs de Tailwind, des plugins comme “Figma to Tailwind” mappent ces valeurs directement en classes utilitaires.
L’habitude clé est de cliquer sur l’espace entre les éléments plutôt que sur les éléments eux-mêmes. Figma affiche la distance en pixels, qui correspond directement au padding, margin ou gap selon le contexte de layout. Plus besoin de zoomer et de compter les pixels manuellement.
Auto Layout et Flexbox : le même modèle mental
L’Auto Layout de Figma, c’est du Flexbox. Les designers qui utilisent l’Auto Layout correctement écrivent des spécifications de layout CSS sans le savoir. Le mapping est direct.
Figma Auto Layout CSS Flexbox
───────────────── ───────────────
Direction: Vertical → flex-direction: column
Direction: Horizontal → flex-direction: row
Gap: 16 → gap: 16px
Padding: 24 → padding: 24px
Alignment: Center → align-items: center
Fill Container → flex: 1
Hug Contents → width: fit-content
Fixed Width → width: [value]pxQuand un design utilise l’Auto Layout de manière consistante, le traduire en code est mécanique. La hiérarchie des frames correspond à la hiérarchie des divs. Les valeurs d’espacement correspondent au gap et au padding. Les modes de dimensionnement correspondent aux propriétés flex.
// Frame Figma : Auto Layout, vertical, gap 16, padding 24, arrondi 12
function Card({ title, description, children }: CardProps) {
return (
<div className="flex flex-col gap-4 rounded-xl bg-[#1A1A2E] p-6">
<h3 className="text-lg font-semibold text-white">{title}</h3>
<p className="text-sm text-gray-400">{description}</p>
{children}
</div>
);
}Quand un design n’utilise pas l’Auto Layout, c’est un signal. Les éléments en position fixe avec des valeurs magiques sont plus difficiles à implémenter en responsive et plus difficiles à maintenir. Pousser les designers vers l’Auto Layout améliore à la fois le design system et l’expérience développeur.
Design tokens : la source de vérité unique
Les design tokens sont des valeurs nommées pour les couleurs, espacements, typographie et ombres. Dans Figma, ils vivent sous forme de styles et de variables. Dans le code, ils deviennent des custom properties CSS ou des valeurs de config Tailwind.
Figma Variable Token Code
────────────── ──────────
color/primary → --color-primary: #6C63FF
color/surface → --color-surface: #1A1A2E
color/text-primary → --color-text-primary: #FFFFFF
color/text-muted → --color-text-muted: #9CA3AF
spacing/sm → --spacing-sm: 8px
spacing/md → --spacing-md: 16px
spacing/lg → --spacing-lg: 24px
radius/md → --radius-md: 12pxLe workflow consiste à extraire ces tokens une fois et à les référencer partout. Quand le designer change color/primary de #6C63FF à #7C73FF, on change une seule variable. Chaque composant qui utilise le token se met à jour automatiquement.
export default {
theme: {
extend: {
colors: {
primary: '#6C63FF',
surface: '#1A1A2E',
'text-primary': '#FFFFFF',
'text-muted': '#9CA3AF',
},
spacing: {
sm: '8px',
md: '16px',
lg: '24px',
},
borderRadius: {
md: '12px',
},
},
},
};La fonctionnalité Variables de Figma supporte les modes (light/dark, compact/comfortable), qui correspondent directement aux overrides de custom properties CSS ou aux classes dark mode de Tailwind. Le fichier de design devient la documentation du système de tokens.
Inspection de composants : lire les props et variants
Les composants Figma ont des variants, des propriétés booléennes et des overrides de texte. Le Dev Mode expose tout ça sous forme de liste structurée, qui correspond directement aux props du composant.
Composant Figma : Button
├── Variant : Primary | Secondary | Ghost
├── Size : SM | MD | LG
├── Icon : Left | Right | None
├── State : Default | Hover | Disabled
└── Label : "Click me"interface ButtonProps {
variant?: 'primary' | 'secondary' | 'ghost';
size?: 'sm' | 'md' | 'lg';
icon?: 'left' | 'right' | 'none';
disabled?: boolean;
children: React.ReactNode;
}
function Button({
variant = 'primary',
size = 'md',
icon = 'none',
disabled = false,
children,
}: ButtonProps) {
return (
<button
disabled={disabled}
className={cn(
'inline-flex items-center font-medium transition-colors',
sizeStyles[size],
variantStyles[variant],
disabled && 'pointer-events-none opacity-50'
)}
>
{icon === 'left' ? <Icon /> : null}
{children}
{icon === 'right' ? <Icon /> : null}
</button>
);
}La structure de variants Figma est l’API du composant. Chaque axe de variant devient une prop. Chaque valeur de variant devient un membre de type union. Les états hover et disabled deviennent des pseudo-classes CSS et des styles conditionnels. La traduction est quasi mécanique quand le composant est bien structuré dans Figma.
Typographie : extraire l’échelle de types
Les styles de texte Figma définissent un système typographique qui doit correspondre exactement au code. Le Dev Mode montre la famille de police, le poids, la taille, la hauteur de ligne et l’espacement des lettres pour chaque élément de texte.
Style Texte Figma CSS
───────────────── ───
Heading/H1 → font-size: 48px; line-height: 1.1; font-weight: 700; letter-spacing: -1.5px
Heading/H2 → font-size: 36px; line-height: 1.2; font-weight: 700; letter-spacing: -1px
Body/Regular → font-size: 16px; line-height: 1.6; font-weight: 400
Body/Small → font-size: 14px; line-height: 1.5; font-weight: 400
Label/Medium → font-size: 12px; line-height: 1.4; font-weight: 500; text-transform: uppercase:root {
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'Fira Code', monospace;
}
h1 { font-size: 48px; line-height: 1.1; font-weight: 700; letter-spacing: -1.5px; }
h2 { font-size: 36px; line-height: 1.2; font-weight: 700; letter-spacing: -1px; }L’erreur d’implémentation la plus courante concerne la hauteur de ligne. Figma affiche la line-height en pixels (ex: 52.8px pour un heading de 48px). Convertir en ratio sans unité (52.8 / 48 = 1.1) produit des résultats plus prévisibles en CSS dans différents contextes.
L’espacement des lettres est une autre source de dérive. Figma utilise des valeurs en pourcentage qui doivent être converties en em ou en pixels selon votre configuration CSS. Le Dev Mode montre la valeur calculée, ce qui supprime les devinettes de conversion.
Assets et exports : les SVGs bien faits
Les icônes et illustrations doivent être exportées en SVG depuis Figma, pas en PNG. Le Dev Mode permet de sélectionner n’importe quel élément et de l’exporter en plusieurs formats.
// Exporté depuis Figma en SVG, converti en composant React
function ArrowRight({ size = 24, className }: IconProps) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<path
d="M5 12h14M12 5l7 7-7 7"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}Utiliser currentColor pour le stroke et le fill fait que l’icône hérite de la couleur de texte de son parent. viewBox garantit que le SVG scale proprement à toute taille. Ce pattern transforme les icônes Figma en composants React réutilisables qui réagissent aux changements de thème sans travail supplémentaire.
Pour les exports d’icônes en masse, des plugins Figma comme “SVG Export” ou l’API REST de Figma peuvent extraire une bibliothèque d’icônes entière d’un coup, alimentant un pipeline automatisé qui génère des composants React à partir de fichiers SVG.
Design responsive : lire les breakpoints
Les fichiers Figma contiennent typiquement des frames à différentes largeurs représentant mobile, tablette et desktop. Les différences entre ces frames sont les spécifications responsive.
Desktop (1440px) Tablette (768px) Mobile (375px)
┌──────────────────┐ ┌────────────────┐ ┌──────────┐
│ ■ ■ ■ ■ │ │ ■ ■ │ │ ■ │
│ Grille 4 colonnes│ │ Grille 2 col. │ │ 1 colonne│
│ gap: 24px │ │ gap: 16px │ │ gap: 12px│
│ padding: 80px │ │ padding: 40px │ │ padding: │
│ │ │ │ │ 16px │
└──────────────────┘ └────────────────┘ └──────────┘function ProductGrid({ products }: ProductGridProps) {
return (
<div className="grid grid-cols-1 gap-3 px-4 sm:grid-cols-2 sm:gap-4 sm:px-10 lg:grid-cols-4 lg:gap-6 lg:px-20">
{products.map((product) => (
<ProductCard key={product.id} product={product} />
))}
</div>
);
}Comparer la même section à travers les breakpoints révèle quelles valeurs changent. Le nombre de colonnes, le gap, le padding, les tailles de police et la visibilité des éléments sont les variations responsive les plus courantes. Lire ces différences systématiquement produit du code responsive plus propre que de deviner le comportement aux breakpoints.
Conclusion
Figma n’est pas juste un outil de design. Pour les développeurs, c’est un document de spécification qui contient les valeurs exactes pour chaque pixel à l’écran. Le Dev Mode rend ces valeurs accessibles sans avoir à demander au designer. Les design tokens créent un langage partagé entre le fichier Figma et la codebase. L’Auto Layout correspond au Flexbox. Les variants de composants correspondent aux props. Les développeurs qui apprennent à lire Figma correctement passent moins de temps en allers-retours et produisent des implémentations fidèles au design du premier coup.