Figma Avancé : design & prototypage en Atomic Design

Design System

Détails

Durée 2 Jours
Prochaines dates

6-7 juin
12-13 septembre
4-5 novembre

Public cible Designers, Product Managers, Team Leader, Marketing Managers
Niveau Intermédiaire
Prix présentiel 1700 € HT/pers

DESCRIPTION

Figma s’est imposé comme l’outil de référence du Product Design. Ses fonctionnalités de collaboration, de design et de prototypage renforcent la productivité des équipes et la qualité des produits.

Cette formation s’adresse aux Designers, Product Managers, Team Leader, Consultants qui souhaitent s’initier à Figma à travers une méthode de conception d’interfaces modulaires et industrialisables.

OBJECTIFS PÉDAGOGIQUES

#1. Utiliser avec précision et rapidité Figma

#2. Adopter les principes de l’Atomic Design

#3. Concevoir des interfaces selon un Design System

#4. Collaborer avec plusieurs designers sur un même projet

#5. Animer des prototypes haute définition

MÉTHODES D'ENSEIGNEMENTS

Cette formation sera principalement constituée de théorie et d’ateliers techniques qui permettront d’être rapidement opérationnel. 

  • Support : un support de cours en français sera remis aux participants au format électronique via Figma 
  • Évaluation : Les acquis sont évalués tout au long de la formation par le formateur (Questions régulières, travaux pratiques, QCM ou autres méthodes). 
  • Formateur : le tout animé par un consultant-formateur expérimenté, nourri d’une expérience terrain 
  • Satisfaction : à l’issue de la formation, chaque participant répond à un questionnaire d’évaluation qui est ensuite analysé en vue de maintenir et d’améliorer la qualité de nos formations. 
  • Suivi : une feuille d’émargement par demi-journée de présence est signée par chacun des participants. 
  • Format : Cette formation peut être dispensée en format inter-entreprises ou intra-entreprise sur demande et en mode présentiel comme en distanciel. 

DURÉE

Les 2 jours sont constitués de présentations théoriques, d’ateliers pratiques et de démonstrations.

PRÉREQUIS

Cette formation s’adresse à des personnes qui sont familières de la conception d’interfaces. Il est nécessaire d’avoir préalablement utilisé Figma pour pouvoir aborder avec aisance les savoir-faire experts de la formation. Par ailleurs, une expérience en product design est recommandée.

PROGRAMME

JOUR 1 : INTRODUCTION FIGMA & ATOMIC DESIGN

__ Matin __

Introduction

  • Décrire le logiciel Figma et ses principaux usages
  • Identifier les fonctionnalités phares
  • L’interface Figma
  • Les raccourcis
  • Les préférences / paramètres

Design d’interface

  • Définir l’atomic design (comprendre les principes de l’atomic design )
  • Créer des interfaces avec des frames, calques, masques et éléments vectoriels et matriciels (images)
  • Générer des effets graphiques
  • Gérer la mise en page : ajouter et agencer des titres, des paragraphes et des styles

Mise en pratique & évaluation des connaissances 1/4

__ Après-midi __

Créer une interface selon les principes de l’atomic design

  • Prise de connaissance du projet fil rouge
  • Créer des composants (atomes / molécules / organismes)
  • Reproduire une interface du projet fil rouge sur la base de l’atomic design (concevoir)

Q&A + évaluation des connaissances 2/4

_____________________________________

JOUR 2 : MÉTHODOLOGIE & PROTOTYPAGE DU PROJET FIL ROUGE

__ Matin __

Optimiser sa méthodologie de conception d’interfaces

  • Mettre en place l’architecture d’un projet et l’interface finale
  • Mettre en place des grilles & des styles
  • Prendre en compte le responsive design

Savoir utiliser un design system, les  librairies et les plugins (aperçu)

  • Ajouter et gérer des librairies partagées par plusieurs documents
  • Organiser et nommer ses composants
  • Profiter des ressources et modèles externes (plugins)

Mise en pratique & évaluation des connaissances 3/4

__ Après-midi __

Créer un prototype

  • Créer des connexions entre les différents écrans
  • Maîtriser les différentes possibilités d’interactions et d’animations
  • Ajouter des liens externes

Exporter et partager son projet Figma

  • Exporter ses écrans en fichiers (pdf, jpg…) & les éléments de production (code et assets)
  • Visionner ses écrans sur un mobile
  • Partager ses écrans et prototypes

Mise en application sur le projet fil rouge

Q&A + évaluation des connaissances 4/4

Préinscription à la formation
Figma Avancé : design & prototypage en Atomic Design

    Formations sur mesure

    Besoin d’une formation adaptée à la taille de vos équipes ? Un mélange de plusieurs formations ? N’hésitez pas à nous contacter, nous trouverons une solution à vos besoins.

    NOS AUTRES FORMATIONS

    Developpeur Front end
    Front End Dev

    Migrer vers React

    3450 € HT/pers
    4 Jours
    Cette formation couvrira les techniques et les bonnes pratiques pour créer des applications Web modernes en utilisant le framework React...