Figma Design UI UX À distance

Module 1 : Introduction
• Evolution des logiciels de création d'interfaces web
• Figma Navigateur / Figma Logiciel / Figma Mirror
• L'interface Figma
• Image pour l'écran : Pixels, RVB, 72 dpi
• Les différents modes colorimétriques (RVB, CMJN)
• Distinguer les images pour le web et les images pour le print.
• Les différents formats d'images pour le web (jpeg, png / png transparent, gif) : comment choisir ?
• Le format SVG pour Figma
• Bien nommer vos fichiers pour le web et organiser vos plans de travail

Module 2 : Outils les plus utiles
• Découverte de l'interface Figma et de ses principaux outils
• Utilisations des repères, des layouts/grids et règles
• Le zoom (est votre « meilleur ami » dans Figma)
• #Frames / Créer un espace de travail web efficaces (12 colonnes - Bootstrap)
• Layers : Pages / Calques
• Styles / Fill / Stroke / Shadows / Inner Shadows / Blurs
• Text
• Components, Auto-Layout, components interactive
• Différences entre Styles et Variables
• Dev mode (initiation)
• Formes vectorielles
• Alignements
• Couleurs / Dégradés
• Les raccourcis claviers les plus utiles.
• Et bien plus encore :)

Module 3 : Les indispensables
• Créer un nouveau document (Figma et introction à FigJam, Figma Slides)
• Enregistrer pour le web - Export @1x, @2x, @3x / Preview
• Transform / Edit / Rotate
• Group / Ungroup
• Alignement des artboards et des éléments graphiques
• Création de #Components

• Assets - Design System
• Auto-layout avancé
• Library
• Design System & Atomic Design (Initiation)
• Les plugin utiles pour Figma :
Comment installer des plugin, lesquelles utiliser ?
• Community Figma

Exercice pratique :
• Maquette graphique
>> Wireframes
>> Réalisation d'une home page de site web
>> Déclinaison de la home page afin de réaliser une page interne (page éditoriale)
>> Déclinaison de la home page en version mobile (Responsive Web Design)
>> Création de grille de construction, styles, de components...
>> Enregistrer images pour le web et ses différents formats
>> Exportation des écrans sur le Dev mode et/ou Zeplin à destination des développeurs web
>> Etude du Dev Mode / Zeplin

Module 4 : Site e-commerce
• Etudes des différents gabarits de page e-commerce
• Etudes de quelques sites e-commerce
Exercice pratique
• Création de maquettes graphiques e-commerce en utilisants les « Components »
• Bien organiser les #Frame, Pages et Calques.
>> Création de 8 maquettes graphiques (home page, liste des produits, fiche produit, panier)
>> Déclinaison dans les différents formats des 4 maquettes
>> Mobile First (Version mobile, puis version tablette, puis version Desktop)
>> Prototypages Figma

• Découverte de l'utilisation de FIGMA
• Utilisation de FIGMA, FigJam, Figma Slides, Figma IA et Dev Mode (ainsi que Zeplin au besoin).
• Mise en page Mobile, Tablettes et Desktop (Mobile First)
• Protypages
• Comment améliorer vos design UI à l'aide de Figma
• Comprendre les contraintes liées au web
• Savoir produire des fichiers pour l'écran
• Concevoir des interfaces web (UI) à destination des développeurs web, à l'aide de Zeplin.

• Web designer
• Designer UI et UX
• Community manager
• Responsable de communication
• Chef de projet web
• Personnes intéressées par le design et la création d'interfaces web

• Le stagiaire est familiarisé avec l'utilisation du web
• Connaissance de Photoshop et XD serait un plus.
• Connaissance des principaux réseaux sociaux (Facebook, X, Linkedin, Instagram...)
• Un sensibilité avec la mise en page, la typographie et la photo serait également un plus.

• Accueil des stagiaires dans une salle dédiée à la formation (si formation en présentiel)
• Documents supports de formation projetés
• Exposés théoriques et pratiques
• Étude de cas concrets
• Auto-positionnements
• Mise à disposition en ligne de documents supports à la suite de la formation

• Feuilles de présence
• Auto-positionnement en début et fin de formation par les stagiaires
• Questions orales ou écrites
• Mise en situation
• Formalisation à l'issue de la formation : Une attestation de fin de formation est délivrée à l'issue de la formation

• Je maîtrise l'évolution des logiciels de création d'interfaces web, notamment Figma.
• Je navigue aisément entre Figma Navigateur, Figma Logiciel et Figma Mirror.
• Je comprends et utilise les notions de pixels, RVB, et les différents modes colorimétriques (RVB, CMJN).
• Je différencie les images pour le web et celles pour le print, en choisissant les formats adéquats (jpeg, png, gif, SVG).
• J’organise mes fichiers et plans de travail pour le web de manière efficace.
• J'utilise les repères, layouts, grids et règles dans Figma pour structurer mes designs.
• Je crée et gère des #Frames, layers, styles, et j'applique des effets comme fill, stroke, shadows et blurs.
• Je maîtrise la création de composants, l'organisation des assets et l'utilisation des plugins dans Figma.
• Je réalise des wireframes et des maquettes graphiques pour des sites web responsives (desktop, tablette, mobile).
• Je prépare des maquettes de sites e-commerce et les exporte via des outils comme Zeplin pour les développeurs.

Modalité d'accès : Nous contacter : contact@mill-forma.fr

Accessibilité des personnes en situation de handicap : Nous contacter en cas de besoin d'accessibilité particulier pour un participant