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 12 décembre 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 MERCIER

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...

En savoir plus

Demander un devis ou déposer mon projet

Envoyer votre demande

À réception de votre demande, la validation et la mise en œuvre de votre projet sur une formation sera possible sous 48h.

Télécharger le programme

DEMANDER UN DEVIS POUR UNE FORMATION INDIVIDUELLE PERSONNALISÉE

Une formation rien que pour vous !
Le formateur recentre le programme sur vos priorités et l’organise à vos dates.

Envoyer votre demande

À réception de votre demande, la validation et la mise en œuvre de votre projet sur une formation sera possible sous 48h.

Télécharger le programme
  • Partager via facebook
  • Partager via Twitter
  • Partager via LinkedIn
    • Chargement

      Merci de patienter ...