Les designers et les responsables d’assets front utilisent le mode Développement Figma pour cadrer l’intention, mais le PNG de slice annoté livré doit respecter des règles raster : cadres alignés sur pixel entier, échelles @1x, @2x et @3x entières, une politique sRGB unique et des noms de fichiers prévisibles. Ce guide 2026 est une matrice de livraison : où Dev Mode aide, où il trompe, et comment rejouer la même acceptation par lot sur un Mac mini M4 distant pour une QA rejouable.
Fractions Auto Layout, prévisu Retina et README ICC flou relancent les tickets de handoff après chaque sprint. Croisez la comparative Figma / Sketch (transparence PNG), la checklist sRGB / Display P3 et la matrice WebP → PNG lorsque l’ingénierie impose un transcodage obligatoire après livraison.
Sommaire
Frictions Dev Mode : ce que l’inspecteur ne garantit pas
- Mesures ≠ fichier : panneaux = logique Figma ; sans cadre entier au 1×, le 2×/3× amplifie les demi-pixels.
- Opacités imbriquées : halos sur fond sombre si l’alpha est mal lu par les scripts.
- Greffons : chaque plugin peut réécrire l’ICC ; sans phrase README, deux outils s’annulent entre Windows et Mac.
Le tableau suivant fige ces risques en paramètres copiables dans le ZIP de handoff et partageables avec les prestataires externes sur plusieurs fuseaux horaires sans ambiguïté.
Tableau des paramètres d’export
Le préréglage d’export est le contrat design ↔ intégration : copiez le tableau dans le README. Tant que X, Y, largeur et hauteur ne sont pas entiers au 1×, les panneaux ne garantissent pas les pixels disque.
| Paramètre | Recommandation (web / UI applicative) | Notes opérationnelles |
|---|---|---|
| Format | PNG 8 bits RGBA | JPEG inadapté aux bords d’interface nets et à la transparence contractuelle. |
| Échelles | 1×, 2× et 3× uniquement | Les pourcentages exotiques brisent srcset et les validateurs d’intégration continue. |
| Bornes du cadre | X, Y, largeur et hauteur entiers au repère 1× | Les origines fractionnaires se composent au 2× et au 3× et adoucissent les traits vectoriels rasterisés. |
| Couleur | Une politique sRGB (ICC embarquée ou absence de profil avec règle écrite) | Rejeter la double conversion issue de greffons ou de scripts post-export non versionnés. |
| Fond | Transparent ou aplati selon cahier des charges | L’option « inclure le fond » activée par inadvertance casse la QA sur le canal alpha. |
| Nommage des slices | Composant_etat@2x.png aligné sur les jetons de design |
Nom de calque aligné sur nom de fichier ; bannir les espaces si le bundler front est strict. |
README : largeur logique 1× = pixels export 1× ; à s ∈ {1,2,3}, WxH = entier strict (pixels logiques × s) ; slice transparente ⇒ alpha (opaque plat = échec).
Checklist d’acceptation par lot
Même runbook sur Mac mini M4 distant : Figma léger en local, CI = QA. sips, identify, scripts Python restent peu coûteux sur des centaines de PNG.
- Parité manifeste : le nombre de fichiers exportés correspond à la liste des slices ; aucun doublon ni échelle manquante.
- Portillon géométrique : chaque largeur et hauteur PNG égale le produit des pixels logiques du cadre par le facteur d’échelle, sans tolérance.
- Sonde alpha : histogramme alpha ou Aperçu 400 % pour halos d’opacités imbriquées.
- Portillon sRGB : ICC ou espace (ImageMagick, exiftool) vs README ; échec si dérive hors dossier d’exception nommé.
- Lint de nommage : imposez préfixe, suffixe d’état, jeton
@2xet caractères interdits via un petit script shell partagé dans le dépôt. - Plafond octets : optionnel par SKU avec
max_bytes; si recompression autorisée, documentez la version de pngquant ou d’oxipng à côté du manifeste. - Journal : sha256, versions, pass/fail en JSONL ; promotion vers
out/si vert seulement.
Script vert ⇒ contrat raster accepté — fini l’arbitrage par capture d’écran ; gardez un champ JSONL homogène aux autres guides MacPng.
FAQ
Le mode Développement affiche-t-il exactement les mêmes pixels que la production ?
Approximation seulement : PNG à 100 % dans un visionneur neutre, puis navigateur avec tailles logiques CSS.
Faut-il recopier les valeurs CSS depuis Dev Mode sans filtre ?
Indice seulement : arrondir à la grille ; les fractions recréent l’écart d’un pixel entre plateformes.
Comment les vigies automatisées traitent-elles les calques d’annotation ?
Souvent hors du slice ; un ZIP plein cadre peut inclure du markup — vigie sur le dossier slices, pas les captures écran.
Blog, accueil, tarifs, aide SSH/VNC : lecture sans compte pour aligner DA et ingénierie.
Verrouiller export et QA sur un nœud Apple Silicon
Figez les préréglages Dev Mode, exécutez les portillons batch sur un mini M4 et livrez des slices PNG acceptées du premier coup par l’ingénierie.