← Retour au blog
Outils

Mon setup Figma pour une livraison pro

Février 2026
8 min de lecture
Justine Tilleul
COVERDESIGN SYS.ECRANSARCHIVECouleursTypoBoutonCarteInputEXPORTS

Un développeur m'a dit un jour : « C'est le premier fichier Figma que je reçois où je n'ai pas besoin d'appeler la designer pour demander des explications. » J'ai pris ça comme le plus beau compliment professionnel de ma carrière. L'organisation d'un fichier Figma, c'est la moitié du travail de livraison.

La structure de pages

Chaque fichier Figma suit la même structure de pages, dans le même ordre :

« Un fichier bien organisé, c'est du respect pour votre client — et pour votre futur vous. »

Les 4 règles d'or de l'organisation Figma
1
Tout nommer, tout grouperAucun calque ne s'appelle "Rectangle 47". Si vous ne pouvez pas nommer un élément, c'est qu'il ne devrait pas exister.
2
Tout en composantsChaque élément répété devient un composant. Bouton, carte, icône, header. Jamais de copier-coller orphelin.
3
Zéro couleur hardcodéeChaque couleur est une variable. Si vous tapez directement un hex, arrêtez-vous et créez la variable d'abord.
4
Une page Cover toujours à jourLa version, la date, votre nom. Le client doit savoir ce qu'il ouvre dès la première seconde.

Les composants : tout est atomique

J'utilise le principe du design atomique : chaque composant est construit à partir d'éléments plus petits. Un bouton est fait d'un texte, d'une icône et d'un fond. Une carte est faite de boutons, de textes et d'images. Cette approche garantit que changer la couleur primaire se répercute partout en un clic.

Règle absolue : jamais de couleur ou de taille hardcodée en dehors des variables. Si vous vous retrouvez à taper #4A5C44 directement, arrêtez-vous et créez une variable. Toujours.

Variables et modes

Depuis l'introduction des variables dans Figma, mon workflow a changé radicalement. Je crée systématiquement des modes pour chaque palette : mode clair, mode sombre, et parfois des thèmes de marque alternatifs. Cela me permet de montrer au client les deux versions sans dupliquer le moindre écran.

Pour les typographies, je crée des styles de texte pour chaque niveau de hiérarchie : H1, H2, H3, body-large, body, caption, label. Aucun texte ne devrait exister en dehors de ces styles. C'est une discipline — pas une option.

Quand je rejoins un projet en cours avec un fichier Figma existant, la première chose que je fais est un audit : combien de calques non nommés ? Combien de couleurs hardcodées ? Combien de composants dupliqués sans master ? La réponse me dit tout sur le sérieux du travail qui a précédé — et sur le temps que je vais devoir investir pour reprendre.

La documentation de livraison

Un bon fichier Figma sans documentation est un fichier à moitié livré. J'ajoute systématiquement des annotations sur les composants complexes, des notes sur les états d'interaction, et un guide de démarrage en première page pour les développeurs.

Depuis que j'ai adopté cette rigueur, le nombre de questions post-livraison a diminué de façon spectaculaire. Mes clients peuvent utiliser le fichier seuls, sans me relancer pour chaque détail. C'est ça, livrer professionnellement.

Tags
FigmaWorkflowDesign systemOutils

Continuer la lecture

Freelance
Comment rédiger un brief créatif efficace
Outils
Shopify ou Squarespace : que choisir ?
Freelance
5 erreurs quand on fixe ses tarifs