Le redlining (souvent traduit par « cotation » ou « annotation technique ») désigne l’ensemble des indications précises qu’un designer ajoute à une maquette pour communiquer les spécifications techniques aux développeurs :
- distances entre les éléments,
- tailles des composants,
- polices, tailles de texte et interlignages,
- couleurs (valeurs hexadécimales, tokens),
- comportements interactifs,
- règles de responsive, etc.
Dans Figma, ces informations ne sont pas dessinées manuellement (comme sur les anciens fichiers Photoshop), mais générées automatiquement via le Dev Mode et les guides intelligents.
Rôle des guides dans le redlining
Les guides (lignes bleues que l’on tire depuis les règles) permettent de mesurer précisément les espacements :
- Sélectionnez un frame (écran ou composant).
- Maintenez la touche Alt (Windows) ou Option (Mac).
- Cliquez et faites glisser une ligne de guide depuis la règle.
- En passant près d’un objet, Figma affiche automatiquement la distance en pixels entre la guide et cet objet → ce sont les cotes (redlines).
Ces mesures prévisualisent ce que le développeur verra dans le Dev Mode.
Comment le redlining fonctionne vraiment dans Figma ?
Figma a rendu le redlining dynamique et intégré :
- Pas besoin de dessiner des flèches ou des textes : tout est généré à la volée.
- Le Dev Mode (mode développeur) permet de :
- Cliquer sur n’importe quel élément,
- Voir ses dimensions, son espacement, sa couleur, sa typographie,
- Copier les valeurs CSS, iOS ou Android.
- Les noms de calques, les styles et les composants bien organisés rendent la lecture du code plus intuitive.
Bonnes pratiques pour un redlining efficace
| Action | Pourquoi |
|---|---|
Nommer clairement les calques (Bouton / Primaire, Titre H1) | Le dev comprend la sémantique sans deviner |
| Utiliser des Text Styles, Color Styles, Effect Styles | Les valeurs sont centralisées et exportables |
| Activer le Dev Mode et le tester soi-même | Vérifiez ce que voit le développeur |
| Ajouter des commentaires contextuels | Expliquez les interactions complexes (ex. : « Ce menu se ferme au clic hors zone ») |
| Structurer les frames comme des pages réelles | Évitez les maquettes désorganisées sur un canvas infini |
En résumé
Le redlining dans Figma n’est plus une étape manuelle, mais une fonctionnalité native basée sur :
- les guides + Alt/Option pour prévisualiser les mesures,
- le Dev Mode pour une inspection technique fluide,
- une bonne organisation du fichier pour une transmission claire.
C’est l’un des grands avantages de Figma : le design et le développement parlent le même langage.