Designers, ops et équipes front-end qui exportent des PNG par lot sur un Mac distant depuis Sketch ou Figma se heurtent souvent aux mêmes écueils : dimensions en pixels incorrectes, noms de fichiers incohérents, surprises de couleur ou de résolution. Ce guide vous donne une checklist pas à pas et une liste de validation pour figer les normes de dimensions et les conventions de nommage, puis lancer les exports en toute confiance.
Dans cet article :
- Pourquoi les normes de dimensions et de nommage impactent l'efficacité de livraison
- Sketch / Figma export PNG par lot : comparaison des réglages courants
- @1x / @2x / @3x et tableau des normes de dimensions
- Normes de nommage (préfixe, suffixe, règles de découpe) et points de validation
- Étapes exécutables et workflow recommandé
- Dépannage : décalage de couleurs et problèmes de résolution à l'export
Pourquoi les normes de dimensions et de nommage impactent l'efficacité de livraison
Des exports aux dimensions et noms de fichiers incohérents imposent des retouches : le front doit redimensionner ou renommer les assets, le design doit réexporter, et la gestion de versions s'en trouve compliquée. Lorsque tout le monde applique les mêmes règles de dimensions et de nommage—surtout en exportant sur un Mac distant partagé—la livraison est plus rapide, l'automatisation (scripts, design systems) fonctionne de façon fiable, et la QA dispose d'une checklist claire. Définir en amont les échelles @1x/@2x/@3x et un seul schéma de nommage (préfixe, suffixe, règles de découpe) transforme l'export PNG par lot en processus reproductible et scalable.
Sketch / Figma : comparaison des réglages courants pour l'export PNG par lot
Les deux outils gèrent l'export PNG par lot ; les dialogues diffèrent. Alignez ces réglages pour que les sorties soient interchangeables et prévisibles.
| Réglage | Sketch | Figma |
|---|---|---|
| Format | PNG (32-bit pour la transparence) | PNG (export avec transparence) |
| Échelle | 1x, 2x, 3x dans Rendre exportable | 1x, 2x, 3x dans les paramètres d'export |
| Profil couleur | Document / sRGB ; incorporer à l'export | sRGB (incorporer à l'export) |
| Nommage | Nom du calque + suffixe (ex. @2x) | Nom du frame/calque + suffixe d'échelle |
| Par lot | Tout exporter / Exporter la sélection | Exporter la sélection ou la page entière |
Sur un Mac distant, utilisez un seul outil (ou une seule chaîne d'export) par projet pour garder des noms et des échelles cohérents. Définissez la couleur du document en sRGB et « incorporer le profil » dans les deux applications avant l'export par lot.
@1x / @2x / @3x et tableau des normes de dimensions
La toile de design est généralement en @1x (points logiques). Les échelles d'export définissent les dimensions réelles en pixels. Utilisez ce tableau comme référence de validation.
| Échelle | Cas d'usage | Taille en pixels (ex. 100×100 pt) |
|---|---|---|
| @1x | Densité standard, assets legacy | 100×100 px |
| @2x | Retina / HiDPI (défaut courant) | 200×200 px |
| @3x | Mobile haute densité, grands écrans | 300×300 px |
Checklist : (1) Convenir avec dev/produit des échelles à livrer. (2) Dans Sketch/Figma, n'activer que ces échelles dans le préréglage d'export. (3) Après export, contrôler les dimensions en pixels d'un asset (ex. Aperçu ou sips sur Mac) par rapport à ce tableau.
Normes de nommage (préfixe, suffixe, règles de découpe) et points de validation
Un nommage stable rend l'automatisation et la livraison fiables. Définissez et validez les points suivants.
- Préfixe : ex.
icon_,btn_oumodule_. Un préfixe par type d'asset pour que scripts et design systems puissent filtrer. - Suffixe : le suffixe d'échelle est standard :
@1x,@2x,@3x(ou_1x,_2x,_3xsi votre pipeline utilise des underscores). Gardez la même convention dans Sketch et Figma. - Noms des calques / découpes : nommez les planches ou calques pour que le nom de fichier exporté soit explicite (ex.
icon_home→[email protected]). Évitez espaces et caractères spéciaux ; privilégiez minuscules et tirets bas.
Validation : après l'export par lot, vérifiez : (1) tous les noms de fichiers respectent le schéma préfixe/suffixe convenu ; (2) pas de doublons de noms de base pour une même échelle ; (3) le nombre de fichiers correspond à l'attendu (ex. 3 échelles × N assets).
Étapes exécutables et workflow recommandé
Appliquez cette séquence sur votre Mac distant pour que chaque lot soit reproductible.
- Définir les normes du document : toile en points @1x ; mode couleur RGB ; profil sRGB, incorporé.
- Définir le préréglage d'export : PNG, 32-bit si transparence ; n'activer que @1x, @2x et/ou @3x selon le projet.
- Nommer calques/frames : appliquer préfixe + nom descriptif (ex.
icon_close) ; l'outil ajoutera le suffixe d'échelle. - Exporter le lot : « Tout exporter » ou « Exporter la sélection » vers un seul dossier de sortie.
- Valider : contrôler la taille en pixels et le nom d'un fichier ; puis parcourir le dossier pour le nommage et le décompte.
- Livrer : zipper ou envoyer depuis le même dossier pour que le front reçoive un jeu cohérent.
Dépannage : décalage de couleurs et problèmes de résolution à l'export
Deux problèmes fréquents après l'export PNG par lot :
- Décalage de couleurs : gamma ou profil différent entre l'app de design et le web. Correction : exporter en sRGB et incorporer le profil ; éviter « profil du document » sauf si le document est déjà sRGB. Sur un Mac distant, garder une seule chaîne couleur (macOS + même version d'app) pour tous les exports.
- Résolution incorrecte ou flou : échelle d'export réglée sur 1x alors qu'on attendait 2x, ou toile en pixels au lieu de points. Correction : toile en points @1x ; choisir 2x/3x dans la boîte d'export et vérifier les dimensions en pixels d'un fichier. Sur Mac distant, s'assurer que la résolution d'affichage ne modifie pas la taille « logique » de la toile dans l'app.
Vérification rapide : ouvrir un PNG exporté dans un navigateur ou une autre app sur un autre appareil ; si la couleur ou la netteté semble incorrecte, réexporter avec sRGB incorporé et la bonne échelle.
Résumé et suite
En 2026, une checklist dimensions + nommage pour l'export PNG par lot sur Mac distant (Sketch/Figma) réduit les retouches et sécurise la livraison. Alignez les réglages Sketch/Figma, validez @1x/@2x/@3x et le schéma de nommage (préfixe, suffixe, découpes), puis exécutez le workflow sur un Mac dédié pour des exports reproductibles. Pour aller plus loin, consultez le blog MacPng, la comparaison Figma Sketch export PNG et transparence et le guide export 4K PNG par lot sur Mac distant M4.
Utilisez un Mac distant pour des exports PNG par lot Sketch/Figma cohérents
Figez les normes de dimensions et de nommage sur un Mac distant dédié : même environnement pour toute l'équipe, pas de variation entre postes, et sortie @1x/@2x/@3x prévisible. Louez un Mac mini M4 au mois, connectez-vous en SSH ou VNC, et lancez les exports par lot sans bloquer votre poste de travail.