2.6 UI - Composants & Variants

Figma est un outil de webdesign conçu pour créer et designer des maquettes web.  L'outil propose de nombreuses fonctionnalités permettant de gérer des éléments vectoriels, matriciels, de créer des wireframe, des maquettes UI, des prototypes web, etc. 

Dans ce chapitre nous faisons un tour à 360° des utilisations de Figma et de son interface :

1. Immersion dans le dashboard principal
2. Exemples d'utilisation de Figma
3. Découverte de Figma Community
4. Présentation des fonctionnalités du designer

Bon cours !

Avant de lancer tout projet de webdesign, il est important de préparer son fichier Figma. Dans chapitre nous préparons ensemble, chacune des pages qui vous seront indispensables pour la suite du projet.

Il existe de nombreuses règles en matière de webdesign qui sont importantes à connaitre. Dans ce chapitre nous explorons les principales tendances, habitudes consommateurs, idées reçus, et principes en matière de webdesign. Notre analyse se porte sur les aspects UX, UI et également sur l'enjeux d'accessibilité web. Nous finirons par une analyse de la page Client-First sur ces différents points. 

Dans ce chapitre nous réalisons ensemble la maquette UX et UI de la page Client-First. On se retrouve dans le designer de Figma pour mettre en application toutes les notions et fonctionnalités qu'on a vu dans les précédents chapitres. C'est parti pour maquetter !

Donnez vie à votre maquette avec la fonctionnalité de prototypage Figma. Dans ce chapitre, je vous apprends à créer vos premières animations dans Figma, et rendre l'interaction et la navigation possible entre les pages. Créez votre prototype web avant de lancer le développement.

Dans ce chapitre nous faisons un tour du projet pour préparer la migration de notre maquette Figma vers Webflow. Nous complétons et optimisons le design system de notre fichier, en nous assurant que chaque élément est à jour pour le développement web. 

Figma est un outil de webdesign collaboratif ! Dans ce chapitre je vous montre plusieurs astuces et fonctionnalités pour collaborer en direct ou en asynchrone sur Figma. Partagez votre projet, présenter une maquette, faites des feedbacks et collaborez en direct sur Figma.