Accueil    Formations    Digital & Multimédia    Les essentiels de la créa    UX Design et Design Thinking ou le Design centré utilisateur    Figma - Design d'interface - Prototypages, mockups, wireframes

Partager cette formation Télécharger au format pdf Ajouter à mes favoris

Objectifs pédagogiques / Compétences visées

  • Créer des designs d'interfaces d'applications mobiles et de sites Web
  • Appliquer les bonnes pratiques de la conception d'interfaces
  • Travailler efficacement en équipe avec les outils collaboratifs
  • Prototyper et tester des interfaces interactives
  • Partager et exporter des projets pour faciliter les développeurs et les clients.

Niveau requis

Avoir de bonnes connaissances de l'environnement Web, et des connaissances de base du logiciel Adobe Photoshop. Avoir une première expérience en design d'interface et des notions d'ergonomie.

Public concerné

Webmasters, graphistes, directeurs artistiques, responsables de communication, chefs de projets, cadres, consultants, chef de projet Maîtrise d'Ouvrage (MOA), Maître d'Oeuvre (MO).

Programme

Introduction

  • Les étapes de conception
  • Le prototypage
  • Qu'est-ce que Figma ?
  • Les atouts et les enjeux
  • Figma App et Figma Cloud
  • Les logiciels phares de la création d'interface
  • Le Design system et l'Atomic design

Le processus du design

  • Qu'est-ce-que le design ?
  • Le processus de conception
  • Les tendances du design

Découvrir l'interface Figma

  • Découvrir l'interface
  • La barre de menu
  • Les panneaux (calques, frames, design...)

Créer un projet

  • Création d'un nouveau projet et fichier
  • Gérer les fichiers et les projets
  • Créer une Team

Design

  • Créer une frame
  • Travailler avec des grilles et des repères
  • Créer des formes simples et complexes
  • Importer des images
  • Masquer des images et des formes
  • Importer des icônes et des éléments vectoriels
  • Créer du texte
  • Importer de la Data

Les styles

  • Manipuler les couleurs
  • Travailler avec les styles et les effets
  • Créer des styles de couleurs et de textes

Les composants

  • Créer des composants
  • Manipuler les instances
  • Créer des composants imbriqués
  • Gérer les contraintes et Auto Layout
  • Appliquer les conventions de nommages

Prototyper

  • Créer des interactions entre frames
  • Manipuler les interactions basiques
  • Smart Animate
  • Visualiser le prototype
  • Installer l'application Figma Mirror

Collaborer et partager

  • Partager les fichiers
  • Gérer les droits d'accès (view, comment, edit)
  • FigJam : collaborer en équipe

Exporter

  • Exporter le prototype
  • Utiliser Inspect Mode pour l'intégration
  • Les services pour l'exportation (Avocode, Zeplin...)

Bonnes pratiques et astuces

  • Organisation des éléments
  • Installer et utiliser les principaux plug-ins
  • Importer des fichiers Sketch ou Adobe XD

Exemples de travaux pratiques (à titre indicatif)

  • Conception d'une interface
    • Réaliser une interface Web ou une application mobile à partir d'un kit UI fourni

Modalités d’évaluation des acquis

  • En cours de formation, par des productions
  • Et, en fin de formation, par un questionnaire d'auto-évaluation ou une certification (M2i ou éditeur)

Partager cette formation Télécharger au format pdf Ajouter à mes favoris

Vous souhaitez suivre cette formation ?

Cette formation est disponible en présentiel ou en classe à distance, avec un programme et une qualité pédagogique identiques.

Choisissez la modalité souhaitée pour vous inscrire :

Votre société a besoin d'une offre personnalisée ? Contactez-nous

Faites-nous part de votre projet de formation, nous sommes là pour vous guider.

Contactez-nous