Créer ses premiers visuels

Figma s’utilise dans le navigateur : rien à installer. Il faut seulement un compte, que tu crées toi-même. Ton formateur ne crée aucun compte pour toi et ne te demande jamais ton mot de passe.

1. Ouvre Chrome ou Edge et va sur figma.com.C’est bon si la page d’accueil de Figma s’affiche.La page ne s’ouvre pas sur le réseau de l’école ? Lève la main : ton formateur vérifie l’accès. Ne cherche pas à contourner le réseau.
2. Va directement sur figma.com/signup (ou clique le bouton d’inscription de la page d’accueil de Figma).C’est bon si la page « Bienvenue dans Figma » s’affiche, avec « Continuer avec Google » et un champ « Adresse e-mail ».Un bandeau de cookies s’affiche en bas ? Choisis « Ne pas autoriser les cookies » : tu n’en as pas besoin pour t’inscrire.

   

3. Inscris-toi : tape une adresse que tu consultes et que tu garderas (celle de l’école ou la tienne) dans le champ Adresse e-mail, clique Continuer par e-mail, puis choisis un mot de passe que tu choisis toi-même à vérifier. Ou clique Continuer avec Google.C’est bon si Figma annonce un e-mail de confirmation (ou te connecte directement avec Google).Personne ne tape ton mot de passe à ta place, et tu ne le donnes à personne, formateur compris.
4. Ouvre ta messagerie et clique le lien de confirmation envoyé par Figma.C’est bon si ton adresse est vérifiée et Figma t’accueille.Rien après 5 minutes ? Regarde dans les courriers indésirables, ou recommence avec Continuer avec Google.
5. Figma pose quelques questions (ton rôle, ce que tu vas faire) : réponds librement. Quand il propose une offre, choisis l’offre gratuite (Gratuit).C’est bon si tu arrives sur ton espace de fichiers (la page Récents), avec l’étiquette « Gratuit » à côté du nom de ton équipe, sans avoir donné de carte bancaire.On te demande une carte bancaire ? Tu n’es pas sur l’offre gratuite : reviens en arrière et choisis-la.

   

6. Si Figma s’affiche en anglais, passe-le en français (disponible depuis octobre 2025) : ton nom ou ton avatar, en haut à gauche de l’espace de fichiers (près de la cloche), puis Paramètres (Settings) › Langue (Language) › Français à vérifier.C’est bon si les menus sont en français.Tu préfères l’anglais ? Reste en anglais : ce support donne les deux noms quand ils diffèrent.
7. Sur le poste de l’école, connecte-toi toujours avec ton compte : figma.com › Se connecter (Log in).C’est bon si ton nom ou tes initiales s’affichent en haut. En fin de séance, tu te déconnectes (dernière partie).

Trois choses à préparer avant d’ouvrir un fichier : un dossier pour ranger le kit, les photos d’exemple, et les textes du commerce.

1. Sur ton bureau (ou dans ton OneDrive), crée un dossier kit. Dedans, crée trois dossiers : photos, videos et exports. Pas d’accent, pas d’espace.C’est bon si tu vois les trois dossiers dans kit.
2. Télécharge les photos d’exemple dans kit/photos : devanture.jpg, produit-nappe.jpg et photo-sombre.jpg (clic droit sur le lien › Enregistrer le lien sous…).C’est bon si les trois photos sont dans kit/photos.Aujourd’hui, tu travailles avec ces photos d’exemple (libres de droits). Tes propres photos du commerce arriveront après la séance photo : tu les mettras à leur place en séance 2.
3. Avec ton groupe, écris sur papier (ou dans le carnet de bord) quatre lignes : le nom du commerce, son adresse, ses horaires, et une offre à mettre en avant (ex. « Le levain sort du four à 7 h 30 »).C’est bon si tu as quatre lignes prêtes à taper.Pas encore de commerce ? Prends celui de l’exemple, la Boulangerie du Parc : ses textes sont dans textes-a-taper.txt.

Tu n’as pas besoin de tout connaître : cinq zones suffisent. Repère-les sur la capture, sans rien cliquer ; tu les retrouveras sur ton écran à la partie suivante.

1. En haut à gauche : le nom du fichier, avec « Projet d’équipe » et l’étiquette « Gratuit » dessous. En haut à droite : le bouton bleu Partager (Share). Le logo de Figma, tout en haut de la barre verticale de gauche, ouvre le menu principal.C’est bon si tu sais où lire le nom du fichier.
2. À gauche : les Pages et les Calques (Layers). Tout ce que contient la page, rangé : on y clique quand on n’arrive plus à attraper un objet sur le canevas.C’est bon si tu sais où chercher un objet par son nom.Tu vois une « Nouvelle discussion » avec un assistant à la place des Calques ? Clique Fichier dans la barre verticale tout à gauche : les Pages et les Calques sont là (les autres entrées, Agents, Ressources, Outils et Variables, ne servent pas ici).
3. Au centre : le canevas, gris et infini. Tes visuels y sont des frames (des cadres), posées côte à côte.C’est bon si tu sais qu’un visuel = une frame.
4. À droite : le panneau Design, de haut en bas : Position (Alignement, X, Y, Rotation), Mise en page (la taille : W largeur et H hauteur, en pixels), Apparence, Remplissage (Fill) (la couleur), Typographie (pour un texte), Tracé, Effets, et tout en bas Exporter (Export). Il change selon ce qui est sélectionné.C’est bon si tu sais quel panneau donne la taille exacte d’un objet : Design, section Mise en page.
5. En bas au centre : la barre d’outils. Déplacer V, Frame F, Rectangle R, Stylo (pour tracer des formes libres : inutile ici), Texte T, puis Commentaire et Actions.C’est bon si tu connais les quatre touches du kit : V, F, R, T.

   

6. Retiens quatre gestes de secours : Ctrl+Z annule ; Échap puis V désélectionne et reprend l’outil Déplacer ; Maj+1 montre tout ; Espace + glisser déplace la vue, Ctrl + molette zoome. Sur Mac, ⌘ remplace Ctrl.C’est bon si tu peux les dire sans regarder.Figma enregistre tout seul, en continu, dans ton compte : pas besoin d’Ctrl+S.

Un post Instagram ou Facebook se mesure en pixels : 1080 × 1080. Jamais en A4, jamais en centimètres. Bonne nouvelle : Figma travaille toujours en pixels et en couleurs d’écran (RVB) ; il n’y a rien d’autre à régler.

1. Dans ton espace de fichiers (Récents), en haut à droite : clique le bouton Design (à côté de FigJam, Slides et Make). Il crée un fichier de design vide.C’est bon si un fichier vide s’ouvre : le canevas gris, et le nom du fichier en haut à gauche (Sans titre (Untitled)) à vérifier.Ne clique pas « Créer un fichier » dans le bandeau « Décrivez votre idée et donnez-lui vie » : il fabrique un fichier à partir d’une description, avec l’IA.
2. Double-clique sur le nom du fichier, en haut à gauche, tape kit-boulangerie (avec le nom de ton commerce), puis Entrée.C’est bon si le nouveau nom s’affiche en haut à gauche. Retrouve-le plus tard dans tes fichiers Récents.
3. Touche F (outil Frame). Dans le panneau Design, à droite, une liste de formats s’affiche : déplie Réseaux sociaux, puis clique Publication Instagram (1080 × 1350).C’est bon si un cadre blanc de 1080 × 1350 apparaît au centre de l’écran, son nom écrit au-dessus : Instagram post - 1 (Figma nomme ses formats prêts en anglais).Il n’y a pas de format 1080 × 1080 dans la liste : on part de 1080 × 1350, et on corrige la hauteur à l’étape suivante. Plus simple à la souris ? Glisse un carré sur le canevas : la taille se règle de toute façon à l’étape suivante.

   

4. Panneau Design, section Mise en page : clique le champ H (hauteur) et tape 1080 ; W (largeur) affiche déjà 1080. Puis, section Position : X 0 et Y 0. Appuie sur Entrée après chaque valeur.C’est bon si le cadre fait 1080 × 1080 (W 1080, H 1080) : c’est un carré.W change tout seul quand tu tapes H ? Les proportions sont verrouillées : clique la petite icône à droite de W et H, puis retape à vérifier.
5. Panneau Calques : double-clique sur le nom de la frame (Instagram post - 1), tape boulangerie-post (le nom de ton commerce, puis -post), Entrée. Que des minuscules, pas d’accent, pas d’espace.C’est bon si le panneau Calques et le haut du cadre affichent boulangerie-post. Ce nom deviendra celui de ton fichier exporté.
6. Maj+1 : tout voir.C’est bon si ton cadre est en entier à l’écran.

La charte, c’est ce qui fait reconnaître le commerce sans lire son nom. Elle est présélectionnée pour ton commerce (couleurs et polices préparées avant le bootcamp) : ton formateur la valide ou l’ajuste avec ton groupe. Tous tes visuels s’en serviront.

Rôle	À quoi elle sert	Exemple (Boulangerie du Parc)
Couleur principale	Celle de l’enseigne : on reconnaît le commerce	#5C3A26 brun
Couleur d’accent	L’appel à l’action, un prix, une promo	#E07A2F orange
Couleur claire	Les fonds, le texte posé sur du foncé	#FAEED6 crème

Les 3 couleurs

1. Reprends les trois couleurs de la charte présélectionnée (principale, accent, claire) et fais-les valider par ton formateur.C’est bon si chaque couleur a un rôle, et l’une d’elles est celle de l’enseigne.Pas de charte reçue, ou une couleur à ajuster ? Regarde le commerce (sa devanture, son compte Instagram) et choisis avec ton groupe.
2. Outil Rectangle (R) : trace trois petits carrés sur le canevas gris, à gauche de ton cadre (hors du cadre : ils ne seront jamais exportés).C’est bon si trois carrés gris clair sont posés à côté du cadre, et dans Calques ils ne sont pas rangés sous boulangerie-post.Rangés sous le cadre ? Fais-les glisser hors du cadre, sur le gris.
3. Clique le premier carré. Panneau Design, section Remplissage (Fill) : clique le code (il affiche D9D9D9), tape le code de ta couleur principale, puis Entrée.C’est bon si le carré prend ta couleur.Pas de code ? Clique la pastille de couleur, à gauche du code : la fenêtre « Sélecteur de couleur » s’ouvre (onglets Personnalisé et Bibliothèques), avec un champ Hex : choisis ta couleur, le code s’affiche.

   

4. Fais de même pour les deux autres carrés : accent, puis claire.C’est bon si tes trois couleurs sont côte à côte : c’est ta palette.
5. Note les trois codes (6 caractères) dans ton carnet de bord et donne-les à tout ton groupe.C’est bon si tout le groupe a les trois mêmes codes.

Les 2 polices

1. Reprends les deux polices de la charte : une pour les titres (elle a du caractère), une pour le texte (elle se lit sans effort). Pas de polices fournies ? Choisis-en deux sur fonts.google.com. Note leurs noms exacts.C’est bon si les deux sont franchement différentes.
2. Rien à télécharger : Figma, dans le navigateur, donne accès à toutes les polices de Google Fonts. Pour essayer : T, un clic sur le canevas, tape « Essai », puis Échap. Panneau Design, section Typographie : clique la Famille de polices (le nom de la police actuelle) et tape le nom de ta police de titre dans la recherche de la fenêtre Polices.C’est bon si le texte d’essai prend ta police.Ta police n’est pas dans la liste ? Elle ne vient pas de Google Fonts : choisis-en une qui en vient.
3. Supprime le texte d’essai (Suppr). Note les deux noms de police dans ton carnet. Tout le groupe prend les mêmes.C’est bon si tout le groupe a les deux mêmes polices.

Le gabarit, c’est le post réglé une fois pour toutes : le fond, la place de la photo, les textes. En séance 2, tu le copieras pour la story et pour le carrousel. Ce que tu construis :

Élément	Où	Comment
fond	Tout le carré	Rectangle 1080 × 1080, couleur claire
cadre-photo	Le haut du carré	Rectangle 1080 × 640, couleur principale. La photo viendra dedans en séance 2
4 textes	La bande du bas	Accroche, précision, appel à l’action, nom et adresse

Le fond et le cadre photo

1. Outil Rectangle (R) : trace un rectangle n’importe où dans ton cadre blanc.C’est bon si dans Calques, le rectangle est rangé sous boulangerie-post.
2. Panneau Design : section Position, tape X 0 et Y 0 ; section Mise en page, tape W 1080 et H 1080 (Entrée après chaque valeur). Dans un cadre, X et Y se comptent depuis son coin en haut à gauche.C’est bon si le rectangle couvre tout le cadre.H change tout seul quand tu tapes W ? Clique l’icône des proportions, à droite de W et H, puis retape.
3. Remplissage (Fill) : tape le code de ta couleur claire, Entrée.C’est bon si tout le carré prend la couleur claire.
4. Panneau Calques : double-clique sur le nom Rectangle 1, tape fond, Entrée.C’est bon si la ligne s’appelle fond.
5. Un autre rectangle (R) dans le cadre. Design : X 0, Y 0, W 1080, H 640. Remplissage : ta couleur principale. Renomme-le cadre-photo.C’est bon si le haut du carré est de ta couleur principale, et Calques montre cadre-photo au-dessus de fond.

Les quatre textes

1. Outil Texte (T) : un seul clic dans la bande claire, en bas, puis tape ton accroche (ex. « Le levain sort du four à 7 h 30 »). Appuie sur Échap pour sortir du texte.C’est bon si le texte s’affiche, sélectionné, et rangé sous boulangerie-post dans Calques.Un clic suffit : il crée un texte qui s’allonge avec ce que tu tapes. Glisser crée une zone de taille fixe.
2. Le texte sélectionné, panneau Design, section Typographie : ta police de titre (Famille de polices), et 64 dans le champ de la taille. Remplissage : ta couleur principale.C’est bon si l’accroche se lit au premier coup d’œil.Trop longue pour une ligne ? Double-clique dans le texte, clique entre deux mots et appuie sur Entrée : elle passe sur deux lignes.

   

3. Deuxième texte (T, un clic plus bas) : la précision (ex. « Pain au levain, cuit sur place chaque matin »). Police de texte, taille 32.C’est bon si on lit l’accroche d’abord, la précision ensuite.
4. Troisième texte : l’appel à l’action (ex. « Passez nous voir »). Police de titre, taille 36, dans ta couleur d’accent.C’est bon si il se voit, sans écraser l’accroche.
5. Quatrième texte, petit (taille 24) : le nom du commerce et l’adresse (ex. « Boulangerie du Parc · 12 rue du Parc »).C’est bon si il signe le post, discrètement.

Aligner et ranger

1. Outil Déplacer (V). Place chaque texte en hauteur dans la bande claire : glisse-le en maintenant Maj pour qu’il ne bouge que dans un sens.C’est bon si accroche en haut de la bande, nom et adresse en bas, rien ne touche le cadre photo.
2. Clique l’accroche, puis Maj+clic sur les trois autres textes. Section Typographie : clique l’icône d’alignement du texte au centre (la 2e de la rangée Alignement).C’est bon si les quatre textes sont sélectionnés, et chaque ligne est centrée dans son texte.
3. En haut du panneau Design, section Position, la rangée Alignement : clique Aligner centre horizontal (la 2e icône).C’est bon si les quatre textes ont le même axe vertical.Plusieurs objets sélectionnés s’alignent entre eux. Un objet seul s’aligne sur son cadre : c’est l’étape suivante.

   

4. Toujours les quatre sélectionnés : Ctrl+G (grouper). Dans Calques, renomme le groupe textes.C’est bon si Calques montre un groupe textes, sous boulangerie-post.
5. Le groupe textes seul sélectionné : clique de nouveau Aligner centre horizontal.C’est bon si le groupe est centré sur le carré.
6. Les marges : clique chaque texte (double-clic dans le groupe) et lis W (sa largeur, section Mise en page) dans le panneau Design.C’est bon si chaque texte mesure 960 px de large au plus : il reste à 60 px des bords.Plus de 960 ? Réduis sa taille, ou coupe-le sur deux lignes.

1. Clique le nom boulangerie-post écrit au-dessus du cadre (ou sa ligne dans Calques).C’est bon si le panneau Design affiche le cadre : W 1080, H 1080.
2. Fais défiler le panneau Design jusqu’en bas : section Exporter (Export). Clique le + (« Ajouter des paramètres d’exportation »).C’est bon si une ligne d’export apparaît : 1x et PNG, et sous elle le bouton Exporter boulangerie-post.

   

3. Vérifie la ligne : 1x (taille réelle) et PNG.C’est bon si elle affiche 1x et PNG.2x donnerait un fichier de 2160 × 2160 : trop grand pour le réseau.
4. Clique le bouton Exporter boulangerie-post, sous la ligne.C’est bon si le navigateur télécharge boulangerie-post.png.Le navigateur demande où enregistrer ? Choisis directement kit/exports.
5. Range-le : dans l’Explorateur, Téléchargements, fais glisser boulangerie-post.png dans kit/exports.C’est bon si le fichier est dans kit/exports.
6. Vérifie sa taille : clic droit sur le fichier › Propriétés › onglet Détails. Mac : clique le fichier, puis ⌘+I.C’est bon si Dimensions : 1080 × 1080.

1. Figma a tout enregistré dans ton compte. Copie ton dossier kit (photos, exports) sur ta clé USB ou ton OneDrive.C’est bon si tu retrouves photos et exports sur la copie.
2. Carnet de bord (ton livret étudiant, bloc de la séance) : tes 3 codes couleur et tes 2 polices.C’est bon si le bloc de la séance est rempli.
3. Prépare la visite du commerce (lundi, 15 h 45 - 17 h 15) : la fiche diagnostic est dans ton livret, étape 1.C’est bon si tu sais ce que tu vas observer et demander au commerçant.
4. Déconnecte-toi : le poste est partagé. Menu principal (le logo de Figma, tout en haut à gauche de l’éditeur) › Retour aux fichiers (Back to files), puis ton nom, en haut à gauche › Se déconnecter (Log out) à vérifier.C’est bon si la page de connexion de Figma s’affiche : personne ne peut ouvrir ton fichier après toi.