Exporter, ranger, livrer
Beaucoup de travaux propres se gâchent à la dernière étape : mauvais format, poids excessif, fichiers mal nommés, lien inaccessible. Cette demi-journée porte sur ce qui se passe après le design — et c’est elle qui fait la différence entre un étudiant et un prestataire.
Choisir le bon format d’export
PNG, JPG, SVG, PDF : savoir lequel, et pourquoi
| Format | Ce qu'il fait | Quand le choisir |
|---|---|---|
| PNG | Sans perte. Garde les aplats nets et la transparence. | Le choix par défaut pour les réseaux sociaux. Texte net, couleurs exactes. |
| JPG | Compressé, avec pertes. Pas de transparence. | Quand le visuel est essentiellement une photo et que le poids compte. Jamais pour un visuel à gros aplats. |
| SVG | Vectoriel. Se redimensionne sans jamais pixeliser. | Logos et icônes, pour le web. Inutilisable sur les réseaux sociaux — ils ne l'acceptent pas. |
| Multi-pages, vectoriel, imprimable. | La planche de validation client, et tout ce qui part chez un imprimeur. |
Le piège du JPG sur un aplat. La compression JPG crée des petits artefacts autour des zones à fort contraste — typiquement du texte blanc sur fond sombre. Sur un post Datashop, c'est immédiatement visible. Sur une photo de paysage, c'est invisible. D'où la règle : aplats et texte → PNG ; photo → JPG.
1× ou 2× : la question qui piège tout le monde
Comprendre le multiplicateur, et ne pas exporter du videLe champ 1×, 2×, 3× multiplie les dimensions à l'export. Une frame de 1080 × 1080 exportée en 2× donne un fichier de 2160 × 2160.
Ici, la réponse est 1×. Et c'est contre-intuitif, parce que sur le web on exporte presque toujours en 2×. La différence tient à une chose : tu as conçu tes frames à la taille finale. Le 1080 × 1080 est la taille demandée par Instagram. Exporter en 2× produit un fichier quatre fois plus lourd que le réseau va simplement réduire — et recompresser une fois de plus.
| Situation | Multiplicateur | Raison |
|---|---|---|
| Frame conçue à la taille finale (notre cas) | 1× | La taille est déjà la bonne |
| Maquette de site conçue en 1× pour écran | 2× | Les écrans haute densité affichent 2 pixels physiques par pixel logique |
| Visuel destiné à l'impression | Passer par un PDF | Le multiplicateur ne remplace pas une vraie préparation d'impression |
| Le client demande « la version haute définition » | 2×, en plus du 1× | Il pense souvent « pour l'imprimer ». Fournis les deux et explique. |
Le suffixe
Quand on exporte plusieurs tailles, Figma ajoute un suffixe au nom du fichier. Le
champ Suffixe permet de le choisir :
-@2x est la convention. Sans suffixe, les deux fichiers portent le même nom
et le second écrase le premier.
Le poids : les limites réelles
| Support | Limite | Poids visé |
|---|---|---|
| Instagram / Facebook | 30 Mo | Moins de 1 Mo |
| 5 Mo | Moins de 1 Mo | |
| Miniature YouTube | 2 Mo — bloquant | Moins de 500 Ko |
| X | 5 Mo | Moins de 1 Mo |
Un PNG trop lourd ? C'est presque toujours une photo à l'intérieur. Exporte ce visuel-là en JPG, ou passe le PNG dans TinyPNG (gratuit, en ligne) : on gagne couramment 60 % du poids sans différence visible.
Nommer et ranger la livraison
Un dossier qu’un client comprend sans poser de questionLe nom des frames devient le nom des fichiers. Si tu as suivi la convention du cours 1, tu n'as plus rien à faire. Sinon, c'est maintenant ou jamais.
datashop-jours-data-2026-09/
├── 01-datashop-jours-data-post-carre-1080x1080.png
├── 02-datashop-jours-data-story-1080x1920.png
├── 03-datashop-lyon-banniere-1200x628.png
├── 04-datashop-guide-ecran-miniature-1280x720.jpg
├── planche-de-validation.pdf
└── LISEZ-MOI.txt| Pièce | À quoi elle sert |
|---|---|
| Les 4 fichiers | Le livrable. Numérotés, nommés, dimensionnés dans le nom. |
planche-de-validation.pdf |
Les 4 visuels sur une page, pour valider d'un coup d'œil et annoter. |
LISEZ-MOI.txt |
Trois lignes : quel fichier pour quel réseau, les polices utilisées, et où trouver le fichier source. |
Monter la planche de validation
- Crée une nouvelle frame de 1920 × 1080 sur une page à part.
- Copie tes quatre visuels dedans, réduits, avec sous chacun : son numéro, son usage et ses dimensions.
- Ajoute en bas un rappel de la charte : les couleurs et les deux polices.
- Sélectionne la frame et exporte-la en PDF.
Pourquoi cette planche change tout. Un client qui reçoit quatre PNG les ouvre un par un et commente au fil de l'eau. Un client qui reçoit une planche voit la campagne d'un coup, et commente la campagne. Tu gagnes un aller-retour entier — c'est le geste le plus rentable de la semaine.
Partager le fichier au client
Donner le bon accès, et rien de plus
| Droit | Ce que la personne peut faire | À qui |
|---|---|---|
| Peut consulter | Regarder, commenter, exporter les visuels | Le client. C'est le bon réglage. |
| Peut modifier | Tout changer, y compris casser | Un collègue qui travaille avec toi. Jamais le client. |
Sur l’offre gratuite, la fenêtre montre déjà « peut modifier » pour l’équipe et « peut accéder » pour les utilisateurs du projet. Le droit de lecture seule, « peut consulter », est à confirmer sur ton écran avant de l’annoncer à un client.
Un lien copié peut circuler. Qui peut l’ouvrir dépend des droits réglés dans « Qui y a accès ? ». Pour un visuel commercial c'est généralement sans conséquence ; pour un produit non annoncé, une campagne sous embargo ou des données clients, c'est une fuite. Invite par adresse e-mail dès que le contenu est sensible.
Les commentaires
Le client clique sur C, puis sur le point du visuel qui le gêne, et écrit. Tu reçois une notification, tu réponds dans le fil, et tu le marques comme résolu quand c'est corrigé. Tout l'aller-retour reste dans le fichier, daté : en cas de désaccord sur « ce qui avait été demandé », c'est écrit.
L’historique des versions
Fichier › Historique des
versions. Figma enregistre tout seul. Avant une grosse modification, crée
un point nommé : V1 — envoyée au client le 12/09. Tu pourras toujours y
revenir.
- Clique sur Partager, le bouton bleu en haut à droite de la fenêtre Figma.
- Regarde d’abord Qui y a accès ? : sur l’offre gratuite, toute l’équipe peut modifier le fichier. Un client ne doit jamais avoir ce droit.
- Soit tu tapes son adresse e-mail dans le champ du haut et tu cliques sur Inviter des collaborateurs (le bouton ne s’active qu’une fois l’adresse saisie) ;
- soit tu cliques sur Copier le lien et tu le colles dans ton e-mail.
- Vérifie toujours : colle le lien dans une fenêtre de navigation privée. Si Figma te demande de te connecter, ton client verra exactement la même chose.
Droits d’usage : polices, images, logos
Ne pas livrer un visuel qui expose le clientC'est la partie que personne n'enseigne, et celle qui coûte le plus cher quand elle est ignorée. Livrer un visuel, c'est engager le client.
| Élément | Ce qu'il faut vérifier | Où trouver du libre |
|---|---|---|
| Polices | Le droit d'usage commercial. Une police téléchargée « gratuitement » est souvent gratuite pour un usage personnel seulement. | Google Fonts — toutes libres, y compris commercialement |
| Photos | La licence, et la présence de personnes identifiables (droit à l'image) | Unsplash, Pexels — licence large, attribution non obligatoire mais appréciée |
| Icônes | Souvent une attribution obligatoire, en petits caractères | Feather, Lucide, Material Symbols |
| Logo du client | Sa charte : couleurs, zone de protection, versions autorisées | Le client lui-même — demande-lui son kit de marque |
| Musique, vidéo | Hors sujet ici, mais les règles sont encore plus strictes | — |
Les images générées par IA. Leur statut juridique n'est pas stabilisé, et certains clients l'interdisent par contrat. Si tu en utilises : dis-le, et note-le dans le LISEZ-MOI. Ne jamais le dissimuler.
Note tes sources au fur et à mesure. Une simple page « Sources » dans ton fichier Figma, avec le lien de chaque photo et le nom de chaque police. Six mois plus tard, quand le client voudra réutiliser le visuel sur une affiche, tu sauras si tu en as le droit.
La check-list avant d’envoyer
Les douze points qui évitent de renvoyer le dossierÀ passer systématiquement, dans l'ordre, avant chaque livraison. Elle est aussi dans le kit : checklist-livraison.txt.
| # | Point de contrôle |
|---|---|
| 1 | Les 4 fichiers sont aux dimensions exactes demandées |
| 2 | Aucun texte ne dépasse dans une zone de sécurité |
| 3 | Le contraste texte / fond est d'au moins 4,5:1 |
| 4 | La miniature YouTube pèse moins de 2 Mo |
| 5 | Aucun nom de fichier n'a d'accent, d'espace ou de majuscule |
| 6 | Les mentions obligatoires du brief sont présentes sur les 4 |
| 7 | L'orthographe est vérifiée — relire à voix haute |
| 8 | Les prix, dates et horaires sont conformes au brief, chiffre par chiffre |
| 9 | La grille de mise en page n'apparaît pas dans l'export |
| 10 | La planche PDF est à jour — pas une version antérieure |
| 11 | Le lien de partage est en « Peut consulter », et il s'ouvre en navigation privée |
| 12 | Le LISEZ-MOI accompagne le dossier |
Le point 8 n'est pas une formalité. Un visuel qui annonce « −20 % » alors que le brief dit « −25 % » part en ligne, est vu par des milliers de personnes, et engage juridiquement le vendeur sur le prix affiché. C'est la seule erreur de cette liste qui ne se rattrape pas.
Le point 11, en pratique. Ouvre ton lien de partage dans une fenêtre de navigation privée. Si Figma te demande de te connecter, le client verra la même chose — et t'écrira pour te le dire. Trente secondes de vérification contre un aller-retour.
Fin du séminaire. Tu as produit quatre visuels professionnels à partir d'un brief, tu les as déclinés sur quatre formats, exportés aux bonnes dimensions, rangés, documentés et livrés. Garde le lien de ton fichier : c'est la première ligne concrète de ton portfolio.