Choisir le bon format, et poser les quatre plans de travail
Avant de dessiner quoi que ce soit, il faut savoir en quoi on mesure et quelle taille demander. C’est la partie la moins spectaculaire du métier, et c’est celle qui sépare un visuel utilisable d’un visuel à refaire.
Pourquoi on parle en pixels
Comprendre la différence écran / impression, et ne plus jamais chercher des cmPremier réflexe de débutant : ouvrir un logiciel et chercher « A4 » ou « 10 cm ». Sur un écran, ces unités ne veulent rien dire.
| Pour l'écran | Pour l'impression | |
|---|---|---|
| Unité | Le pixel (px) | Le millimètre |
| Résolution | Sans objet — on donne la taille en pixels, point | 300 ppp (points par pouce) |
| Couleur | RVB (rouge, vert, bleu — de la lumière) | CMJN (de l'encre) |
| Fond perdu | Aucun | 3 mm débordants |
| Format de sortie | PNG, JPG |
Un pixel est un carré de couleur. Une image de 1080 × 1080 px, c'est une grille de 1080 carrés de côté, soit 1 166 400 pixels. C'est tout. Il n'y a pas de « taille réelle » : la même image fait 3 cm sur un téléphone et 30 cm sur un écran de télévision.
D'où vient la règle ? Chaque réseau social redimensionne et recompresse ce que tu envoies. Si tu fournis une image plus petite que le format attendu, il l'agrandit — et elle devient floue. Si tu la fournis beaucoup plus grande, il la réduit et la recompresse une seconde fois — le texte fin bave. Fournir la taille exacte, c'est éviter les deux.
✗ Ce qu'il ne faut pas faire
« Je fais un A4 et je verrai bien. » Résultat : 2480 × 3508 px, un ratio 1:1,41 qui n'existe sur aucun réseau, et un recadrage automatique qui coupe le texte.✓ Ce qu'il faut faire
« La commande dit Instagram + LinkedIn. Donc 1080 × 1080 px. » On part du réseau, jamais du logiciel.Les formats, réseau par réseau
Savoir retrouver le bon format sans l’apprendre par cœurLe tableau ci-dessous couvre tout ce que l'on te demandera en pratique. Il est aussi dans le kit, en fichier texte, à garder sous la main : fiche-formats-reseaux.txt.
| Réseau | Support | Dimensions | Ratio |
|---|---|---|---|
| Publication carrée | 1080 × 1080 | 1:1 | |
| Publication portrait (la plus visible dans le fil) | 1080 × 1350 | 4:5 | |
| Story / Reel | 1080 × 1920 | 9:16 | |
| Publication carrée | 1200 × 1200 | 1:1 | |
| Aperçu de lien partagé | 1200 × 627 | 1.91:1 | |
| Bannière de profil | 1584 × 396 | 4:1 | |
| Bannière de page entreprise | 1128 × 191 | 5.9:1 | |
| Publication / aperçu de lien | 1200 × 630 | 1.91:1 | |
| Couverture de page | 1640 × 856 | 1.91:1 | |
| X | Image dans un post | 1600 × 900 | 16:9 |
| Bannière de profil | 1500 × 500 | 3:1 | |
| TikTok | Vidéo / visuel plein écran | 1080 × 1920 | 9:16 |
| YouTube | Miniature | 1280 × 720 | 16:9 |
| Bannière de chaîne (zone sûre 1546 × 423) | 2560 × 1440 | 16:9 | |
| Épingle | 1000 × 1500 | 2:3 |
Ces chiffres bougent. Les plateformes changent leurs spécifications tous les ans ou deux. Ce qui ne bouge pas, ce sont les ratios : 1:1, 4:5, 9:16, 16:9, 1.91:1. Retiens les ratios, et vérifie les pixels sur la page « spécifications publicitaires » du réseau le jour où tu produis.
Et dans Figma ? La liste des formats prédéfinis de l’outil Frame n’a pas de « publication carrée » ni de « partage de lien ». Dans la catégorie Réseaux sociaux, tu trouves Publication Instagram (1080 × 1350), Story Instagram (1080 × 1920), Publication Facebook (1200 × 630) et Couverture LinkedIn (1584 × 396). Pour un autre format, on part du plus proche et on tape la hauteur (H) : la méthode est au module 5.
Atelier — l'explorateur de formats
Choisis un format, regarde ce qu'il devient
L'aperçu prend les vraies proportions, à l'échelle. en direct—
Le raccourci du métier. Quatre formats couvrent 90 % des commandes : 1080 × 1080 (carré), 1080 × 1920 (vertical), 1200 × 628 (partage de lien) et 1280 × 720 (16:9). Ce sont les quatre de ce cours.
Les zones de sécurité
Placer le texte là où il ne sera jamais recouvertUne story fait 1080 × 1920. Mais le réseau pose son interface par-dessus : ton nom en haut, le champ « Envoyer un message » en bas, les boutons sur le côté. Si ton texte est là, il est illisible — et le client te le renverra.
| Format | Marge haute | Marge basse | Marge latérale |
|---|---|---|---|
| Story / Reel / TikTok (1080 × 1920) | 250 px | 340 px | 60 px |
| Publication carrée (1080 × 1080) | 80 px tout autour — pas d'interface, mais une marge de respiration | ||
| Miniature YouTube (1280 × 720) | Coin bas-droit occupé par la durée de la vidéo : ne rien y mettre | ||
| Bannière LinkedIn (1584 × 396) | La photo de profil masque le coin gauche sur mobile | ||
La règle, en une phrase. Le fond peut aller jusqu'au bord. Le texte, jamais.
Deuxième piège, moins connu : le recadrage automatique. Si tu publies une image 9:16 sur un fil qui n'accepte que le 4:5, le réseau coupe le haut et le bas tout seul. C'est pourquoi on ne publie pas le même fichier partout — et c'est pourquoi cette campagne compte quatre visuels, pas un.
Créer son compte et son premier fichier
Être opérationnel en cinq minutes, sans rien installer- Va sur figma.com et crée ton compte. La page d’inscription propose Continuer avec Google ou un champ Adresse e-mail, puis le bouton Continuer par e-mail. Un compte gratuit suffit pour tout ce cours.
- Inscris-toi avec ton adresse e-mail (ou ton compte Google). Utilise une adresse que tu garderas : ton fichier est ton portfolio.
- Figma demande à quoi tu vas l'utiliser. Réponds ce que tu veux, cela ne change que les modèles proposés.
- Sur la page d’accueil (Récents), clique sur le bouton Design, en haut à droite : un fichier de design vide s'ouvre. Pas sur Créer un fichier, dans le bandeau violet : celui-là lance la création par IA et ne donne pas un fichier vide.
- Renomme le fichier tout de suite : double-clic sur son nom, en haut à gauche,
et tape
Datashop — Réseaux sociaux. Un fichier sans nom est un fichier perdu.
Le forfait gratuit. Il autorise 3 fichiers de design et un nombre illimité de pages dans chacun. Donc : un seul fichier pour toute la campagne, et des pages à l'intérieur. Ne crée pas un fichier par visuel, tu serais bloqué au quatrième.
Langue de l'interface. Figma existe en français, et les libellés de ce cours sont ceux de l’interface française, relevés à l’écran. Toute la documentation et tous les tutoriels sont en anglais : si tu cherches une astuce en ligne, cherche aussi le nom anglais de l’outil. Figma garde d’ailleurs des noms anglais à certains endroits, même en français : les graisses des polices (Regular, SemiBold, Bold) et les frames créées depuis un format prédéfini (« Instagram post - 1 »).
Le tour de l’interface
Savoir où regarder quand on cherche quelque choseSept repères, et tout le reste en découle. Prends le temps de les repérer maintenant : c'est trois heures gagnées sur la semaine.
- La barre du haut. Le menu principal (le logo, en haut à gauche), le nom du fichier, et à droite les avatars des personnes connectées.
- Le panneau des calques. Tout ce que contient ta page, du dessus vers le dessous. C'est ici qu'on sélectionne quand on n'arrive plus à cliquer sur le canevas.
- Le plan de travail (canevas). Infini. Tes frames y flottent côte à côte. Espace + glisser pour se déplacer, Ctrl/⌘ + molette pour zoomer.
- Le panneau Design. Toutes les propriétés de ce qui est sélectionné : position, taille, remplissage, contour, effets. Il change selon la sélection — c'est normal.
- La section Exporter. Tout en bas du panneau Design. On y revient au cours 5.
- La barre d'outils flottante. En bas au centre. Sept outils, détaillés juste après.
- Le bouton Partager. Le bouton bleu, en haut à droite : c'est par là que le client reçoit ton travail.
L'interface de Figma évolue. Les panneaux peuvent être placés un peu différemment selon la version. Les noms des outils et des propriétés, eux, ne changent pas — c'est ce qu'il faut retenir, pas la position des boutons.
La barre d’outils, outil par outil
Le seul vrai réflexe à prendre. Échap désélectionne, V revient à l'outil Déplacer. Quand tu es perdu, fais les deux. Neuf fois sur dix, c'était ça.
- Ouvre ton fichier et repère les sept éléments numérotés de la capture ci-dessus, un par un, sans te presser.
- Espace maintenu + glisser à la souris : tu déplaces le plan de travail.
- Ctrl/⌘ + molette : tu zoomes. Sans Ctrl, tu fais défiler.
- Maj+1 pour tout voir d’un coup, Maj+2 pour zoomer sur ce qui est sélectionné.
- Un panneau a disparu ? Dans la barre verticale tout à gauche, clique sur Fichier : les Pages et les Calques s’y trouvent. Le bouton Minimiser l'UI, en haut, cache puis réaffiche tous les panneaux.
- Échap désélectionne, V revient à l’outil Déplacer. Fais-le dix fois : c’est ton réflexe de secours.
Créer les 4 frames aux bons formats
Poser le squelette du fichier — le livrable de la première demi-journéeUne frame (plan de travail) est un cadre qui délimite un visuel. C'est l'unité de base de Figma : une frame = un fichier exporté. On ne dessine jamais « à côté » d'une frame, toujours dedans.
- Appuie sur F (outil Frame).
- Dans le panneau de droite, déplie la catégorie Réseaux sociaux et clique sur le format voulu : Story Instagram (1080 × 1920) donne la story tout de suite. La frame apparaît au centre de l'écran, à la dimension exacte.
- La liste n'a pas de format carré. Pour le 1080 × 1080, prends Publication Instagram (1080 × 1350), puis tape 1080 dans le champ H (Hauteur) de la section Mise en page du panneau Design. Pour la bannière 1200 × 628, prends Publication Facebook (1200 × 630) et tape 628 dans H. Pour la miniature 1280 × 720, trace une frame à la main, puis tape 1280 dans W (Largeur) et 720 dans H.
- Renomme-la immédiatement : double-clic sur son nom, au-dessus du cadre ou dans le panneau des calques (Figma l'a nommée en anglais).
- Répète pour les quatre formats. Dispose-les côte à côte, avec de l'espace entre elles — tu vas y revenir toute la semaine.
La convention de nommage — à adopter dès maintenant
Le nom de la frame deviendra le nom du fichier exporté. Le choisir correctement maintenant, c'est ne plus jamais renommer 4 fichiers à la main vendredi soir.
01-datashop-jours-data-post-carre-1080x1080
02-datashop-jours-data-story-1080x1920
03-datashop-lyon-banniere-1200x628
04-datashop-guide-ecran-miniature-1280x720| Morceau | Rôle |
|---|---|
01 | L'ordre de lecture. Les fichiers se rangent tout seuls. |
datashop | Le client. Indispensable dès qu'on en a deux. |
jours-data | La campagne. |
post-carre | L'usage, en clair. |
1080x1080 | La dimension. Le client la vérifie sans ouvrir le fichier. |
Trois interdits dans un nom de fichier :
les accents, les espaces et les majuscules. Visuel Été FINAL.png devient
Visuel%20%C3%89t%C3%A9%20FINAL.png dans une URL, et casse la moitié
des outils de publication. Des minuscules et des tirets, toujours.
Fin de la demi-journée 1. Ton fichier contient quatre frames vides, aux bonnes dimensions, correctement nommées. C'est peu à regarder, et c'est pourtant la moitié des erreurs du métier déjà évitées.