Dessiner, colorer, cadrer

Trois objets se ressemblent à l'écran et ne font pas du tout la même chose. C'est la confusion n° 1 des débutants.

Objet	Ce que c'est	Quand l'utiliser
Frame F	Un cadre qui définit une surface. Il coupe ce qui dépasse, il s'exporte, il peut avoir sa propre grille.	Pour un visuel entier. Et pour un bloc qu'on veut contraindre.
Forme R O	Un rectangle, une ellipse, une ligne. Un objet, sans contenu.	Pour dessiner : un fond, un bandeau, une pastille, un bouton.
Groupe Ctrl+G	Plusieurs objets attachés ensemble. Ne coupe rien, n'a pas de fond.	Pour déplacer d'un bloc. À éviter : préfère presque toujours une frame.

Sélectionner un objet à l'intérieur d'une frame : double-clic pour descendre d'un niveau, ou Ctrl/⌘ + clic pour aller directement sur l'objet le plus profond. Et Échap pour remonter.

1. R pour le rectangle, O pour l'ellipse, L pour la ligne.
2. Clique-glisse pour tracer. Maj enfoncé pendant le tracé force le carré (ou le cercle parfait).
3. Une fois tracé, corrige les valeurs dans le panneau Design plutôt que de retoucher à la souris. X et Y = la position (section Position), W (Largeur) et H (Hauteur) = la taille (section Mise en page).
4. Le champ Rayon d'angle, dans la section Apparence, arrondit les coins. La petite icône à côté permet de régler chaque coin séparément.

Les valeurs d’arrondi qui fonctionnent

Élément	Rayon	Effet produit
Bouton	La moitié de sa hauteur	Forme de gélule — moderne, très lisible
Carte, encadré	16 à 24 px sur un 1080	Doux sans être enfantin
Badge, pastille de prix	8 à 12 px	Compact, sérieux
Fond plein page	0	Un fond ne s'arrondit jamais

Le panneau Design réunit trois réglages d'apparence : Remplissage (la couleur), Tracé (le contour) et Effets (dont l'ombre portée).

figma.com

1. Sélectionne la forme, clique sur le carré de couleur de la section Remplissage.
2. Tape le code hexadécimal dans le champ Hex du sélecteur. Jamais à la souris dans le dégradé : on n'obtient jamais deux fois la même couleur.
3. Pour un dégradé, choisis Linéaire en haut du sélecteur, puis règle les deux poignées sur le canevas.
4. Le contour (section Tracé) a sa propre couleur, son épaisseur et sa position (intérieur, centre, extérieur).

La charte Datashop

Cinq couleurs. Pas six. Une charte à dix couleurs n'est plus une charte.

Enregistrer la charte en styles

1. Applique une couleur de la charte à une forme.
2. Dans la section Remplissage, clique sur les quatre petits points à droite (Appliquer des styles et des variables).
3. Clique sur +, nomme le style (Datashop / Menthe) et valide.
4. Répète pour les six couleurs. Elles apparaissent désormais dans tous les fichiers en un clic.

L’ombre portée, avec mesure

Effets › Ombre portée. Les réglages par défaut de Figma sont trop durs. Sur un visuel réseau social : Y = 8, flou = 24, opacité = 20 %, couleur noire. Une ombre doit se sentir, pas se voir.

Dans Figma, une image n'est pas un objet : c'est un remplissage. Elle vit à l'intérieur d'une forme. C'est déroutant au début, et c'est ce qui rend le cadrage simple.

Trois façons d’insérer une image

Méthode	Comment	Quand
Glisser-déposer	Depuis l'explorateur, directement sur le canevas	Le plus rapide
Menu	Outils de formes › Image/vidéo… — Ctrl+Maj+K	Pour remplir une forme déjà dessinée
Plugin Unsplash	/ puis « Unsplash » — images libres de droits	Quand le client ne fournit rien. Le cas de ce cours.

figma.com

Masquer une image dans une forme

1. Dessine la forme voulue (un cercle, par exemple) et place-la au-dessus de l'image dans le panneau des calques.
2. Sélectionne les deux.
3. Ctrl/⌘+Alt+M, ou clic droit › Utiliser comme masque.
4. L'image n'apparaît plus que dans la forme. Elle reste modifiable dessous.

Le poids : à surveiller dès maintenant

Une photo de 8 Mo importée dans Figma alourdit le fichier et ralentit tout le monde. Réduis avant d'importer : pour un visuel 1080 px, une image source de 2000 px de large suffit largement.

Tu as maintenant tout ce qu'il faut pour poser les fonds. Pas de texte encore : uniquement les aplats, les dégradés, les photos et les blocs de couleur.

Visuel	Ce qu'on compose
1 · Post carré	Fond Encre #0B1220. Un grand cercle Bleu→Violet en haut à droite, débordant du cadre (il sera coupé par la frame — c'est voulu). Une pastille Corail en haut à gauche pour le « −20 % ».
2 · Story	Dégradé linéaire Bleu → Violet sur toute la hauteur. Par-dessus, un second rectangle noir en dégradé vers le transparent, du bas vers le haut : c'est le voile qui rendra le texte lisible.
3 · Bannière	Fond Encre sur les deux tiers gauche, bloc Bleu→Violet sur le tiers droit. Une photo dedans si tu veux.
4 · Miniature	Fond très sombre, photo à droite en mode Remplir, bandeau Corail plein sur toute la largeur en bas (hauteur ≈ 90 px).

1. Le post carré. Sélectionne la frame, puis remplissage Encre #0B1220.
2. O, trace un cercle d’environ 700 px et place-le en haut à droite en le laissant dépasser du cadre.
3. Remplis ce cercle d’un dégradé linéaire Bleu → Violet. Il est coupé net par la frame : c’est voulu.
4. Si le cercle déborde au lieu d’être coupé : sélectionne la frame et coche Masquer le contenu extérieur (section Mise en page du panneau Design).
5. La story. Dégradé Bleu → Violet sur toute la hauteur, puis le voile du module précédent par-dessus.
6. La bannière. Deux rectangles côte à côte : Encre sur les deux tiers gauche, dégradé sur le tiers droit.
7. La miniature. Fond très sombre, photo à droite en mode Remplir, et un rectangle Corail de 1280 × 90 collé au bas du cadre.