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.
Durée de formation : 2 jours
Lieux de formation :- Présentiel à Strasbourg
- Possible en groupe (intra-entreprise)
Particulièrement dédiée aux webdesigners, intégrateurs et intégratrices, notre formation “Figma, du design à l’intégration” 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 !
Ce que vous apprendrez dans 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
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 script js ou avec une IA
- Code Syntax
- Exercice : Faire un “handoff” efficace
- Bilan et Quiz final
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.
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.
Dernière mise à jour de ces informations :
Besoin d'un financement ?
Une formation est un investissement : pour mieux vous permettre de vous former, des possibilités de financement vous sont proposées dont la prise en charge par votre OPCO.
Avant cette formation, préparez-vous avec :
À la suite de cette formation, nous vous recommandons :
Envie de connaître la date
de nos prochaines formations ?
Nous contacter
Téléphone : 09 54 96 50 50 Adresse e-mail : contact alsacreations point fr
Alsacréations10 Place du Temple Neuf
67000 Strasbourg, France