Partager :
Apprenez à créer des interfaces modernes et interactives UX/UI Design
Découvrez nos Formations Figma à Lyon et développez les compétences nécessaires pour concevoir des interfaces web et mobiles, créer des wireframes, réaliser des maquettes et construire des prototypes interactifs. Outil collaboratif basé sur le cloud, Figma est aujourd’hui largement utilisé en UX/UI Design pour permettre aux designers, chefs de projet, développeurs et équipes digitales de travailler ensemble sur une même interface.
Devictio vous propose trois parcours Figma adaptés au niveau et aux objectifs des participants : une Formation Figma Niveau 1 de 3 jours consacrée aux fondamentaux de l’UX/UI Design, aux wireframes, à l’Auto Layout, aux composants et au prototypage ; une Formation Figma Niveau 2 de 2 jours pour approfondir les Design Systems, les variables, les composants avancés, le prototypage et le Dev Mode ; et une Formation Figma de 5 jours permettant de suivre une progression complète, de la conception d’une interface jusqu’à sa préparation pour les développeurs.
Très orientées vers la pratique, les formations permettent de travailler sur la création d’interfaces responsive, les composants réutilisables, les bibliothèques, les Design Systems, les prototypes interactifs et la collaboration entre designers et développeurs. Les programmes actualisés abordent également les fonctionnalités d’assistance et d’intelligence artificielle proposées par Figma lorsqu’elles sont pertinentes dans un workflow professionnel.
Infos pratiques Formation Figma
Pourquoi est-il important de connaître Figma ?
Figma est devenu un outil central pour concevoir des interfaces web et mobiles, créer des wireframes, réaliser des maquettes et construire des prototypes interactifs. Sa dimension collaborative permet aux designers, chefs de projet, développeurs et équipes digitales de travailler plus facilement sur un même projet. Se former à Figma permet ainsi de mieux maîtriser les méthodes actuelles de conception UX/UI, de prototypage et de collaboration design-développement.
À qui s’adressent les Formations Figma ?
Les Formations Figma s’adressent notamment aux UX/UI Designers, webdesigners, graphistes, chefs de projet digital, chargés de communication, professionnels du marketing, développeurs front-end et intégrateurs web. Le Niveau 1 convient aux personnes débutant avec Figma, tandis que le Niveau 2 s’adresse aux utilisateurs souhaitant approfondir les Design Systems, les variables, les composants avancés et le prototypage. Le parcours de 5 jours est adapté aux participants souhaitant acquérir une pratique plus complète, depuis la conception d’une interface jusqu’à sa préparation pour les développeurs.
Comment Figma se positionne-t-il par rapport aux autres formations Devictio et quelles formations sont complémentaires ?
Figma se situe au cœur de la conception UX/UI et en amont du développement web : il permet de structurer les parcours utilisateurs, créer des wireframes et des maquettes, concevoir des composants, réaliser des prototypes interactifs et préparer les éléments qui seront ensuite transmis aux développeurs. Il est ainsi particulièrement complémentaire de la Formation Développeur Web Full Stack PHP de Devictio : Figma permet de concevoir et prototyper l’interface, tandis que la formation Full Stack apprend notamment à l’intégrer en HTML/CSS et à développer les fonctionnalités front-end et back-end nécessaires à son fonctionnement.
Figma complète également les formations WebDesign pour approfondir la conception des interfaces, Photoshop et Illustrator pour créer et préparer les ressources graphiques, ainsi que les formations HTML/CSS et Responsive Web Design pour passer de la maquette à son intégration. Ces différentes formations permettent ainsi de développer des compétences complémentaires couvrant progressivement la conception graphique, l’UX/UI, le prototypage, l’intégration et le développement web.
Pourquoi suivre une Formation Figma chez Devictio ?
Devictio, organisme de formation professionnelle implanté à Lyon depuis 2007, privilégie les formations en présentiel et en petits groupes afin de favoriser la pratique, les échanges avec le formateur et l’accompagnement de chaque participant. Les Formations Figma peuvent également être organisées à distance ou en intra-entreprise, selon les besoins des équipes et des projets digitaux. Cette organisation permet d’adapter plus facilement les exercices au niveau des participants et aux usages professionnels de l’entreprise.
Quels financements sont possibles pour une Formation Figma ?
Les Formations Figma proposées par Devictio ne sont pas présentées dans le cadre du CPF. Pour les salariés, elles peuvent être intégrées au plan de développement des compétences de l’entreprise et faire l’objet d’une demande de prise en charge auprès de l’OPCO dont dépend l’employeur, selon les critères et modalités applicables. L’entreprise peut également financer directement la formation dans le cadre de son budget de développement des compétences.
Nos formations Figma
3 jours / 21 heures
2 jours / 14 heures
5 jours / 35 heures
Formation Figma sur mesure
Former ses salariés à Figma permet aux équipes communication, design, digital et développement de partager des méthodes et des outils communs pour concevoir leurs interfaces. L’entreprise gagne ainsi en autonomie et facilite les échanges entre les collaborateurs qui imaginent, valident et développent ses projets web et mobiles.
La Formation Figma Niveau 2 permet aux utilisateurs déjà autonomes d’approfondir les Design Systems, les variables, les composants avancés et le prototypage. Ces 2 jours de perfectionnement permettent également d’optimiser la collaboration entre designers et développeurs grâce notamment au Dev Mode et aux workflows professionnels de Figma.
Une Formation Figma en présentiel chez Devictio favorise la pratique, les échanges directs avec le formateur et la résolution immédiate des difficultés rencontrées pendant les exercices. Les petits groupes permettent également de mieux adapter l’accompagnement au niveau, au métier et aux projets professionnels des participants.
Notre programme de formation :
Référence de la formation : MSFIGMA526
Nombre de stagiaires max. : 5
Public visé :
- Graphistes et webdesigners
- UI/UX Designers débutants
- Chargés et responsables de communication
- Chefs de projet web et digital
- Professionnels du marketing
- Développeurs et intégrateurs web
- Créateurs de contenus numériques
- Toute personne amenée à participer à la conception d’un site web ou d’une application
Objectifs :
- Comprendre les principes fondamentaux de l’UX et de l’UI Design
- Prendre en main l’environnement Figma
- Organiser efficacement un fichier et ses pages
- Créer des wireframes
- Concevoir une interface web ou mobile
- Utiliser frames, grilles et contraintes
- Utiliser l’Auto Layout
- Créer des composants et variantes simples
- Créer une identité visuelle cohérente
- Adapter une interface aux différentes tailles d’écran
- Créer un prototype interactif
- Partager et présenter un projet
- Préparer les éléments destinés aux développeurs
- Découvrir les fonctionnalités actuelles d’assistance et d’IA de Figma
Compétences visées :
- Être capable de structurer un projet UX/UI dans Figma
- Savoir réaliser des wireframes et maquettes
- Être capable d’utiliser l’Auto Layout
- Savoir créer et utiliser des composants
- Comprendre les bases d’un Design System
- Être capable d’adapter une interface à différents formats
- Savoir créer et tester un prototype interactif
- Être capable de partager et présenter un projet
- Comprendre le passage du design vers le développement
Moyens techniques et pédagogiques :
- Apports théoriques et méthodologiques
- Démonstrations réalisées par le formateur
- Manipulation directe de Figma
- Exercices pratiques progressifs
- Création de wireframes et maquettes
- Réalisation d’un prototype interactif
- Projet pratique de synthèse
- Un ordinateur par participant
- Accompagnement individualisé par le formateur
Évaluation des résultats :
- Évaluation du niveau et des attentes en début de formation
- Questions de validation des acquis
- Réalisation d’un wireframe
- Création d’une interface graphique
- Utilisation de l’Auto Layout
- Création de composants
- Création d’un prototype interactif
- Évaluation du projet pratique final
Validation :
- Une attestation de fin de formation est remise au participant à l’issue du parcours.
Durée :
3 jours / 21 heures
Pré-requis :
- Maîtriser l’utilisation courante d’un ordinateur
- Être à l’aise avec la navigation web et la gestion des fichiers
- Disposer d’un compte Figma
- Aucune connaissance préalable de Figma n’est nécessaire
- Aucune connaissance en développement web n’est requise
Modalités d’inscription :
Les inscriptions sont possibles :
- Jusqu’à 48 heures avant le début de la formation, sous réserve des places disponibles, pour les financements en autofinancement ou via le plan de développement des compétences de l’entreprise.
- Environ 4 semaines avant le début de la formation pour les demandes de financement auprès d’un OPCO ou de France Travail, afin de permettre l’instruction du dossier.
Accessibilité aux personnes en situation de handicap :
Devictio s’engage à favoriser l’accès à ses formations aux personnes en situation de handicap. Pour étudier les possibilités d’adaptation de la formation à vos besoins, nous vous invitons à contacter notre référent handicap :
- 📞 04 72 64 25 19
- ✉️ formation@devictio.fr
Points abordés :
Formation Figma Niveau 1 – UX/UI Design et prototypage
Cette formation permet d’acquérir les fondamentaux de Figma pour concevoir des interfaces web et mobiles, depuis le wireframe jusqu’au prototype interactif. Les participants apprennent à structurer leurs maquettes, utiliser l’Auto Layout, créer des composants réutilisables et adapter leurs interfaces aux différentes tailles d’écran. Le programme aborde également les principes de l’UX/UI Design, la collaboration, le partage avec les développeurs et les fonctionnalités actuelles d’assistance à la conception. Un projet pratique permet de réaliser progressivement une interface complète pendant les trois journées.
Jour 1 – UX/UI Design, wireframes et prise en main de Figma
- Comprendre les différences entre UX Design, UI Design et WebDesign
- Identifier les principales étapes d’un projet UX/UI
- Comprendre les principes du design centré utilisateur
- Identifier les besoins et objectifs d’un projet
- Comprendre la notion de parcours utilisateur
- Appliquer les principes de hiérarchie visuelle, lisibilité et ergonomie
Découvrir l’environnement Figma
- Découvrir l’interface
- Comprendre l’organisation des équipes, projets et fichiers
- Créer et organiser les pages
- Créer des frames
- Utiliser les calques
- Créer des formes
- Créer et mettre en forme du texte
- Importer des images
- Utiliser alignements et distributions
Créer des wireframes
- Comprendre le rôle du wireframe
- Différencier basse et moyenne fidélité
- Structurer les principales zones d’un écran
- Organiser les contenus
- Créer les principaux éléments de navigation
- Construire un parcours simple
- Créer plusieurs écrans cohérents
Utiliser les grilles
- Créer une grille de mise en page
- Définir colonnes, marges et gouttières
- Structurer les contenus
- Créer une hiérarchie cohérente
- Préparer une interface adaptée au responsive design
Jour 2 – Maquettes, Auto Layout et composants
- Passer du wireframe à la maquette graphique
- Définir une palette de couleurs
- Choisir et organiser les typographies
- Créer une hiérarchie visuelle
- Intégrer images, icônes et illustrations
- Créer boutons, cartes, menus et formulaires
- Respecter cohérence et lisibilité
Utiliser l’Auto Layout
- Comprendre le principe de l’Auto Layout
- Créer des conteneurs adaptatifs
- Gérer alignements et espacements
- Définir les comportements de redimensionnement
- Créer des boutons adaptatifs
- Créer des blocs de contenus flexibles
- Imbriquer plusieurs Auto Layout
- Comprendre le rapprochement avec les logiques CSS
Créer des composants
- Comprendre le principe d’un composant
- Créer un composant principal
- Créer et utiliser des instances
- Modifier les propriétés d’une instance
- Créer des variantes simples
- Créer plusieurs états d’un bouton ou d’un composant
- Organiser et nommer les composants
Découvrir les bases d’un Design System
- Comprendre le rôle d’un Design System
- Créer des styles de couleurs
- Créer des styles typographiques
- Définir des espacements cohérents
- Organiser les composants réutilisables
- Découvrir le principe des variables
- Comprendre leur intérêt dans la cohérence d’une interface
Jour 3 – Responsive Design, prototypage et collaboration
- Comprendre les principes du Responsive Web Design
- Identifier les principales tailles d’écran
- Adapter une interface desktop au mobile
- Réorganiser les contenus selon le support
- Utiliser l’Auto Layout pour créer des interfaces flexibles
- Contrôler la cohérence entre desktop, tablette et mobile
Créer un prototype interactif
- Comprendre le rôle du prototype
- Créer des liens entre les écrans
- Définir les points de départ
- Créer des interactions
- Créer des transitions
- Créer des overlays
- Utiliser Smart Animate lorsque pertinent
- Simuler une navigation
- Prévisualiser le prototype
Tester l’expérience utilisateur
- Tester les principaux parcours
- Identifier les points de friction
- Recueillir des retours
- Corriger les éléments problématiques
- Comprendre le principe d’itération en UX/UI
Collaborer avec Figma
- Partager un fichier ou un prototype
- Gérer les droits d’accès
- Ajouter et répondre aux commentaires
- Travailler à plusieurs sur un fichier
- Présenter une maquette à une équipe ou un client
- Organiser le fichier pour faciliter le travail collaboratif
Préparer le passage au développement
- Comprendre les besoins d’un développeur front-end
- Inspecter les propriétés d’un élément
- Préparer les ressources graphiques
- Exporter images et icônes
- Découvrir le Dev Mode
- Structurer et nommer correctement calques et composants
Découvrir les fonctionnalités actuelles d’assistance et d’IA
- Identifier les fonctions d’assistance disponibles selon l’offre Figma utilisée
- Découvrir les possibilités de génération et de modification assistées
- Découvrir Figma Make lorsque disponible
- Comprendre les usages possibles de l’IA dans un workflow UX/UI
- Contrôler et retravailler les propositions générées
- Conserver la maîtrise de l’ergonomie et de l’identité visuelle
Projet pratique – Concevoir et prototyper une interface
- Analyser un brief
- Créer les wireframes
- Définir l’identité visuelle
- Créer les écrans principaux
- Utiliser l’Auto Layout
- Créer les principaux composants
- Adapter l’interface au mobile
- Créer les interactions
- Tester le prototype
- Présenter le projet final
Référence de la formation : MSFIGMA527
Nombre de stagiaires max. : 5
Public visé :
- UX/UI Designers
- Webdesigners
- Product Designers
- Graphistes intervenant sur des interfaces numériques
- Chefs de projet digital
- Développeurs front-end
- Professionnels utilisant régulièrement Figma
Objectifs :
- Optimiser l’organisation des fichiers Figma complexes
- Maîtriser l’Auto Layout avancé
- Créer des composants complexes et évolutifs
- Utiliser propriétés et variantes
- Créer et utiliser des variables
- Construire un Design System
- Créer et gérer des bibliothèques
- Comprendre les principes des Design Tokens
- Créer des prototypes avancés
- Structurer un workflow designer-développeur
- Exploiter le Dev Mode
- Utiliser les fonctionnalités d’assistance et d’IA dans un workflow professionnel
Compétences visées :
- Être capable de structurer des projets Figma complexes
- Savoir utiliser l’Auto Layout de manière avancée
- Être capable de créer des composants évolutifs
- Savoir utiliser les variables et modes
- Être capable de créer et maintenir un Design System
- Savoir construire des prototypes interactifs avancés
- Être capable d’organiser la collaboration designer-développeur
- Savoir utiliser le Dev Mode dans un workflow professionnel
Moyens techniques et pédagogiques :
- Démonstrations réalisées par le formateur
- Manipulation directe de Figma
- Analyse de fichiers et Design Systems existants
- Exercices sur Auto Layout, composants et variables
- Création d’un prototype avancé
- Projet pratique de synthèse
- Un ordinateur par participant
- Accompagnement individualisé par le formateur
Évaluation des résultats :
- Évaluation du niveau en début de formation
- Questions de validation des acquis
- Création de composants avancés
- Création et utilisation de variables
- Structuration d’un Design System
- Création d’un prototype avancé
- Préparation d’un fichier pour le développement
- Évaluation du projet pratique final
Validation :
Attestation de fin de formation envoyée par mail.
Durée :
2 jours / 14 heures
Pré-requis :
- Connaître l’interface et les principales fonctions de Figma
- Savoir créer des wireframes et maquettes
- Savoir utiliser l’Auto Layout
- Savoir créer des composants simples
- Savoir créer un prototype interactif
- Avoir suivi la Formation Figma Niveau 1 ou disposer de compétences équivalentes
Modalités d’inscription :
Les inscriptions sont possibles :
- Jusqu’à 48 heures avant le début de la formation, sous réserve des places disponibles, pour les financements en autofinancement ou via le plan de développement des compétences de l’entreprise.
- Environ 4 semaines avant le début de la formation pour les demandes de financement auprès d’un OPCO ou de France Travail, afin de permettre l’instruction du dossier.
Accessibilité aux personnes en situation de handicap :
Devictio s’engage à favoriser l’accès à ses formations aux personnes en situation de handicap. Pour étudier les possibilités d’adaptation de la formation à vos besoins, nous vous invitons à contacter notre référent handicap :
- 📞 04 72 64 25 19
- ✉️ formation@devictio.fr
Points abordés :
Formation Figma Niveau 2 – Design System et prototypage avancé
Cette formation s’adresse aux utilisateurs connaissant déjà Figma et souhaitant approfondir les Design Systems, composants avancés, variables, prototypage et workflows collaboratifs. Les participants apprennent à structurer des bibliothèques réutilisables, construire des interfaces complexes et faciliter la collaboration entre designers et développeurs. Le programme aborde également les nouveaux workflows associant design, prototypage, Dev Mode et fonctions d’assistance basées sur l’IA.
Jour 1 – Composants avancés, variables et Design System
- Analyser et optimiser un fichier Figma existant
- Structurer pages et sections
- Définir des conventions de nommage
- Organiser les composants
- Optimiser les performances du fichier
- Créer une architecture adaptée à un projet complexe
Approfondir l’Auto Layout
- Créer des structures imbriquées complexes
- Utiliser les comportements Hug, Fill et Fixed
- Créer des éléments adaptatifs
- Gérer espacements et alignements
- Créer des cartes, formulaires et menus flexibles
- Construire des interfaces plus proches des contraintes CSS
Créer des composants avancés
- Créer des composants imbriqués
- Créer plusieurs variantes
- Utiliser les propriétés de composants
- Créer des propriétés texte
- Créer des propriétés booléennes
- Créer des substitutions d’instances
- Créer des composants flexibles et réutilisables
- Organiser les différents états
Utiliser les variables
- Comprendre le rôle des variables
- Créer des variables de couleur
- Créer des variables numériques
- Créer des variables de chaînes de caractères lorsque pertinent
- Créer des collections
- Créer différents modes
- Construire un thème clair / sombre
- Utiliser les variables dans les composants
- Comprendre leur rôle dans la maintenance d’un Design System
Construire un Design System
- Définir les fondations graphiques
- Structurer couleurs, typographies et espacements
- Créer les composants principaux
- Définir les états des composants
- Créer des règles d’utilisation
- Créer une bibliothèque partagée
- Publier et mettre à jour une bibliothèque
- Comprendre le principe des Design Tokens
- Maintenir la cohérence entre différents projets
Jour 2 – Prototypage avancé, Dev Mode et workflows actuels
- Créer des interactions complexes
- Créer des prototypes utilisant des variables
- Créer des overlays avancés
- Créer des micro-interactions
- Utiliser Smart Animate
- Créer différents états interactifs
- Construire un parcours utilisateur complet
- Créer des prototypes plus réalistes
Tester et documenter l’expérience utilisateur
- Tester les parcours
- Identifier les points de friction
- Préparer un test utilisateur
- Recueillir les retours
- Prioriser les corrections
- Documenter les principaux choix UX/UI
Optimiser la collaboration
- Organiser les fichiers pour plusieurs intervenants
- Créer des conventions communes
- Utiliser commentaires et annotations
- Gérer versions et historique
- Présenter un Design System à une équipe
- Faciliter la communication entre designers, chefs de projet et développeurs
Utiliser le Dev Mode
- Comprendre le rôle du Dev Mode
- Inspecter les propriétés d’un composant
- Consulter dimensions, espacements et couleurs
- Identifier les variables et styles utilisés
- Préparer les ressources à exporter
- Faciliter la transmission vers les développeurs
- Comprendre les logiques de design-to-code
Découvrir les workflows Figma actuels et l’IA
- Identifier les fonctionnalités d’assistance à la conception disponibles
- Utiliser les fonctions IA pour explorer des variantes lorsque pertinent
- Découvrir les workflows de génération de prototypes
- Découvrir Figma Make selon les fonctionnalités disponibles
- Comprendre les possibilités de passage d’un prompt ou d’une idée vers une interface fonctionnelle
- Découvrir les workflows associant design et code
- Contrôler les propositions générées
- Maintenir la cohérence avec le Design System
Projet pratique – Construire un Design System et un prototype avancé
- Analyser un projet existant
- Définir les fondations du Design System
- Créer les variables
- Créer les composants et variantes
- Construire une bibliothèque
- Créer plusieurs écrans
- Créer les interactions avancées
- Tester le prototype
- Préparer le projet pour les développeurs
- Présenter et argumenter les choix réalisés
Référence de la formation : MSFIGMA528
Nombre de stagiaires max. : 5
Public visé :
- UX/UI Designers
- Webdesigners
- Product Designers
- Graphistes
- Chargés et responsables de communication
- Chefs de projet digital
- Professionnels du marketing
- Développeurs et intégrateurs front-end
- Toute personne souhaitant développer une pratique professionnelle de Figma
Objectifs :
- Comprendre les principes UX/UI
- Structurer un projet de conception d’interface
- Créer des wireframes
- Créer des maquettes haute fidélité
- Utiliser l’Auto Layout
- Créer des composants et variantes
- Utiliser les variables
- Créer un Design System
- Adapter les interfaces aux différentes tailles d’écran
- Créer des prototypes interactifs
- Créer des micro-interactions
- Tester les parcours utilisateurs
- Collaborer avec une équipe
- Utiliser le Dev Mode
- Préparer le passage vers le développement
- Découvrir et exploiter les workflows actuels liés à l’IA dans Figma
Compétences visées :
- Être capable de concevoir une interface web ou mobile professionnelle
- Savoir structurer un projet UX/UI
- Être capable de réaliser des wireframes et maquettes
- Savoir utiliser l’Auto Layout
- Être capable de créer des composants et variantes
- Savoir utiliser les variables
- Être capable de construire un Design System
- Savoir créer et tester des prototypes avancés
- Être capable de collaborer avec designers et développeurs
- Savoir préparer un fichier Figma pour son intégration
- Comprendre les workflows actuels associant design, prototypage et IA
Moyens techniques et pédagogiques :
- Apports théoriques et méthodologiques
- Démonstrations réalisées par le formateur
- Manipulation directe de Figma
- Exercices pratiques progressifs
- Création de wireframes et maquettes
- Exercices sur Auto Layout, composants et variables
- Création d’un Design System
- Prototypage interactif
- Projet fil rouge réalisé pendant les cinq journées
- Un ordinateur par participant
- Accompagnement individualisé par le formateur
Évaluation des résultats :
- Évaluation du niveau et des attentes en début de formation
- Questions de validation des acquis tout au long du parcours
- Réalisation de wireframes
- Création d’une maquette
- Utilisation de l’Auto Layout
- Création de composants et variables
- Création d’un Design System
- Création d’un prototype interactif
- Préparation du projet pour le développement
- Évaluation du projet fil rouge final
Validation :
Attestation de fin de formation envoyée par mail.
Durée :
5 jours / 35 heures
Pré-requis :
- Maîtriser l’utilisation courante d’un ordinateur
- Être à l’aise avec la navigation web
- Disposer d’un compte Figma
- Aucune connaissance préalable de Figma n’est nécessaire
Modalités d’inscription :
Les inscriptions sont possibles :
- Jusqu’à 48 heures avant le début de la formation, sous réserve des places disponibles, pour les financements en autofinancement ou via le plan de développement des compétences de l’entreprise.
- Environ 4 semaines avant le début de la formation pour les demandes de financement auprès d’un OPCO ou de France Travail, afin de permettre l’instruction du dossier.
Accessibilité aux personnes en situation de handicap :
Devictio s’engage à favoriser l’accès à ses formations aux personnes en situation de handicap. Pour étudier les possibilités d’adaptation de la formation à vos besoins, nous vous invitons à contacter notre référent handicap :
- 📞 04 72 64 25 19
- ✉️ formation@devictio.fr
Points abordés :
Formation Figma – UX/UI Design et prototypage professionnel
Cette formation permet d’acquérir une pratique globale de Figma pour concevoir, prototyper, structurer et partager des interfaces web et mobiles professionnelles. Les participants progressent depuis les fondamentaux de l’UX/UI Design jusqu’à la création de composants avancés, variables, Design Systems et prototypes complexes. Le programme aborde également la collaboration entre designers et développeurs, le Dev Mode et les workflows actuels associant conception, prototypage et intelligence artificielle. Un projet fil rouge permet de concevoir progressivement une interface complète et son Design System pendant les cinq journées.
Jour 1 – UX/UI Design et wireframes
- Comprendre UX Design, UI Design et WebDesign
- Identifier les besoins utilisateurs
- Analyser un brief
- Définir les objectifs d’une interface
- Comprendre les parcours utilisateurs
- Définir l’architecture des écrans
- Prendre en main Figma
- Créer et organiser pages et frames
- Utiliser les grilles
- Créer les premiers wireframes
- Construire un parcours simple
Jour 2 – Maquettes, Auto Layout et composants
- Transformer les wireframes en maquettes
- Créer couleurs et typographies
- Construire une hiérarchie visuelle
- Créer boutons, menus, formulaires et cartes
- Utiliser l’Auto Layout
- Créer des conteneurs adaptatifs
- Créer des composants
- Créer des instances
- Créer des variantes
- Organiser une première bibliothèque
- Adapter une interface au responsive design
Jour 3 – Prototypage et collaboration
- Créer un prototype interactif
- Créer les liens entre les écrans
- Créer transitions et overlays
- Utiliser Smart Animate
- Créer des micro-interactions simples
- Tester les principaux parcours
- Recueillir des retours
- Corriger la maquette
- Partager les fichiers
- Gérer commentaires et droits
- Préparer les premières ressources destinées aux développeurs
- Découvrir le Dev Mode
Jour 4 – Variables et Design System
- Approfondir l’Auto Layout
- Créer des composants imbriqués
- Créer des propriétés de composants
- Créer des composants évolutifs
- Comprendre les variables
- Créer des variables de couleur et de valeurs
- Créer plusieurs modes
- Créer un thème clair et sombre
- Structurer un Design System
- Créer et publier une bibliothèque
- Comprendre les Design Tokens
- Maintenir la cohérence entre plusieurs écrans ou projets
Jour 5 – Prototypage avancé, Dev Mode et workflows actuels
- Créer des prototypes plus complexes
- Créer des interactions utilisant des variables
- Créer des micro-interactions avancées
- Tester un parcours complet
- Préparer le fichier pour une équipe de développement
- Utiliser le Dev Mode
- Inspecter dimensions, couleurs et espacements
- Préparer les assets
- Documenter composants et Design System
- Découvrir les fonctions d’assistance et d’IA disponibles
- Découvrir Figma Make lorsque disponible
- Comprendre les workflows design-to-code
- Contrôler les propositions générées
- Finaliser et présenter le projet
Projet fil rouge – Concevoir une interface UX/UI complète
- Analyser le brief et les besoins utilisateurs
- Créer les wireframes
- Définir l’identité visuelle
- Créer les écrans principaux
- Utiliser l’Auto Layout
- Créer les composants
- Créer les variables
- Construire le Design System
- Adapter les écrans aux différents formats
- Créer le prototype
- Créer les interactions
- Tester les parcours
- Préparer le fichier pour le développement
- Présenter et argumenter les choix UX/UI
Catégories :
Mots-clés :
Partager :
Formation Figma Niveau 1 – UX/UI Design et prototypage
Dans les locaux Devictio à Lyon
1 490,00 €
496,67 € / jour
3 jours / 21 heures
Nos tarifs ne sont pas assujettis à la TVA, les prix s'entendent TTC.
Formation Figma Niveau 2 – Design System et prototypage avancé
Dans les locaux Devictio à Lyon
1 190,00 €
595,00 € / jour
2 jours / 14 heures
Nos tarifs ne sont pas assujettis à la TVA, les prix s'entendent TTC.
Formation Figma – UX/UI Design et prototypage professionnel
Dans les locaux Devictio à Lyon
2 590,00 €
518,00 € / jour
5 jours / 35 heures
Nos tarifs ne sont pas assujettis à la TVA, les prix s'entendent TTC.
Formation Figma Niveau 1 – UX/UI Design et prototypage
Formation à distance
1 490,00 €
496,67 € / jour
3 jours / 21 heures
Formation Figma Niveau 2 – Design System et prototypage avancé
Formation à distance
1 190,00 €
595,00 € / jour
2 jours / 14 heures
Formation Figma – UX/UI Design et prototypage professionnel
Formation à distance
2 590,00 €
518,00 € / jour
5 jours / 35 heures
Formation Figma Niveau 1 – UX/UI Design et prototypage
Formation sur mesure
Formation Figma Niveau 2 – Design System et prototypage avancé
Formation sur mesure
Formation Figma – UX/UI Design et prototypage professionnel
Formation sur mesure
Catégories :
Mots-clés :
Partager :
Formations complémentaires
Formation IA Générative Lyon
Cette formation pratique permet de découvrir et maîtriser les principaux outils d’IA générative, notamment ChatGPT, Claude et Gemini, de structurer des prompts efficaces et d’identifier les usages adaptés à son métier. Les participants travaillent sur des cas concrets : création de contenus, synthèse, analyse, automatisation, génération d’idées et optimisation de tâches professionnelles. Cette formation en IA générative s’adresse aux salariés, dirigeants, entrepreneurs, indépendants, responsables marketing ou communication, commerciaux, chefs de projet, fonctions support ainsi qu’aux personnes en évolution professionnelle souhaitant intégrer l’intelligence artificielle dans leur activité.
Formation Impress Lyon
Apprenez à créer des présentations claires et professionnelles avec notre Formation LibreOffice Impress à Lyon. En une journée, vous maîtriserez les fonctionnalités essentielles d’Impress pour concevoir, structurer et mettre en forme vos diapositives. Vous apprendrez à intégrer textes, images et objets graphiques, ainsi qu’à utiliser les transitions et animations. Cette formation pratique vous permettra également de préparer, présenter et exporter efficacement vos diaporamas. Organisme de formation depuis 2007, Devictio vous accompagne pour devenir rapidement autonome avec LibreOffice Impress.
Formation NIS2 Lyon
Devictio, organisme de formation à Lyon et Paris depuis 2007, propose une formation NIS2 pour comprendre les nouvelles exigences européennes en matière de cybersécurité. Identifiez les organisations concernées et les principales obligations imposées par la directive NIS2. Maîtrisez les exigences liées à la gouvernance, à la gestion des risques, à la sécurité des systèmes d'information et à la notification des incidents. Apprenez à évaluer le niveau de conformité de votre organisation et à identifier les actions prioritaires à mettre en œuvre. Construisez une première feuille de route de mise en conformité NIS2 grâce à des cas pratiques et des exercices opérationnels.
Habilitation Électrique Basse Tension électricien
Cette formation à l’habilitation électrique basse tension pour électricien B1V, B2V, BR, BC et BE essai prépare les professionnels électriciens à intervenir en sécurité sur les installations électriques basse tension. Alternant apports théoriques et mises en situation pratiques, elle permet d’acquérir les compétences nécessaires à l’habilitation adaptée aux missions exercées. Dispensée en présentiel sur Lyon ou en intra-entreprise sur toute la France, elle a une durée de validité de trois ans.
Habilitation Électrique Basse Tension non électricien
Nos formations en habilitation électrique basse tension pour non électriciens s’adressent aussi bien aux personnels non-électriciens, techniciens, agents de maintenance, chargés de travaux, chargés de consignation et professionnels amenés à réaliser des opérations spécifiques. Habilitation électrique B0 – H0 – H0V : formation destinée notamment aux personnels réalisant des opérations d’ordre non électrique dans un...
Formation Sensibilisation des collaborateurs aux cyberattaques Lyon
Cette formation de sensibilisation aux cyberattaques privilégie une pédagogie concrète. Les participants analysent des messages frauduleux, étudient des situations professionnelles et répondent à des quiz interactifs. Les exemples peuvent être adaptés au secteur d’activité de l’entreprise et aux fonctions des participants. La formation est accessible sans prérequis technique. Elle peut être organisée en inter-entreprises dans le centre Devictio à Lyon, en intra-entreprise dans vos locaux partout en France ou à distance en classe virtuelle.
Formation Cybersécurité et Intelligence Artificielle
Cette formation Cybersécurité et Intelligence Artificielle s'adresse aux responsables informatiques, RSSI, DSI, administrateurs systèmes et réseaux, chefs de projet, responsables métiers, consultants, dirigeants ainsi qu'à toute personne impliquée dans la transformation numérique de son entreprise. Disponible en inter-entreprises dans notre centre de formation de Lyon, en intra directement dans vos locaux partout en France ou à distance, cette formation s'adapte au niveau des participants ainsi qu'aux outils déjà déployés dans votre organisation.
Formation Cybersécurité Entreprise Lyon
Avec sa Formation Cybersécurité : Les fondamentaux de la sécurité des systèmes d'information, Devictio, organisme de formation à Lyon, vous accompagne dans la compréhension des principaux enjeux de la sécurité informatique et vous apporte les compétences essentielles pour identifier les risques, comprendre les mécanismes des cyberattaques et adopter les bonnes pratiques recommandées par les experts de l'ANSSI.