Formation Figma Design System : créer et faire vivre un design system
par Marie Gautheron- 2 jours - 14 heures
- 1 à 4 participants
- Intermédiaire
Formation Figma : maîtriser les variables dans Figma avec May Navarro
- 400 formateurs experts
- Présentiel ou distanciel
- Apprentissage par la pratique
Vous dupliquez encore vos maquettes pour gérer une version claire et une version sombre ? Vous passez un temps considérable à ajuster manuellement vos écrans pour le mobile, la tablette et le desktop ? Les variables Figma résolvent ces deux problèmes grâce à une seule et même fonctionnalité. Cette formation vous propose une méthode éprouvée pour construire des interfaces qui basculent en un clic entre light et dark mode, et qui s’adaptent à toutes les tailles d’écran sans dupliquer le moindre composant.
Votre formateur
Programme adaptable à vos besoins
Un socle complet que votre formateur personnalise selon vos priorités, avec des exercices pratiques réalisés directement sur vos sites, campagnes ou projets web.
Jour 1
Première demi-journée : comprendre et construire avec les variables figma
- Comprendre les variables Figma : découverte des quatre types de variables (couleur, nombre, string, booléen), organisation en collections et gestion des modes.
- Construire une palette de couleurs avec des variables : création d'alias, configuration des modes light et dark pour une gestion centralisée des couleurs.
- Cas pratique - palette et bascule light/dark : créer une collection de couleurs et faire basculer un set de composants existant entre mode clair et mode sombre.
Deuxième demi-journée : variables numériques, composants et responsive design
- Variables numériques pour l'espacement, le dimensionnement et les rayons d'angle : structurer et centraliser les valeurs de mise en page à l'aide de variables numériques.
- Lier les variables aux propriétés des composants : appliquer les variables aux propriétés de padding, gap, corner radius, couleurs de texte et de fond pour des composants entièrement pilotés par variables.
- Construire un système responsive avec variables et Auto Layout : combiner les modes de variables et l'Auto Layout pour créer des déclinaisons mobile et desktop sans duplication.
- Cas pratique - interface responsive et multi-mode : concevoir un écran (carte ou interface) qui s'adapte automatiquement entre mobile et desktop tout en basculant entre light et dark mode.
Formation personnalisable sur demande.
Un échange avec votre formateur définira le programme et les exercices dont vous avez besoin, alignés sur vos objectifs professionnels.
À qui s’adresse la formation ?
Public
UX/UI designers, product designers et design system managers souhaitant structurer leurs interfaces. Graphistes en reconversion vers le digital, développeurs front-end désireux de comprendre la logique des design tokens. Freelances et étudiants en design intéressés par les bonnes pratiques de conception scalable.
Prérequis
Une connaissance de base de l’interface Figma est nécessaire : manipulation des calques, des frames et des composants. La maîtrise de l’Auto Layout est un plus, mais pas obligatoire, un rappel express est prévu en début d’après-midi. Les participants doivent disposer d’un ordinateur avec accès à internet et d’un compte Figma gratuit (la version web suffit).
Moyens et outils
Moyens
La formation se déroule sur Figma en version web, accessible gratuitement sans installation. Un support de cours au format PDF est fourni à chaque participant. Un fichier Figma d’exercices partagé, incluant un set de composants de départ, est mis à disposition. Des ateliers pratiques guidés en direct alternent avec des corrections collectives pour ancrer les apprentissages.
Outils utilisés pendant la formation
-
Figma
Tarif de la formation
En présentiel ou distanciel, la formation s’organise dans vos locaux, dans un lieu loué pour l’occasion ou en visioconférence, selon vos préférences.
1 jour - 7 heures
à partir de 1800€ HT
Prêt à vous former ?
Demandez votre devis, de la demi-journée au format sur-mesure.
Obtenir un devis
Réponse dans les 24h
Ce que vous apprendrez
Comprendre le fonctionnement des variables et des modes dans Figma.
Construire une palette de couleurs pilotée par variables pour gérer le light et le dark mode.
Mettre en place des variables numériques pour l'espacement et le dimensionnement.
Lier des variables aux propriétés des composants (couleur, padding, radius, gap).
Concevoir une interface responsive en combinant variables et Auto Layout.
Organiser une collection de variables structurée et réutilisable, sur le modèle des design tokens.
Ce qu’on aime dans la formation
« Les variables sont, à mes yeux, la fonctionnalité qui a le plus transformé ma façon de travailler sur Figma ces dernières années. Une fois la logique comprise, on ne revient plus en arrière : un seul fichier, un seul jeu de composants, et des déclinaisons light/dark ou mobile/desktop qui se font en un clic. En une journée, je vous transmets une méthode concrète pour structurer vos propres variables et gagner un temps précieux sur tous vos projets à venir. »
Questions fréquentes sur la formation Figma de May
Quels outils vais-je utiliser durant la formation ?
Uniquement Figma dans sa version web : aucune installation de logiciel n’est nécessaire, un compte gratuit suffit.
Avec quoi vais-je repartir à la fin de la formation ?
Vous repartez avec un fichier Figma personnel contenant une collection de variables fonctionnelle (couleurs et espacements), les composants light/dark et responsive réalisés pendant la journée, ainsi qu’un support PDF récapitulatif.
La formation est-elle axée sur la pratique ?
Oui, plus de la moitié du temps est consacrée à des exercices guidés et à deux cas pratiques complets, pour que vous puissiez appliquer immédiatement chaque concept abordé.
Ai-je besoin de connaître l'Auto Layout avant cette formation ?
Ce n’est pas obligatoire : les bases indispensables sont rappelées en début d’après-midi, juste avant d’aborder la partie responsive design.
Cette formation couvre-t-elle également les composants et les variants ?
La formation se concentre sur les variables et leur application au light/dark mode ainsi qu’au responsive design. Les composants et les variants sont utilisés comme support des exercices, mais ne font pas l’objet d’un enseignement détaillé : ce sujet est traité dans une formation dédiée.
Financer sa formation
Les formations alfie sont finançables jusqu’à 100 % par l’OPCO de votre entreprise ou sur fonds propres. Contactez votre RH ou votre direction pour faire le point.
La formation des indépendants se finance via un organisme qui s’appelle FAF. Les 3 principaux FAF sont le FIFPL, l’Agefice et le FAFCEA. Pour le connaître rapprochez vous de votre expert-comptable ou identifiez la convention collective qui s’applique à votre branche.
Les formations alfie ne sont pas éligibles au CPF. Des financements non automatiques via France Travail restent possibles, consultez votre conseiller pour étudier vos droits.
Contactez votre agence d’intérim pour activer vos droits à la formation auprès de l’organisme AKTO (ex-FAFTT) qui finance la formation des intérimaires.
-
Durée 1 jour - 7 heures
-
Participants 1 à 6 participants
-
Difficulté Débutant à expert
-
Prix 1800€ HT
Des questions ?
Appelez-nous : 02 55 99 46 86
Obtenir un devis
⚠️ Nos formations ne sont pas éligibles au CPF.
Brief complet, réponse rapide ! Pensez à inclure :
- qui doit être formé,
- quel niveau à l’apprenant sur le sujet,
- l’objectif de la formation,
- distanciel / présentiel (et le lieu).
On vous rappelle dans les 24h.
♿ Public en situation de handicap, nous écrire à bonjour@alfieformation.com
Les autres formations similaires
Formation Figma Auto Layout : maîtriser l'auto layout
par May Navarro- 1 jour - 7 heures
- 1 à 6 participants
- Débutant à expert