Formation : L'essentiel de Figma

JOUR 1 : IMMERSION DANS LE DASHBOARD PRINCIPAL DE FIGMA

Exercice Fil Rouge :

Tout au long de la formation Figma, un exercice pratique sera proposé pour mettre en application les notions théoriques acquises à chaque partie du programme.

L’essentiel des notions en webdesign à connaître

• Découvrir les métiers de la production web
• Comprendre les spécificités du webdesign
• Connaître l'histoire du webdesign

L’Atomic Design : une opportunité pour améliorer votre stratégie digitale ?

• L’Atomic Design ou comment faire pour que le design soit adapté à l’ensemble de vos devices ?
• Quels sont les enjeux de l’Atomic Design ? Quels sont ses avantages ?
• Maîtriser les outils et les méthodes nécessaires à l’application de l’Atomic Design

Créer et utiliser des objets avec Figma

• Identifier l’environnement de travail et les fonctionnalités principales de Figma
• Créer des formes : carré, rond, ligne, forme vectorielle
• Combiner des formes : union, soustraction, intersection
• Attribuer un aspect graphique aux formes : couleur, dégradé, bordure, ombre…
• Créer des textes : texte de point et paragraphe de texte
• Paramétrer les textes : police de caractère, corps de texte, graisse, interlignage
• Importer des images dans le plan de travail ou dans un conteneur
• Importer des SVG (images vectorielles) dans le plan de travail
• Appliquer une transformation à un objet : redimensionnement, rotation, miroir

Créer et utiliser des assets

• Utiliser une librairie externe
• Convertir un objet en composant
• Ajouter des états à un composant
• Ajouter des composants de la librairie sur le plan de travail
• Différencier composant et instance
• Réécrire sur un composant
• Remplacer un symbole par un autre
• Convertir un texte en style de texte
• Appliquer un style de texte à un texte
• Convertir un aspect graphique en style de calque
• Appliquer un style de calque à une forme
• Nommer et organiser les assets pour concevoir un design system

Mettre en forme une première maquette sous Figma

• Créer un plan de travail
• Poser une grille : colonnes, gouttières, marges
• Définir un espace automatique entre des éléments
• Aligner les éléments grâce au magnétisme et fonctions d’alignement
• Comprendre et prendre en main la fonctionnalité Auto Layout
• Nommer et organiser les calques

JOUR 2 : DONNER VIE À VOTRE PREMIÈRE MAQUETTE AVEC LA FONCTIONNALITÉ DE PROTOTYPAGE FIGMA

Prototyper et animer pour créer une expérience utilisateur unique !

• Prévisualiser le plan de travail
• Utiliser la position fixe au défilement
• Ajouter un scroll horizontal
• Naviguer entre les pages
• Ajouter des effets d’animation (mais attention ! trop d’animations tue l’accessibilité ;-)
• Utiliser les variants de composants

Astuces et fonctionnalités pour collaborer en direct ou en asynchrone sur Figma

• Prévisualiser sur mobile
• Publier un prototype en ligne
• Prévisualiser le prototype en ligne
• Publier un fichier en ligne
• Ajouter des commentaires
• Utiliser la fonctionnalité co-view
• Manier la fonctionnalité co-edit
• Publier une librairie d’assets
• Exporter des icônes au format SVG (images vectorielles) et des pages statiques
• Enregistrer un fichier en local pour plus de sécurité
• Inspecter les specs (CSS)
• Savoir comment protéger vos données avec Figma

Aller plus loin avec Figma

• Découvrir Figma Community : qu’est-ce que c’est ? à quoi sert-elle ?
• Utiliser Figma Community efficacement
• Ajouter des plugins et widgets à utiliser pour vos projets
• Découvrir les essentiels (plugins et pack d’icônes)
• Utiliser Figjam pour la gestion de projet : à quoi sert-il ?
• Découvrir des modèles Figjam dédiés à la gestion de projet