Sélectionner une page
Formations Design Webdesigner Formation Figma Avancé : Designez vos prototypes facilement

Formation Figma Avancé : Designez vos prototypes facilement

Formation figma avancé
Prix 1790€ HT / personne
3 jours (21 heures)

Paris | Classe Virtuelle

Dernières places Virtuelle uniquement
Cafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Aide au Financement 4000€ de Bonus Atlas en CPF

Présentation

Figma est un outil de conception d’interfaces et d’écosystèmes applicatifs qui vous permet de créer des prototypes réalistes du site web avant d’utiliser votre CMS.

Créé en 2016, il se positionne comme l’un des meilleurs outils de conception Web en opposant aux concurrents tels que Sketch ou Adobe XD. Figma vous permettra de travailler à plusieurs sur un projet commun. Grâce à ses solutions, vous n’aurez pas besoin de coder pour créer une maquette du site.

Notre formation Figma Avancé vous présentera les fonctionnalités de Figma et ses usages tels que : l’illustration vectorielle et UX/UI Design, la construction des fichiers .fig, le design des formes pour les interfaces web/app, ainsi que le partage et la connexion entre des écrans.

Suite à notre formation Figma Avancé, vous maîtriserez la réalisation de prototypes interactifs avec une optimisation de votre workflow.

 

Objectifs

  • Création d’interface : du wireframe au design d’interface
  • Réaliser des prototypes interactifs
  • Créer des éléments de design et des animations dans Figma
  • Mettre en place un workflow optimisé et collaboratif
  • Optimiser son process de design en utilisant layout / components / styles / variants
  • Créer des librairies et un design system
  • Exporter, visionner, partager son travail

 

Public visé

  • Webdesigners
  • Graphistes
  • UX designer
  • UI designer
  • Chef de projet
  • Développeur

 

Pré-requis

  • Avoir une licence payante Figma (pro à minima) est conseillé pour réaliser l’ensemble des TPs
  • Avoir une bonne connaissance web
  • Avoir une expérience en conception, développement ou gestion d’un projet web
  • Avoir une sensibilité au graphisme et à l’ergonomie
  • Avoir suivi notre formation Figma Initiation ou maitriser l’ensemble des points de celle-ci

Programme de notre formation Figma Avancé

 

INTRODUCTION À FIGMA

  • Qu’est-ce que Figma ?
  • Ses fonctionnalités
  • Grands principes de conception sur écran
  • Découvrir l’interface de Figma
  • Les raccourcis principaux

 

CRÉATION DES FORMES POUR DES INTERFACES

  • Créer des formes de différente complexité
  • Créer des frames et des calques
  • Transformation des éléments
  • Gestion des styles
  • Courbes de Bézier
  • Maîtriser les opérations booléennes
  • La typographie dans Figma
  • Manipulation et édition d’images
  • Découverte des fonctions de style d’objet
  • Créer sa librairie d’assets pour wireframes

 

CONSTRUCTION D’INTERFACE, DU WIREFRAME À L’UI

  • Méthodologie et organisation des fichiers
  • Comment organiser son projet de l’UX à l’UI
  • Mise en place des grilles et des repères
  • Utiliser Auto Layout pour créer des interfaces responsives
  • Mise en place des styles
  • Fonctionnalités des composants
  • Gestion des librairies
  • Ressources et modèles externes compatibles à Figma
  • Plugins et services complémentaires

 

OPTIMISATION DU WORKFLOW

  • Sélection des plugins pour Figma
  • Chemin d’accès vers le stockage des images et des icônes
  • Gestion du contenu personnalisé
  • Mises à jour du contenu importé
  • Automatisation des transformations des éléments sur les différents écrans
  • Automatisation des éléments en fonction du contenu

 

CRÉATION D’UN PROTOTYPE AVEC DES ANIMATIONS

  • Définir des frames du prototype
  • Définir les interactions
  • Utiliser Smart Animate
  • Création d’un système de navigation à plusieurs niveaux
  • Découvrir les différentes variantes d’interactions et d’animation

 

EXPORTATION ET PARTAGE DE PROJET

  • Adapter son projet au mobile
  • Collaborer sur un fichier
  • Exporter ses écrans en fichiers de différents formats (pdf, jpg et png)
  • Optimiser l’export d’image pour tous types d’écrans
  • Exporter des codes et des assets
  • Exportation des éléments sur Zeplin
  • Découvert des ressources collaboratives

Pour aller plus loin

 

Formation Figma

Formation HTML CSS JS

Formation Webflow

Langues et Lieux disponibles

Langues

  • Français
  • Anglais / English

Lieux

  • France entière
    • Paris
    • Lille
    • Reims
    • Lyon
    • Toulouse
    • Bordeaux
    • Montpellier
    • Nice
    • Sophia Antipolis
    • Marseille
    • Aix-en-Provence
    • Nantes
    • Rennes
    • Strasbourg
    • Grenoble
    • Dijon
    • Tours
    • Saint-Étienne
    • Toulon
    • Angers
  • Belgique
    • Bruxelles
    • Liège
  • Suisse
    • Genève
    • Zurich
    • Lausanne
  • Luxembourg

Témoignages

4 octobre 2024

Je recommande la formation

Laura F. de chez AG INSURANCE

Afficher tous les témoignages

4 octobre 2024

Je recommande la formation

Laura F. de chez AG INSURANCE
4 octobre 2024

Je recommande la formation

Olivier . de chez AG INSURANCE
15 mars 2023

Je recommande la formation

Siné T. de chez ORANGE MALI
15 mars 2023

Les + : La formatrice est très pédagogue. Tous les points que je souhaitais voir ont été appréhendé.

Margaux D. de chez CHATEAU DE COUTURELLE
15 mars 2023

Les + : la collaboration des équipes, le partage des ressources etc

Les – : RAS

Je souhaite suivre : Mobile, inforgraphie, IA.

En synthèse : TRÈS BONNE FORMATION, J’AI AIMÉ

Mahamadou S. de chez ORANGE MALI

Noter la formation

Prix 1790€ HT / personne
3 jours (21 heures)

Paris | Classe Virtuelle

Dernières places Virtuelle uniquement
Cafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Aide au Financement 4000€ de Bonus Atlas en CPF

UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?

Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.

ILS SE SONT FORMÉS CHEZ NOUS

partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp
partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp