Formation Figma : du design à l'intégration
La formation « Figma, du design à l'intégration » permet de concevoir efficacement des interfaces et optimiser le workflow entre design et développement web. De la création des composants à l'export pour l'intégration HTML/CSS.
Particulièrement dédiée aux webdesigners, intégrateurs et intégratrices, cette formation a pour objectifs de maîtriser les fondamentaux de Figma pour la conception d'interfaces, de savoir organiser efficacement ses fichiers et composants Figma, mais aussi d’optimiser le workflow entre design et intégration web (de la maquette au code HTML/ CSS).
Maquettes dynamiques, responsivité, modes d'affichage light / dark, vous saurez tout !
Que va vous apprendre cette formation ?
- Découvrir et apprivoiser l’interface de Figma, ses dashboards et design files
- Maîtriser la création d’interfaces avec composants, autolayouts et outils de formes simples
- Apprendre à organiser et animer vos prototypes pour des maquettes interactives
- Optimiser la collaboration grâce au partage, feedback et gestion des assets Figma
- Explorer les fonctionnalités avancées : tokens, dev mode et extraction de variables vers le code
Programme de la formation
Introduction à Figma
- Qu'est-ce que Figma ?
- Présentation de l'interface Dashboard
- Design file : Pages, Frames, Artboards et Layers
Bien débuter sur Figma
- Outils de formes simples
- Les variables : couleurs, espacements, polices, etc…
- Exercice : Création d’un mini UI Kit
- Quiz : Les autolayouts
- Les composants
- Les assets et la bibliothèque Figma
- Exercice : Création d’une navigation avec bouton
- Exercice : Création d’un hero avec bouton
Le prototypage
- Introduction au prototypage
- Détail des interactions
- Le prototypage avancé avec number et string
- Exercice : Animer une nav bar et des maquettes
Partage & feedback
- Partage et accès aux fichiers Figma
- Feedback
Les tokens
- Bonnes pratiques et sémantique
- Dark mode / Light mode
- Mobile / Desktop
- Exercice : Reprise de la nav bar en dark mode et light mode
Le dev mode
- Présentation de l’interface
- Spécifications et inspection des maquettes : mesures, paddings, gouttières,…
- Ready for dev & Playground
- Les changement avant / après (
git diff) - Téléchargement et gestions des assets
- Annotations des specs
- Devs ressources
Variables Figma vers le code
- Extraction de variables CSS avec plugin ou JavaScript ou avec une IA
- Code Syntax
- Exercice : Faire un “handoff” efficace
- Bilan et Quiz final
Informations complémentaires
Public
Webdesigners, intégrateurs et intégratrices et toute personne amenée à améliorer ses compétences sur l'outil Figma.
Objectifs
Maîtriser les fondamentaux de Figma pour la conception d'interfaces. Savoir organiser efficacement ses fichiers et composants Figma. Créer des maquettes et prototypes interactifs réutilisables. Optimiser le workflow entre design et intégration web. Faciliter le passage de la maquette au code HTML/CSS. Utiliser les fonctionnalités de collaboration et de documentation.
Prérequis
Connaissance du webdesign et prototypage en général, ainsi que de HTML et CSS en général. La connaissance préalable de Figma n'est pas indispensable.
Moyens pédagogiques
Durant chaque formation, les participants et participantes auront l’opportunité de mettre en application leurs apprentissages grâce à de nombreux cas pratiques et exercices. Ces exercices seront ensuite corrigés et explicités par le formateur ou la formatrice. Dans le cas de sessions inter-entreprises, à Strasbourg ou à Paris, la formation est dispensée dans les salles pédagogiques adaptées à des apprentissages informatiques : capacité de 1 à 10 personnes, équipement informatique fourni pour chacun des stagiaires, vidéo-projecteur et paperboard.
Suivi et appréciation des résultats
L'exécution de l'action de formation est suivie à l'aide de feuilles de présence émargées par demi-journée par les participants et le formateur. Sanction : attestation de présence. Un bilan des acquis est effectué à l'issue de la formation par questionnaire individuel en ligne et par les exercices réalisés durant la session.
Modalités de positionnement et d’évaluation
Le positionnement à l'entrée est évalué par questionnaire individuel en ligne (comportant des questions relatives au profil, aux attentes, aux connaissances initiales et aux prérequis techniques) ainsi que par échange e-mail lors de la prise de contact et de la préparation du dossier. Un entretien préalable par visioconférence a lieu dans le cas des groupes en intra.
Inscription et informations pratiques
Durée de formation
Lieux disponibles
Formatrice
Lisa Effenberger
Lisa crée de véritables expériences utilisateur et des interfaces intuitives. Designeuse Web UX / UI depuis plusieurs années, elle maîtrise Figma et plein de logiciels de PAO (Illustrator, Photoshop, Indesign).
Atouts de la formation
- Effectif réduit (jamais plus de 12 participant·e·s).
- Repas de midi offert chez Alsacréations (à Strasbourg).
- Formatrice à l’écoute, chacun peut intervenir à tout moment.
- Travaux pratiques réalisés en conditions réelles.
- Supports complets fournis.
Infos complémentaires
Date de mise à jour :
