Comment tirer le meilleur du plugin Figma Codigma
Codigma aime un truc tout simple : un fichier Figma bien rangé. Quand le design est propre, l’export l’est aussi. Voici des conseils concrets (et faciles) pour avoir un résultat plus net.
1) Pour commencer : ce que “voit” Codigma
L’erreur classique, c’est de se dire : “il va deviner”. Codigma ne lit pas dans les pensées — il lit la structure de Figma. Si vos frames sont logiques et vos règles cohérentes, le résultat est généralement propre.
Si l’export part dans tous les sens, c’est presque toujours l’un de ces cas : un peu d’Auto Layout, un peu de positionnement absolu, des espacements au hasard, ou des calques pas regroupés correctement.
Petit tip
Si un autre designer ouvre votre fichier, il s’y retrouve facilement ? Si oui, vous êtes bien.
2) Auto Layout : la base pour un export propre
Auto Layout “met des règles” là où sinon on bidouille. Direction, alignement, gap, padding, tailles… tout est clair. Et quand c’est clair, le code suit.
Les réglages qui marchent (sans se compliquer)
- Mettez Auto Layout sur vos conteneurs (même s’il n’y a qu’un enfant).
- Gérez les marges avec le padding du parent (au lieu de pousser les enfants à la main).
- Gardez une grille d’espacement : 8 / 16 / 24, et c’est déjà super.
- Choisissez Fill vs Hug : ça doit s’étirer ? Fill. Ça suit le contenu ? Hug.
- Évitez de mélanger les règles dans le même bloc (moitié Auto Layout, moitié “à la main”).
Structure qui donne souvent le meilleur rendu
- Page (Fill) →
- Section (Auto Layout, padding + gap) →
- Composant (Auto Layout, règles Fill/Hug claires)
Tip
Pour du “responsive”, il faut une règle simple. Souvent : le conteneur externe en Fill, et l’intérieur en Hug / flexible.
3) Le nommage : dites adieu à “Frame 123”
Ça paraît bête, mais les noms changent tout. Après export, vous allez relire la structure : autant que ce soit clair.
À faire
- Nommez vos frames par intention : Header, PricingCard, FeatureList, Sidebar.
- Nommez vos calques par rôle : Title, Subtitle, Icon, PrimaryButton.
- Évitez “Group 9” dans ce que vous exportez.
- Réduisez les wrappers inutiles : “frame dans frame dans frame” alourdit vite.
Tip
Si vous ne pouvez pas expliquer en une phrase pourquoi un frame existe, il est souvent en trop.
4) Composants/variantes : pour aller plus vite
Sur un écran, tout peut sembler ok. Mais quand le produit grandit, ce qui compte, c’est la cohérence. Donc : commencez par les éléments répétés (boutons, cards, inputs…).
Ce qui mérite d’être un composant
- Boutons (primary/secondary/disabled)
- Inputs (default/error/disabled)
- Cards (produit, feature, témoignage)
- Navigation (tabs, item sidebar, top bar)
Où les variantes aident vraiment
Les états (hover/active/disabled) en variantes, c’est clean. Idem pour les tailles (sm/md/lg). Résultat : moins de flou côté design, et moins de surprises à l’export.
Mini design system (sans se prendre la tête)
- Quelques styles de texte (titres + body)
- Des styles de couleurs (primary/neutral/background/border)
- Une règle d’espacement (8/16/24)
- Tout ce qui se répète → composant
5) Quoi sélectionner dans Figma (et quoi éviter)
Ce que vous sélectionnez, c’est ce que vous demandez à Codigma de générer. En général, le meilleur résultat vient quand vous sélectionnez un bloc complet.
Bon choix
- Un écran complet (si la structure est propre)
- Un composant (bouton, card, modal, navbar)
- Une section (hero, pricing, features) — un bloc autonome
À éviter (souvent source de bugs)
- Des “demi-blocs” (texte sans conteneur, moitié de card…)
- Des calques qui se chevauchent (positionnement trop manuel)
- Des calques cachés dans le bloc exporté
- Du texte sans limites claires (aligné “au feeling”)
Tip
Si vous hésitez, sélectionnez le frame parent qui représente le bloc, pas des calques isolés.
6) Un workflow simple : 6 étapes
La méthode la plus efficace : exporter, regarder, corriger, ré-exporter. C’est tout.
- Sélectionnez un seul bloc (composant/section/écran) et nettoyez celui-là d’abord.
- Vérifiez Auto Layout + padding + gap.
- Renommez les éléments importants (Header au lieu de Frame 123).
- Exportez et notez ce qui “cloche”.
- Corrigez plutôt dans Figma que de patcher le code dès le départ.
- Scalez : composant → section → pages.
Tip
Ne passez pas des heures à “polir” Figma. Un nettoyage, un export, puis vous améliorez seulement ce qui compte vraiment.
7) Problèmes fréquents + solutions rapides
“Les espacements ne sont pas bons”
- Les marges viennent bien du padding du parent ? (commencez par là)
- Les gaps sont cohérents ? (8/16/24)
“Certains éléments ne s’étirent pas”
- Le bon calque est en Fill ou il est resté en Hug ?
- La règle de largeur du parent est claire ? (fixed/fill/constraints)
“Trop de niveaux / trop d’imbrication”
- Supprimez les wrappers qui n’apportent rien au layout.
- Préférez des frames avec Auto Layout plutôt que des Groups.
“Le code est dur à lire”
- Renommez (Header/Card/Title/Button).
- Passez les blocs répétés en composants/variantes puis ré-exportez.
FAQ
Je dois exporter tout l’écran ou plutôt par morceaux ?
Les deux marchent. Si l’écran est déjà bien calé, exportez-le en entier. Si vous voulez aller plus vite et réutiliser des blocs, c’est souvent plus simple d’exporter par sections : header, carte, modal, etc.
On peut avoir un bon résultat sans Auto Layout ?
Oui, mais Auto Layout aide énormément. Les espacements et le comportement responsive sont plus stables. Avec des réglages Fill/Hug bien faits, le rendu est généralement plus propre.
Pour les icônes et images, je fais quoi ?
Gardez les icônes en vectoriel si possible. Mettez les images dans des frames claires. Évitez les calques qui se chevauchent : quand tout est aligné et propre, l’export se passe mieux.
Pourquoi après export ce n’est pas exactement comme dans Figma ?
Souvent, c’est un mélange de règles (un peu Auto Layout, un peu positionnement absolu), des padding/spacing incohérents, ou du texte sans limites claires. Nettoyez la structure et vérifiez Fill/Hug : ça règle la majorité des cas.
Comment garder un export cohérent sur tout le produit ?
Faites une mini design system : styles de texte, couleurs, règle d’espacement (8/16/24), et mettez les éléments répétés en composants. L’ordre dans Figma se retrouve presque toujours dans le code.
On teste ?
Commencez par un élément qui revient partout (un bouton ou une card). Vous le nettoyez une fois, vous exportez, et vous verrez la différence. Ensuite, le reste devient beaucoup plus simple.
Plus d’articles : voir le blog.