Figma : workflow efficace entre designer et développeur

Figma : bien plus qu'un outil de maquettes

Figma a révolutionné le design web en passant du modèle "fichier local qu'on s'envoie par email" à une plateforme de collaboration en temps réel. Mais son vrai potentiel se révèle quand designers et développeurs exploitent ensemble ses fonctionnalités avancées.

Organisation d'un fichier Figma professionnel

Structure recommandée des pages

📄 Fichier projet
├── 🔲 Cover (aperçu du projet pour les thumbnails)
├── 📐 Design System
│   ├── Couleurs & Typographie
│   ├── Icônes
│   └── Composants de base
├── 📱 Mobile
│   ├── Home
│   ├── Listing
│   └── Détail
├── 🖥️ Desktop
│   ├── Home
│   ├── Listing
│   └── Détail
└── 🗃️ Archive
    └── Explorations & essais

Nommage des couches

Un nommage cohérent est crucial pour les développeurs qui inspectent les fichiers :

✅ Bon nommage :
- "nav/logo"
- "card/article/thumbnail"
- "btn/primary/default"
- "icon/arrow-right/24px"

❌ Mauvais nommage :
- "Rectangle 47"
- "Groupe 12"
- "image copie 3"

Les composants et variants

Les composants sont la clé de la scalabilité. Créez-les une fois, instanciez-les partout.

Créer un composant bouton avec variants

Composant "Button" avec propriétés :
├── Type : Primary | Secondary | Danger | Ghost
├── Size : Small (32px) | Medium (40px) | Large (48px)
├── State : Default | Hover | Focus | Disabled | Loading
└── Icon : Left | Right | None

Bonnes pratiques des composants :

• Utilisez l'Auto Layout systématiquement pour que les composants s'adaptent au contenu
• Définissez des contraintes (left, right, top, bottom) pour le responsive
• Créez des propriétés exposées pour les textes et icônes modifiables

Variables Figma (niveaux de tokens)

Couleurs Primitives (ne pas utiliser directement) :
├── blue-50: #eff6ff
├── blue-500: #3b82f6
└── blue-900: #1e3a8a

Couleurs Sémantiques (à utiliser dans les composants) :
├── color/primary: → blue-500
├── color/primary-hover: → blue-600
├── color/background: → gray-50
└── color/text: → gray-900

Modes (light/dark) :
├── Light: color/background → gray-50
└── Dark: color/background → gray-900

Dev Mode — pour les développeurs

Le Dev Mode (Ctrl+Shift+D) transforme Figma en outil d'inspection :

Ce que les développeurs peuvent extraire

/* Figma génère directement le CSS */
.btn-primary {
  display: flex;
  padding: 12px 24px;
  gap: 8px;
  border-radius: 8px;
  background: #3b82f6;
  
  /* Typographie */
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #ffffff;
}

Export d'assets optimisé

Configurez vos exports directement dans Figma :

Pour chaque icône SVG :
- Export → SVG → Outline strokes activé
- Supprimer les métadonnées inutiles

Pour les images :
- Export → PNG @1x + @2x pour le Retina
- Ou → WebP si votre workflow le supporte

Handoff sans friction

Checklist avant livraison au développeur

• [ ] Tous les composants utilisés sont dans la bibliothèque
• [ ] Les espacements utilisent la grille de 8px
• [ ] Les couleurs font référence aux variables (pas de couleurs en dur)
• [ ] Les textes ont une règle typographique définie (pas de tailles aléatoires)
• [ ] Les états hover/focus/disabled sont maquettés
• [ ] Les états vides et d'erreur sont maquettés
• [ ] Les breakpoints mobile/tablette/desktop sont tous présents
• [ ] Les animations sont documentées (durée, easing)

Documenter les interactions

Dans Figma, pour chaque interaction :
└── Ajouter une note : 
    "Transition : slide-in depuis la droite, 300ms, ease-out"
    "On hover : fond passe en #eff6ff, transition 150ms"
    "Menu mobile : slide depuis la gauche, overlay 50% noir"

Prototypage pour les tests utilisateurs

Figma permet de créer des prototypes cliquables sans une seule ligne de code :

Connexions de prototypage utiles :
- Overlay : modales, tooltips, menus
- Scroll : pages longues, listes infinies
- After delay : animations automatiques
- Mouse enter/leave : états hover complexes

Ces prototypes peuvent être envoyés directement à des utilisateurs via le lien de partage pour des tests de usabilité à distance.