Figma : Initiation + Approfondissement

- Comprendre les bases de l’UI design Présentation de l'interface utilisateur (UI) La place de l’UI au sein de l’UX. Les éléments de l’UX Rôle de l’UI Designer - Installer Figma Créer un compte Les différentes formules Installer l’application Les projets et les équipes Gérer et organiser ses projets avec la version gratuite - Prendre en main Figma Découvrir l’interface Ajouter, modifier, supprimer des frames (espace de travail). Naviguer dans la zone de travail : zoomer, se déplacer Utiliser et paramétrer les grilles Ajouter des repères Créer des pages - Découvrir les outils Créer des formes de bases : Touches de contraintes, attributs de fond et de contour Gérer la couleur : Créer un style de couleur ou ajouter au document Créer des courbes avec la plume Transformer une forme standard en tracé Ajouter ou soustraire des formes Découvrir le panneau layers, créer des groupes de calques. Créer et éditer du texte : En ligne ou en bloc Choisir les polices à utiliser Redimensionner avec l’outil scale Créer et utiliser les styles de texte Transformer la boîte de texte Atelier : créer un logo avec Figma - Ajouter des plugins Choisir et installer un plugin Découvrir les plugins indispensables Utiliser les plugins - Manipuler les objets Importer une ou plusieurs images Déplacer des images Créer un masque sur une image Ajouter des effets Copier des tracés vectoriels depuis Illustrator Créer et modifier des composants Répéter des éléments et les aligner Atelier : créer une maquette d’appli de musique - Créer et organiser des styles Créer des styles de texte, les appliquer et les modifier Créer des groupes de style avec le renommage Créer des styles de couleurs ou d’effets Atelier : créer une maquette onepage - Créer des prototypes animés Créer des liens avec des ancres Créer des liens entre frames Gérer les paramètres d’animations Visualiser et tester les prototypes Tester sur Téléphone avec l’application mobile Atelier : créer une interface de messagerie - Travailler avec les composants et les autolayout Créer et modifier des composants Ajouter des propriétés aux composants Créer des variants Travailler en responsive avec l’auto-layout Gérer les défilements verticaux et horizontaux Atelier : créer une interface de site de recettes - Travailler avec HTML et CSS Inspecter le code de ses maquettes Les plugins pour exporter en HTML/CSS Atelier : exporter une maquette en HTML/CSS - Collaborer avec Figma Partager et commenter une maquette Travailler en simultané Utiliser les widgets Atelier : créer un design system en collaboration