Structurer, et décliner sans tout refaire
C’est la demi-journée qui sépare quatre images d’une campagne. Grilles, alignement, Auto Layout, composants : quatre outils qui servent tous la même chose — la cohérence.
Marges et grille
Donner au visuel une structure invisible mais ressentieCe qui distingue un visuel professionnel d'un visuel bricolé n'est presque jamais la couleur ou la photo. C'est que tout est posé sur une structure, et que rien n'est là par hasard.
La marge de sécurité
| Format | Marge | Pourquoi cette valeur |
|---|---|---|
| 1080 × 1080 | 80 px | ≈ 7,5 % de la largeur — la proportion qui « respire » sans gâcher la surface |
| 1080 × 1920 | 60 px latéral | Plus les zones de sécurité haute et basse (cours 1) |
| 1200 × 628 | 64 px | Format court en hauteur : on ne peut pas se permettre plus |
| 1280 × 720 | 72 px | Sauf le coin bas-droit, occupé par la durée de la vidéo |
Poser la marge concrètement. Sélectionne la frame, section Guide de mise en page › +, puis passe la grille en 4 colonnes étirées, marge 80, gouttière 32 (le pas-à-pas est juste en dessous). Une grille rouge translucide apparaît : elle ne s'exporte pas, elle sert juste de repère. Ctrl/⌘+Maj+4 l'affiche et la masque.
L’espacement : une seule échelle
Deuxième règle invisible : les espaces entre les éléments ne sont pas quelconques. On choisit une unité de base et on n'utilise que ses multiples.
8 16 24 32 48 64 80 120Un écart de 37 px n'existe pas. Un écart de 32 ou de 48, oui. Cette contrainte paraît arbitraire ; elle produit une régularité que l'œil perçoit immédiatement.
- Sélectionne la frame en cliquant sur son nom, au-dessus du cadre.
- Panneau Design, section Guide de mise en page : clique sur le +.
- Une grille de carrés apparaît. Clique sur l’icône de réglages, à gauche de la ligne.
- Change le type de Grille à Colonnes.
- Règle : Type = Étirer · Nombre = 4 · Marge = 80 · Gouttière = 32.
- Ctrl/⌘+Maj+4 l’affiche et la masque. Elle ne s’exporte jamais : c’est un repère, pas un élément du visuel.
Aligner, répartir, et l’Auto Layout
Arrêter de positionner à la souris
Aligner et répartir
- Sélectionne plusieurs objets (clic + Maj).
- La rangée Alignement, au début du panneau Design (section Position), compte six boutons : Aligner à gauche, Aligner centre horizontal, Aligner à droite, Aligner en haut, Aligner centre vertical, Aligner en bas. Quand plusieurs objets sont sélectionnés, un septième bouton répartit les écarts également et un champ Espacement apparaît dans la section Mise en page.
- Pour aligner un objet dans sa frame, sélectionne-le seul : l'alignement se fait alors par rapport au cadre.
« Aligner le texte » ne veut pas dire la même chose que « aligner l'objet ». Le premier règle le texte dans sa boîte (section Typographie), le second déplace la boîte dans la frame (barre d'alignement). Les deux doivent être cohérents : un texte aligné à gauche dans une boîte centrée donne un résultat bancal.
L’Auto Layout — Maj+A
L'Auto Layout transforme une frame en bloc qui se réorganise tout seul. Ses enfants s'empilent (verticalement ou horizontalement), avec un espacement constant, et la frame s'ajuste à leur contenu.
| Réglage | Ce qu'il fait |
|---|---|
| Direction | Empiler vers le bas, vers la droite, ou en grille |
| Espacement (gap) | L'écart entre les enfants — une seule valeur, garantie partout |
| Marge intérieure (padding) | L'espace entre le bord du bloc et son contenu |
| Ajustement | Hug : le bloc se serre au contenu. Fill : il occupe la place disponible. Fixed : taille imposée. |
Le cas d'usage évident : le bouton. Une frame en Auto Layout, marges 24 × 32, contenant un texte. Le texte passe de « J'en profite » à « Je découvre toute la sélection » ? Le bouton s'allonge, et les marges restent exactement identiques. Sans Auto Layout, il faut tout redessiner.
Composants et instances
Modifier une fois, corriger partoutUn composant est un élément de référence. Ses copies, les instances, le suivent : modifier le composant modifie toutes les instances d'un coup.
- Sélectionne l'élément à réutiliser (le bouton, le logo, la pastille promo).
- Ctrl/⌘+Alt+K, ou le bouton Créer un composant dans la barre d'outils. Il devient violet dans le panneau des calques.
- Copie-le dans les autres frames : chaque copie est une instance.
- Modifie le composant principal : couleur, arrondi, texte. Les instances suivent instantanément.
Ce qui ne se propage pas. Si tu modifies directement une instance (son texte, sa couleur), cette propriété devient détachée et ne suivra plus le composant. C'est voulu — mais ça surprend. Clic droit › Réinitialiser pour revenir au modèle.
Ce qu'il faut transformer en composant, ici : le logo Datashop, le bouton d'action, la pastille « −20 % », et le bloc de mentions légales. Quatre composants — c'est le bon ordre de grandeur pour une campagne de quatre visuels.
Décliner un visuel sur quatre ratios
Le vrai travail du métier — et ce qu’on ne doit surtout pas faireCe qu'il ne faut jamais faire. Copier la frame carrée, la redimensionner en 1080 × 1920, et laisser Figma étirer le contenu. Le résultat est immédiatement reconnaissable : textes déformés, marges incohérentes, photo écrasée. C'est la faute la plus fréquente, et la plus facile à repérer par un recruteur.
Une déclinaison n'est pas un redimensionnement. C'est une recomposition à partir des mêmes ingrédients.
| Ce qui reste identique | Ce qui doit être recomposé |
|---|---|
| Les couleurs (styles) | La taille des textes — adaptée à la surface |
| Les polices et les graisses | La disposition : empilée en vertical, côte à côte en horizontal |
| Le logo et le bouton (composants) | Le cadrage de la photo |
| Le message et le ton | La quantité de texte : moins sur les petits formats |
La méthode, format par format
| Format | Ce qu'on en fait |
|---|---|
| 1080 × 1080 (carré) | Le visuel de référence. C'est lui qu'on compose en premier, toujours. |
| 1080 × 1920 (vertical) | On étire le fond vers le haut et le bas, on recentre le bloc de texte dans la zone sûre, et on agrandit l'accroche (l'écran est occupé entièrement : on peut se permettre plus gros). |
| 1200 × 628 (paysage court) | On passe en composition horizontale : texte à gauche, visuel à droite. L'accroche descend à ≈ 64 px. On supprime un niveau de texte — il n'y a pas la place. |
| 1280 × 720 (16:9) | Le message doit être lisible en vignette de 200 px de large. Donc : 4 à 5 mots maximum, énormes, et un contraste très marqué. |
Le test de la vignette. Réduis ta miniature YouTube à 20 % de zoom. Si tu ne peux plus lire le titre, personne ne le lira non plus dans une liste de suggestions. C'est le seul test qui compte pour ce format.
Le geste qui fait gagner une heure. Sélectionne les quatre frames et appuie sur Maj+2 pour zoomer sur la sélection. Tu les vois côte à côte : les incohérences de couleur, de graisse et de marge sautent aux yeux. Fais-le toutes les vingt minutes.
- Sélectionne la frame carrée terminée, Ctrl/⌘+C.
- Clique sur la frame story vide, Ctrl/⌘+V. Le contenu s’y colle. Ne redimensionne rien pour l’instant.
- Le fond d’abord. Sélectionne le seul aplat de fond et étire-le en hauteur jusqu’aux bords. Un aplat s’étire sans dommage — un texte ou une photo, non.
- Le bloc de texte ensuite. Sélectionne tous les textes ensemble et déplace-les aux flèches du clavier dans la zone sûre : sous 250 px du haut, au-dessus de 340 px du bas.
- L’accroche enfin. L’écran est occupé en entier : monte-la de 96 à 120 en changeant le corps dans le panneau, jamais à la poignée.
- Pour la bannière, même méthode mais en horizontal : textes à gauche, visuel à droite, accroche à 64.
- Maj+2 pour voir tes frames côte à côte et corriger ce qui dépareille.
La check-list de cohérence
Le livrable de la demi-journée 4 : quatre visuels qui forment une campagneQuatre visuels isolés ne font pas une campagne. Ce qui fait la campagne, c'est qu'on les reconnaît comme appartenant à la même série sans lire la marque.
| À vérifier | Comment |
|---|---|
| Une seule charte | Aucune couleur posée « à la main » : tout doit passer par un style |
| Deux polices maximum | Panneau Ressources › la liste des polices utilisées |
| Un seul rayon d'arrondi | Passer les formes une par une |
| Le logo au même endroit | Toujours en bas, ou toujours en haut. Pas les deux. |
| Un seul élément coloré vif par visuel | Deux boutons Menthe = plus aucune hiérarchie |
| Les marges respectées | Grille affichée sur chaque frame |
| Le même ton d'écriture | On ne tutoie pas sur l'un et ne vouvoie pas sur l'autre |
| Les mentions obligatoires | Elles figurent dans le brief. Les relire. |
Le panneau des calques est ton meilleur outil de
contrôle. Un fichier propre a des calques nommés — Accroche,
Bouton / Menthe, Photo écran. Un fichier où tout s'appelle
Rectangle 47 est un fichier que personne ne pourra reprendre, à commencer
par toi dans trois mois.
Fin de la demi-journée 4. Les quatre visuels sont finis, cohérents, et prêts à sortir. Il ne reste plus qu'à les exporter correctement — et c'est là que beaucoup de travaux propres se gâchent.