Figma Auto Layout accélère la conception d’interfaces, mais les PNG livrés peuvent encore arriver avec des bords flous, des coutures demi-pixel ou des dimensions incompatibles avec votre matrice d’assets front. Ce guide est une matrice de décision 2026 pour designers et intégrateurs : quels réglages d’export figer, comment le sous-pixel devient du bruit raster, quand les règles @1x / @2x / @3x en entiers sont non négociables, et comment enchaîner une validation par lot reproductible sur un Mac mini M4 distant — pour que la QA soit scriptable, pas subjective.
Dans cet article :
Pour des patterns de remise plus larges — nommage Sketch/Figma, tables d’échelle et pièges courants — voir la checklist export PNG Sketch/Figma sur Mac distant, le workflow Affinity, Sketch & Figma : paramètres d’export par lot, et OpenClaw : nommage automatique PNG & validation batch. Le détail pipeline couleur est dans la checklist gestion couleur sRGB / Display P3 et métadonnées ICC & recompression sans perte. La page d’accueil MacPng résume l’offre ; les forfaits location / achat sont consultables sans compte.
Douleurs & scénarios
Auto Layout distribue les espacements avec des calculs fractionnaires ; le navigateur et l’outil de design n’arrondissent pas toujours pareil au moment du raster. Les échecs typiques en livraison UI :
- Icônes et traits « mous » : une icône 24×24 pt repose sur une frame 23,7 px de large à l’export 1× ; l’anticrénelage étale le tracé.
- Jointures « fil à cheveux » entre découpes : des frames exportées adjacentes diffèrent d’une fraction de pixel ; en CSS (sprites, tuiles) apparaît un flash d’un pixel.
- Dimensions @2x incohérentes : export uniquement en 1×, ou échelle personnalisée (ex. 1,5×) que le front ne mappe pas proprement à
srcset. - Dérive des couleurs : fichiers sans profil sRGB embarqué ; Safari, Chrome et l’aperçu Figma ne s’accordent pas sur les gris neutres.
Ces problèmes se multiplient en livraison par lot : une frame défectueuse casse l’automatisation (dossiers surveillés, skills OpenClaw, manifestes de checksum). Un Mac distant avec une version figée du desktop Figma et un profil d’affichage stable réduit la variance « ça marche sur mon portable » — utile avec le guide export Figma : filigrane, dossier & archive.
Tableau des paramètres d’export PNG
Utilisez le tableau ci-dessous comme référence unique pour les découpes UI. Toute dérogation (ex. visuels marketing plein écran) doit être documentée.
| Paramètre | Recommandation | Pourquoi (design / front) |
|---|---|---|
| Format d’export | PNG (transparence) | Alpha sans perte pour icônes, pastilles, overlays ; évite la frange JPEG sur l’UI. |
| Limites de frame @1× | Pixels entiers (largeur & hauteur) | Supprime la dérive de rasterisation sous-pixel ; simplifie le calcul background-size. |
| Grille d’alignement | Grille 1 px + aimantation ; rythme 8 pt | Aligne padding / marges Auto Layout sur des arêtes raster prévisibles. |
| Positions sous-pixel | À éviter ; recaler en entiers dans l’inspecteur | Les X/Y fractionnaires sur frames imbriquées s’amplifient en @2x/@3x. |
| Échelles d’export | 1×, 2×, 3× uniquement (multiplicateurs entiers) | Correspond aux suffixes @1x/@2x/@3x et aux descripteurs srcset sans arrondi ambigu. |
| Échelle % personnalisée | Désactivée sauf validation marketing | Produit des dimensions non entières ; casse les validateurs batch. |
| Périmètre de découpe | Un composant / frame par fichier | Noms stables ; diff et régression plus simples en CI. |
| Couleur | Document en sRGB ; ICC à l’ingestion si requis | Aligné sur la base web par défaut ; voir checklist sRGB ci-dessous. |
Règle courte @1x / @2x / @3x : concevoir en logique 1× (points). Les largeurs et hauteurs exportées doivent égaler arrondi(largeur_frame_pt × échelle) avec échelle ∈ {1, 2, 3}. Pour une frame 100×40 pt, les fichiers attendus font 100×40, 200×80 et 300×120 px — pas 199×79 à cause d’un layout fractionnaire masqué.
Contrôle sRGB & ICC (mini-checklist)
| Contrôle | Action | Rejet si… |
|---|---|---|
| Profil du fichier Figma | sRGB pour remise web / Android standard | Mélange non documenté avec assets Display P3 « marketing ». |
| ICC embarqué (post-export) | sips -g profile ou exiftool sur le nœud Mac |
Pipeline exige sRGB embarqué et fichier sans profil détecté. |
| Échantillonnage lot | 10–100 % des icônes selon exigence marque | Écart par rapport à la politique ICC du design system. |
Flux de validation batch (Mac M4 distant)
Enchaînez ces étapes sur un Mac mini M4 distant pour libérer les portables et partager les mêmes versions d’outils (shell, exiftool, scripts QA).
- Gel pré-export : noter build Figma desktop, versions de polices et profil d’affichage macOS ; consigner dans un README du dossier d’export.
- Garde dimensions : pour chaque échelle, vérifier
largeur_px = largeur_pt × échelle(idem hauteur). Toute valeur « bizarre » → rouvrir la frame dans Figma et corriger contraintes Auto Layout ou positions fractionnaires. - Règle bords pairs (option stricte) : pour fonds plein écran ou textures, exiger dimensions paires si votre chaîne vidéo / mipmaps l’impose.
- Échantillon coutures alpha : ouvrir ~5 % des fichiers dans Aperçu, zoom 400 % ; pas de halo semi-transparent involontaire sur aplats (souvent opacités imbriquées ou modes de fusion).
- ICC : appliquer la politique définie dans le tableau sRGB ci-dessus.
- Manifeste : produire un JSON
nom → sha256 → L×H; ne réexporter que les identifiants en échec. - Archive : tarball daté ; s’aligner sur surveillance, retry & journaux PNG si vous utilisez OpenClaw.
sips + scripts QA PNG par lot plus vite qu’un portable thermiquement bridé — et évite de bloquer la création sur des files d’export.
Cohérence entre outils (Figma, Sketch, Affinity)
Figma n’est souvent qu’une étape du pipeline. Pour rester aligné avec Sketch ou Affinity, standardisez : (1) une grille 1× en points, (2) le même jeu d’échelles par projet, (3) une convention de nommage partagée ([email protected]), (4) une politique sRGB unique. Lorsque le même PNG part vers Xcode, Android Studio et le dépôt web, dimensions entières et profils embarqués évitent les rescales silencieux. Pour la transparence entre outils, voir Figma vs Sketch : transparence à l’export.
FAQ
Pourquoi mon @2x paraît plus net dans Figma que dans le navigateur ? L’aperçu canevas Figma n’interpole pas comme Chrome. Faites confiance au fichier exporté : ouvrez-le à 100 % dans Aperçu, mesurez les pixels, puis chargez-le dans le navigateur cible avec une largeur CSS égale à la taille logique 1×.
Puis-je garder des espacements Auto Layout décimaux ? Oui pour la spec dev ; pour le raster, les limites exportées des frames doivent rester entières. Les espacements peuvent être fractionnaires tant que la boîte finale d’export tombe sur des pixels entiers.
« Outline stroke » corrige le flou ? Parfois pour des traits vectoriels purs ; peut casser si vous dépendez de l’alignement de trait dynamique. Testez une icône avant conversion en masse.
Faut-il compresser les PNG avant remise ? N’appliquez des optimiseurs sans perte (ex. oxipng) qu’après validation ; journalisez le gain d’octets. Voir ImageOptim vs CLI : compression livraison.
Déporter la QA des exports Figma sur un Mac M4 distant
Confiez les gros exports Auto Layout à un Mac mini M4 dédié : build Figma stable, scripts de validation rapides, accès SSH/VNC — et parcourez les offres location / achat ainsi que les tarifs & nœuds sans créer de compte. L’aide SSH/VNC et le blog (workflows design, OpenClaw, ICC) complètent la page d’accueil MacPng.