Figma Fondamentaux
Exercices pratiques · séminaire 15 h

À toi de jouer dans Figma

18 exercices classés par compétence, puis 3 ateliers notés, dont les 2 missions complètes. Tous portent sur la campagne « Les Jours Data » de Datashop. Fais la manipulation, puis déplie la solution. Les encadrés 🔍 Analyse expliquent pourquoi c’est comme ça — c’est la partie qui te servira encore dans cinq ans.

🏋️ 18 exercices 📝 3 ateliers notés 🔍 Volet analyse ✅ Auto-suivi

🗜️ Le kit de travail : pack complet (.zip) — brief client, charte, logo, fiche des formats et check-list. Travaille dans un seul fichier Figma (le forfait gratuit en autorise trois) et crée une page par grande étape.

📐 Formats & interface

Exercice 1 · ⭐ facile

Le bon format, sans tricher

Sans regarder la fiche, écris les dimensions en pixels de : une publication carrée Instagram, une story, un aperçu de lien LinkedIn, une miniature YouTube. Puis vérifie.

Voir la solution
1080 × 1080 · 1080 × 1920 · 1200 × 627 · 1280 × 720. Si tu en as raté un, ce n’est pas grave : ce qu’il faut retenir, ce sont les ratios — 1:1, 9:16, 1.91:1, 16:9.
🔍 Analyse. Les plateformes changent leurs chiffres tous les ans. Les ratios, eux, sont dictés par la forme des écrans : ils ne bougent pas. Apprends les ratios, vérifie les pixels.
Exercice 2 · ⭐ facile

Créer le fichier et les quatre frames

Crée un fichier nommé Datashop — Réseaux sociaux, renomme la page en Campagne Jours Data, et pose les quatre frames aux formats de la campagne.

Voir la solution
Appuie sur F. Story : Story Instagram (1080 × 1920). Carré : Publication Instagram (1080 × 1350), puis tape 1080 dans le champ H. Bannière : Publication Facebook (1200 × 630), puis H = 628. Miniature : trace une frame à la main, puis tape W = 1280 et H = 720 dans le panneau Design.
🔍 Analyse. Corriger dans le panneau plutôt qu’à la souris est le réflexe qui distingue un travail précis. À la souris, on obtient 1201 × 627 — et le réseau redimensionne.
Exercice 3 · ⭐⭐ moyen

La convention de nommage

Renomme les quatre frames selon la convention : numéro, client, campagne, usage, dimensions. Aucun accent, aucun espace, aucune majuscule.

Voir la solution
01-datashop-jours-data-post-carre-1080x1080
02-datashop-jours-data-story-1080x1920
03-datashop-lyon-banniere-1200x628
04-datashop-guide-ecran-miniature-1280x720
🔍 Analyse. Le nom de la frame devient le nom du fichier exporté. Cinq minutes ici, contre quatre renommages manuels vendredi soir — et zéro risque d’oubli.
Exercice 4 · ⭐⭐ moyen

Matérialiser les zones de sécurité

Sur la frame story, pose deux rectangles rouges semi-transparents : 1080 × 250 en haut, 1080 × 340 en bas. Nomme-les _zone-non-sure et verrouille-les.

Voir la solution
Deux rectangles, opacité 25 %, couleur rouge. Clic droit › Verrouiller (Ctrl/⌘+Maj+L) pour ne plus les sélectionner par erreur. Masque-les avant d’exporter — l’œil à côté du calque.
🔍 Analyse. Le préfixe _ range ces repères en tête de liste et signale qu’ils ne font pas partie du visuel. C’est une convention de studio, et elle évite l’accident classique : livrer un visuel avec ses repères dessus.

🎨 Formes, couleurs & images

Exercice 5 · ⭐ facile

Enregistrer la charte en styles

Crée les six styles de couleur de la charte Datashop : Encre #0B1220, Bleu #3B5BFD, Violet #7C3AED, Menthe #00D3A7, Corail #FF5C39, Brume #F4F6FB. Nomme-les Datashop / ….

Voir la solution
  1. Trace un rectangle n’importe où, puis donne-lui la couleur Encre en tapant 0B1220 dans le champ Hex du sélecteur de couleur.
  2. Section Remplissage : clique sur l’icône à quatre petits points, à droite du titre.
  3. Clique sur le +, nomme Datashop / Encre, valide.
  4. Change la couleur du même rectangle en 3B5BFD, et recommence : Datashop / Bleu.
  5. Ainsi de suite pour les six. Le / dans le nom range tous les styles dans un même dossier.
  6. Supprime le rectangle : les styles, eux, restent dans le fichier.
✓ Tu sauras que c’est bon si : le panneau Ressources affiche 6 styles de couleur sous « Datashop ».
🔍 Analyse. Sans styles, changer un vert demande de retrouver chaque forme. Avec, c’est un clic — et aucune occurrence oubliée. C’est la raison d’être des systèmes de design.
Exercice 6 · ⭐⭐ moyen

Le dégradé vers le transparent

Sur la frame story, pose un rectangle noir plein cadre, passe-le en dégradé linéaire du bas vers le haut, et règle la poignée du haut à 0 % d’opacité.

Voir la solution
  1. R, puis trace un rectangle qui couvre toute la frame story.
  2. Remplissage noir, puis onglet Linéaire en haut du sélecteur.
  3. Clique sur la poignée du haut dans la barre du dégradé : opacité 0 %.
  4. Clique sur celle du bas : noir, opacité 85 %.
  5. Sur le canevas, fais pivoter l’axe pour qu’il aille du bas vers le haut.
✓ Tu sauras que c’est bon si : le haut de la story est inchangé et le bas nettement assombri. Si tout est assombri, ton dégradé est à l’envers.
🔍 Analyse. C’est la technique pour rendre un texte lisible sur une photo sans éteindre l’image. Le voile est dense là où il y a du texte, invisible ailleurs. Un voile uniforme, lui, gâche la photo entière.
Exercice 7 · ⭐⭐ moyen

Insérer une photo sans la déformer

Avec le plugin Unsplash, insère une photo d’écran d’ordinateur dans la frame carrée. Mets-la en mode Remplir, puis recadre sur la partie intéressante.

Voir la solution
Touche / › tape « Unsplash » › cherche « computer monitor ». Une fois posée : section Remplissage › mode Remplir. Double-clic sur l’image pour passer en mode Rogner et déplacer le cadrage.
🔍 Analyse. Le mode Ajuster laisse des bandes vides ; l’étirement déforme. Remplir + recadrage est la seule combinaison qui préserve les proportions et remplit le cadre.
Exercice 8 · ⭐⭐⭐ difficile

Composer les quatre fonds

Compose les fonds des quatre visuels selon les indications du cours 2 : aplat + cercle débordant, dégradé + voile, deux blocs deux tiers/un tiers, photo + bandeau.

Voir la solution
  1. Post carré : frame en Encre, puis O et un cercle d’environ 700 px en haut à droite, débordant du cadre.
  2. Dégradé Bleu → Violet sur ce cercle. S’il déborde au lieu d’être coupé : sélectionne la frame et coche Masquer le contenu extérieur.
  3. Story : dégradé Bleu → Violet plein cadre, plus le voile de l’exercice 6 par-dessus.
  4. Bannière : deux rectangles côte à côte, Encre sur deux tiers, dégradé sur un tiers.
  5. Miniature : fond sombre, photo à droite en mode Remplir, rectangle Corail de 1280 × 90 collé en bas.
✓ Tu sauras que c’est bon si : les quatre frames ont un fond, et aucune couleur n’a été posée à la main : tout vient des styles de l’exercice 5.
🔍 Analyse. Un élément qui déborde du cadre donne de la profondeur et suggère qu’il se passe quelque chose hors champ. Un visuel où tout tient sagement à l’intérieur paraît toujours plus plat.

🔤 Texte & hiérarchie

Exercice 9 · ⭐ facile

Régler une accroche correctement

Écris LES JOURS DATA sur le post carré, en Poppins SemiBold, corps 96, interligne 104, interlettrage −2 %.

Voir la solution
  1. T, clic simple sur la frame, tape LES JOURS DATA.
  2. Échap puis V pour sortir du texte et le sélectionner.
  3. Panneau Design, section Typographie : police Poppins, graisse SemiBold, taille de police 96.
  4. Champ Hauteur de ligne (l’interligne) : remplace « Auto » par 104.
  5. Champ Espacement des lettres (l’interlettrage) juste après : -2%.
✓ Tu sauras que c’est bon si : sur deux lignes, les lettres hautes de la ligne du bas frôlent les lettres basses de celle du haut sans les toucher. Avec « Auto », il y a un trou.
🔍 Analyse. L’interligne « Auto » vaut environ 120 % — correct pour un paragraphe, trop lâche pour un titre, dont les lignes se mettent à flotter. 104 sur un 96 fait 108 % : c’est le réglage qui « resserre » un titre.
Exercice 10 · ⭐⭐ moyen

Les cinq niveaux de hiérarchie

Sur le post carré, place les cinq niveaux : accroche, message, précision, action, mention. Respecte les écarts de taille du cours 3.

Voir la solution
  1. Accroche 96 · message 40 · précision 28 · bouton 28 · mention 20.
  2. Sélectionne les cinq textes ensemble (Maj + clic) puis aligne-les à gauche par le bouton d’alignement du panneau Design.
  3. Donne-leur tous X = 80 pour qu’ils démarrent sur la marge de sécurité.
  4. Un seul élément en couleur vive : le bouton Menthe. Tout le reste en blanc ou en gris clair.
✓ Tu sauras que c’est bon si : à 25 % de zoom, tu lis « LES JOURS DATA » et rien d’autre. Si ton œil hésite entre deux textes, leurs tailles sont trop proches.
🔍 Analyse. Le test : zoom à 25 %, une seconde de regard. Si l’œil hésite entre deux éléments, c’est qu’ils ont des tailles trop proches. Un écart net vaut mieux qu’un dégradé subtil.
Exercice 11 · ⭐⭐ moyen

Créer les quatre styles de texte

Enregistre les styles Accroche, Sous-titre, Corps et Mention légale, puis applique-les à tous tes textes.

Voir la solution
  1. Sélectionne ton accroche déjà réglée.
  2. Section Texte : icône à quatre points → + → nomme Accroche → Créer un style.
  3. Règle un deuxième texte en Inter Medium 40/52, et enregistre-le en Sous-titre.
  4. Idem pour Corps (Inter Regular 28/40) et Mention légale (Inter Regular 20/28).
  5. Applique-les ensuite partout : sélectionne un texte, rouvre les quatre points, clique sur le style.
✓ Tu sauras que c’est bon si : tu peux changer le corps de Corps une seule fois et voir tous les textes concernés bouger ensemble.
🔍 Analyse. Quand le client demandera « le texte est un peu petit partout », tu modifieras quatre styles au lieu de vingt textes. Et il n’y aura pas d’oubli.
Exercice 12 · ⭐⭐⭐ difficile

Rendre lisible sur photo, et le prouver

Écris en blanc sur ta photo. Mesure le contraste avec le plugin Stark. Si tu es sous 4,5:1, corrige — en renforçant le voile, pas en grossissant le texte.

Voir la solution
  1. Touche /, tape « Stark », lance le plugin.
  2. Choisis Contrast checker.
  3. Sélectionne d’abord le texte, puis le fond qui est derrière lui.
  4. Si le rapport est sous 4,5:1 : augmente l’opacité basse de ton voile (85 % → 92 %), ou déplace le texte vers une zone plus sombre de la photo.
  5. Re-mesure après correction.
✓ Tu sauras que c’est bon si : Stark affiche 4,5:1 ou plus et un badge AA. Ne grossis pas le texte pour tricher : c’est le fond qu’on corrige.
🔍 Analyse. 4,5:1 est le seuil de la norme d’accessibilité (WCAG AA). Ce n’est pas du confort : environ une personne sur cinq lit mal un contraste faible, et sur un téléphone en plein soleil, c’est tout le monde.

🧱 Composition & déclinaison

Exercice 13 · ⭐⭐ moyen

Grille, marge, et échelle d’espacement

Pose une grille de 4 colonnes (marge 80, gouttière 32) sur le post carré. Repositionne tout pour que les écarts verticaux ne soient que des multiples de 8.

Voir la solution
  1. Sélectionne la frame par son nom, au-dessus du cadre.
  2. Section Guide de mise en page → + → icône de réglages → type Colonnes.
  3. Étirer · 4 colonnes · marge 80 · gouttière 32.
  4. Reprends chaque élément et corrige son Y pour qu’il tombe sur un multiple de 8 : 80, 320, 400, 448…
✓ Tu sauras que c’est bon si : aucune valeur de Y ne se termine par un chiffre autre que 0, 8, 6, 4 ou 2. Un 317 ou un 451 trahit un placement à la souris.
🔍 Analyse. L’œil ne mesure pas, mais il détecte l’irrégularité. Une échelle unique produit une impression de soin que personne ne sait nommer — et son absence produit l’impression inverse, tout aussi inexplicable.
Exercice 14 · ⭐⭐ moyen

Un bouton en Auto Layout, puis en composant

Crée le bouton « J’en profite » en Auto Layout (marges 24 × 32, fond Menthe, rayon = moitié de la hauteur). Transforme-le en composant et pose une instance sur les quatre visuels.

Voir la solution
Sélectionne le texte › Maj+A › règle les marges et le fond. Puis Ctrl/⌘+Alt+K pour en faire un composant. Copie-colle dans les autres frames.
🔍 Analyse. Teste-le : remplace le texte d’une instance par « Je découvre toute la sélection ». Le bouton s’allonge, les marges restent identiques. C’est exactement ce qu’un bouton dessiné à la main ne sait pas faire.
Exercice 15 · ⭐⭐⭐ difficile

Décliner le carré en story et en bannière

À partir du post carré terminé, produis la story et la bannière. Interdiction de redimensionner la frame carrée : recompose.

Voir la solution
  1. Copie le contenu du carré, colle-le dans la story. Ne redimensionne rien.
  2. Étire le seul aplat de fond jusqu’aux bords. Un aplat s’étire sans dommage, un texte ou une photo non.
  3. Sélectionne tous les textes ensemble et déplace-les aux flèches du clavier dans la zone sûre.
  4. Monte l’accroche de 96 à 120 en changeant le corps dans le panneau, jamais à la poignée.
  5. Bannière : même méthode en horizontal, accroche à 64, et supprime le niveau « précision ».
✓ Tu sauras que c’est bon si : aucun texte n’est déformé et aucune photo n’est écrasée. Sélectionne un texte : sa largeur et sa hauteur doivent être cohérentes avec son corps.
🔍 Analyse. Supprimer du texte est le geste le plus difficile à accepter, et le plus professionnel. Un format court en hauteur n’a pas la place : y entasser les cinq niveaux produit une bouillie que personne ne lit.

📦 Export pro & livraison

Exercice 16 · ⭐ facile

PNG contre JPG, mesuré

Exporte le post carré en PNG et en JPG. Note les deux poids. Zoome à 400 % sur le bord d’une lettre blanche dans chacun.

Voir la solution
  1. Sélectionne la frame, section Exporter tout en bas du panneau, clique sur +.
  2. Laisse 1× et PNG, puis clique sur le bouton Exporter.
  3. Change le format de la ligne en JPG et ré-exporte.
  4. Dans l’explorateur de fichiers, compare les deux poids.
  5. Ouvre les deux images et zoome à 400 % sur le bord d’une lettre blanche.
✓ Tu sauras que c’est bon si : le JPG est nettement plus léger, mais tu vois un halo de petits blocs autour des lettres. Conclusion : PNG pour ce visuel.
🔍 Analyse. La compression JPG travaille par blocs de 8 × 8 pixels. Sur un dégradé de photo, c’est invisible ; sur une transition nette (texte blanc / fond noir), le bloc se voit. D’où la règle : aplats → PNG, photos → JPG.
Exercice 17 · ⭐⭐ moyen

Le poids de la miniature

Exporte la miniature YouTube et vérifie son poids. Si elle dépasse 2 Mo, ramène-la sous 500 Ko sans perte visible.

Voir la solution
  1. Exporte la miniature en PNG 1× et regarde son poids dans l’explorateur.
  2. Si elle dépasse 2 Mo : change la ligne d’export en JPG et ré-exporte.
  3. Si c’est encore trop : va sur tinypng.com et glisse le fichier dedans.
  4. Rouvre le résultat et vérifie que le texte est toujours net à 100 %.
✓ Tu sauras que c’est bon si : le fichier fait moins de 500 Ko et le titre reste parfaitement lisible. YouTube refuse au-delà de 2 Mo : ce n’est pas un conseil, c’est un blocage.
🔍 Analyse. YouTube refuse les miniatures de plus de 2 Mo — ce n’est pas une recommandation, c’est un blocage. C’est le genre de détail qu’on découvre au mauvais moment : au moment de publier.
Exercice 18 · ⭐⭐ moyen

La planche de validation

Monte une planche 1920 × 1080 avec les quatre visuels réduits, leur numéro, leur usage et leurs dimensions, plus un rappel de la charte. Exporte-la en PDF.

Voir la solution
  1. Dans le panneau de gauche, crée une nouvelle page (le + à droite de « Pages »).
  2. F, puis une frame 1920 × 1080.
  3. Copie tes quatre visuels dedans et réduis-les par la poignée d’angle en maintenant Maj, pour garder les proportions.
  4. Sous chacun, un texte en style Mention légale : numéro, usage, dimensions.
  5. En bas, rappelle la charte : les six couleurs et les deux polices.
  6. Sélectionne la frame, section Exporter, format PDF, 1×.
✓ Tu sauras que c’est bon si : le PDF s’ouvre sur une seule page où l’on voit la campagne entière, et où chaque visuel porte ses dimensions.
🔍 Analyse. Le client valide la campagne, pas les fichiers un par un. Une planche économise un aller-retour complet — et un aller-retour, c’est deux jours de délai.

🧩 Les trois ateliers notés

Ils se font en autonomie, sans consigne pas à pas : c’est ce qui se passe en entreprise. Chacun se dépose ici, se vérifie tout de suite et se rend à ton formateur.

La note des ateliers. Elle vaut ton auto-évaluation sur 20, multipliée par la part des contrôles réussis sur tes exports. Elle vaut 0 tant qu'un export n'a pas le format et la taille demandés : un client refuserait le fichier. La planche PDF et le LISEZ-MOI des missions partent avec ton mail et se jugent sur la grille. Le résultat part chez ton formateur dès que la grille est complète ; ton fichier, lui, ne quitte jamais ton navigateur.

NiveauSignifiePart des points
N1 InsuffisantAbsent, ou ne fonctionne pas.0 %
N2 À renforcerPrésent, mais des défauts visibles au premier regard.50 %
N3 SatisfaisantCorrect ; les défauts ne se voient qu'en zoomant.75 %
N4 ExcellentRien à reprendre, même à 100 %.100 %
Atelier 1 · noté · séances 1 à 3 · 1 h

Le carré de lancement

Datashop veut d'abord voir un visuel avant de lancer les trois autres : le post carré qui annonce l'opération. Tu le composes à partir du brief et de la charte du kit, tu l'exportes en PNG pour le réseau et en SVG pour l'archive du client, puis tu déposes les deux fichiers ici.

  1. Frame 1080 × 1080 nommée 01-datashop-jours-data-post-carre-1080x1080, grille de quatre colonnes et marge de 80 px (cours 4).
  2. Le contenu exact du visuel 1 du brief : accroche, remise, dates, un bouton d'action, datashop.fr et « Voir conditions en magasin ».
  3. Couleurs et polices enregistrées en styles avant d'être appliquées : tu t'en serviras dans les deux missions.
  4. Section Exporter : une ligne 1x PNG, une ligne SVG (cours 5), puis le bouton d'export.
Atelier 2 · Mission 1 · noté

Livrer la campagne « Les Jours Data »

Tu reçois le brief du service communication de Datashop. Tu livres les quatre visuels, la planche de validation et le fichier LISEZ-MOI, dans un dossier nommé datashop-jours-data-2026-09.

📄 Le brief : brief-client-datashop.txt

Les critères d’évaluation
CritèreCe qu'on regarde
Conformité au briefDimensions, mentions obligatoires, dates et prix exacts
HiérarchieLe message principal se lit en une seconde à 25 % de zoom
CohérenceOn reconnaît la même campagne sans lire la marque
LisibilitéContraste ≥ 4,5:1, rien dans les zones de sécurité
Propreté du fichierCalques nommés, styles utilisés, aucune couleur en dur
LivraisonNommage, poids, planche, LISEZ-MOI, lien en « Peut consulter »
🔍 Analyse. Cinq critères sur six portent sur autre chose que « c’est joli ». C’est exactement la répartition d’une évaluation professionnelle : le goût se discute, la conformité et la propreté se constatent.
Atelier 3 · Mission 2 · noté

Le client change d’avis — trois heures avant la mise en ligne

Nouveau message du client : la remise passe de −20 % à −25 %, la couleur d’action devient le Corail au lieu du Menthe, et il faut un cinquième visuel au format portrait 1080 × 1350. Il te reste trois heures.

Voir la démarche attendue

1 · La couleur. Si tu as travaillé en styles, c’est une modification : le style Datashop / Menthe appliqué aux boutons devient Corail — ou, mieux, tu appliques le style Datashop / Corail au composant bouton. Les quatre instances suivent. Si tu as posé les couleurs à la main, tu vas passer une heure dessus. C’est le but de l’exercice.

2 · La remise. Elle apparaît sur plusieurs visuels et parfois deux fois sur le même. Utilise la recherche (Ctrl/⌘+F) plutôt que l’œil : c’est le point 8 de la check-list, celui qui ne se rattrape pas.

3 · Le 5e visuel. Le 1080 × 1350 est proche du carré : pars du carré, étire le fond, redescends le bloc de texte, et profite de la hauteur supplémentaire pour aérer. Ne grossis pas l’accroche : la largeur n’a pas changé.

4 · La réexportation. Tous les fichiers, pas seulement ceux que tu as touchés — et la planche PDF, qu’on oublie une fois sur deux.

🔍 Analyse. Cette mission n’évalue pas ton graphisme : elle évalue la structure de ton fichier. Un fichier bien construit absorbe un changement de dernière minute en vingt minutes. Un fichier bricolé y passe la soirée. C’est la seule vraie différence entre un débutant et un professionnel — et elle se joue le premier jour, pas le dernier.