Formation : L'essentiel de Figma

Maîtrisez le design d'interface et le prototypage

2 Jours - 14 Heures
Formation
Présentiel
Réf 10750

Retouche photo, création de CV, visuel ou template, projet de webdesign, projet marketing, maquette web UI, prototype web, brainstorming d’équipe …que vous soyez freelance, que vous travailliez en agence ou en entreprise, les utilisations de Figma sont multiples !

Positionné aujourd’hui parmi les leaders du marché des outils de design d’interface face à des concurrents tels que Sketch ou Adobe XD, Figma permet de travailler à plusieurs sur un projet commun et est aujourd’hui une référence pour les webdesigners.

Il est désormais possible de créer des prototypes interactifs, de gérer le responsive design et l’ajout d’animations, de générer du code CSS, mais aussi d’industrialiser la déclinaison graphique et de mettre au point des design systems.

Grace à ces solutions, plus besoin de coder pour créer la maquette de votre site !

C’est pourquoi, Comundi vous propose ces 2 jours de formation Figma avec un expert pour vous apprendre à manipuler cet outil avec efficacité et de façon ultra concrète !

Objectifs

Maîtriser toutes les fonctionnalités de Figma
Réaliser le prototypage ou la maquette graphique d'un site web responsive
Partager votre travail avec les parties prenantes d’un projet web (autres designers, développeurs, utilisateurs et clients)

Pré-requis

Être très à l’aise avec l’informatique
Avoir une 1ère expérience en conception, développement ou gestion d’un projet web (même petite !)
Avoir une sensibilité au graphisme et à l’ergonomie

Cibles

Responsable marketing et/ou communication
Chef de projet
Product owner
Développeur web
Web designer utilisateur d’un autre outil : Photoshop, Sketch, Adobe XD ou autres
Directeur artistique ou graphiste

Les plus

Déclinable en format individuel, intra-entreprise et sur-mesure

Modalités pédagogiques

Un expert du logiciel FIGMA sera à vos côtés pour une prise en main optimale de l’outil
Alternance entre théorie, démonstrations par l’exemple, études de cas et mise en pratique
Les accès au logiciel FIGMA vous seront fournis

Suivi et évaluation des acquis

Évaluation des acquis en amont via un questionnaire d’auto-positionnement et en aval via un questionnaire d’évaluation rempli par le formateur sur la base des mises en situation réalisées en formation
Distanciel : contenu et durée identiques + pédagogie adaptée + assistance technique 5j/7 (disponible par mail : [email protected])
Un support de cours est remis à chaque stagiaire

Indicateurs de résultats

Indicateurs de résultat et taux de réussite prochainement disponibles

Ce produit a été mis à jour le 29 février 2024

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

Kevin M. - UI Designer

Passionné par le webdesign et issu de la grande école de la Tech et des métiers du Digital HETIC, Kevin a monté son agence Studio 626 afin d’accompagner les PME et start-up en créant des solutions numériques et web sur-mesure : « Notre...