Jessica Trocmé Masterclass/Créez des UI Design Responsive avec Figma en 4h

  • 297 € ou 3 paiements mensuels de 99 €

Créez des UI Design Responsive avec Figma en 4h

  • Cours
  • 31 Leçons

Plongez dans l'UI Design Responsive avec 'Figma Express' – une formation concise de 4 heures que j'ai conçue spécialement pour les débutants et les designers de niveau intermédiaire. Apprenez à utiliser Figma pour créer des designs adaptatifs, avec un focus sur les dernières fonctionnalités pratiques. Bénéficiez d'un accès à vie, y compris les mises à jour futures, pour garder vos compétences de design à jour. Parfait pour ceux qui veulent rapidement maîtriser Figma sans se perdre dans des tutoriels complexes.

LE DÉFI DU DESIGN RESPONSIVE

Vous voulez apprendre à créer des UI design responsive sous Figma, mais vous vous sentez submergé par la quantité de ressources ?

MA SOLUTION : FORMATION CIBLÉE

  • Rejoignez "Figma express", ma formation pour maîtriser l'UI Design sous Figma en 4h sans perdre de temps.

  • Conçue spécialement pour les débutants et les designers de niveau intermédiaire, cette formation vous guide à travers les dernières mises à jour et fonctionnalités pratiques de Figma.

  • Maîtriser auto-layout et les variables (Text / Color / String / Boolean)

AVANTAGES DE LA FORMATION

  • Apprentissage bien structuré : Gagnez du temps et concentrez vous sur ce qui est important pour pouvoir maîtriser Figma rapidement.

  • Accès à Vie et Mises à Jour : Bénéficiez d'un accès à vie à la formation, y compris toutes les futures mises à jour.

  • Contenu Pratique et Direct : Apprenez par l'exemple avec des projets concrets pour appliquer immédiatement vos compétences.

Bonnes pratiques à mettre en place

En combinant les principes de nommage cohérents et l'approche de l'Atomic Design, tu seras en mesure de structurer tes projets Figma de manière efficace, de collaborer de manière fluide avec ton équipe et de créer des designs cohérents et réactifs.

Optimise ton flux de travail

Nous ne nous limiterons pas seulement à la création d'interfaces réactives avec Figma pour l'exemple Airbnb. Nous explorerons également les bonnes pratiques pour optimiser ton flux de travail et améliorer la collaboration avec ton équipe.

Bonnes pratiques à mettre en place

Nommage des pages, des calques et des composants, en utilisant une approche basée sur l'Atomic Design. Tu apprendras à structurer tes projets Figma de manière logique et organisée, en utilisant des noms clairs et des conventions cohérentes. Cette approche facilitera la recherche d'éléments spécifiques et améliorera la collaboration avec ton équipe.

Composants et auto-layout

Je te guiderai dans la création de composants réutilisables en utilisant l'Atomic Design. Tu découvriras comment organiser tes composants en atomes, molécules, organismes et modèles pour maximiser leur réutilisabilité et maintenir la cohérence de ton design. Cette approche te permettra d'économiser du temps et des efforts en réutilisant facilement des éléments de design dans tout ton projet.

Je m'engage à vous accompagner

Jessica Trocmé

EXPERTE FRANCOPHONE EN UX ET UI DESIGN

Experte en product design, la référence francophone, j'ai déjà accompagné des centaines d'élèves sur Figma.
Je partage mon expérience au travers de formations, de vidéos sur Youtube, LinkedIn, Instagram, Facebook et TikTok auprès de + de 21 000 followers.
Je t'aide à optimiser ton temps d'apprentissage.

Programme

Être à jour sur les fonctionnalités de Figma sans perdre du temps à chercher.

Comprendre le Design Responsive et son importance

  1. Découvrez les principes du design responsive et pourquoi il est crucial pour offrir une expérience utilisateur optimale

  2. Apprenez comment adapter les designs pour différents appareils et résolutions

  3. Explorez les meilleures pratiques pour concevoir des interfaces réactives et flexibles

Découverte des dernières nouveautés de Figma

  1. Familiarisez-vous avec les dernières fonctionnalités et mises à jour de Figma, notamment les variables pour une gestion optimisée des styles et les mises à jour d'auto-layout pour faciliter l'ajustement des éléments

  2. Comment les variables peuvent vous faire gagner un temps monstrueux sur tous vos prochains projets ?

  3. Apprenez à tirer parti de ces nouveautés pour améliorer votre workflow et créer des designs encore plus performants

Mise en place du projet Airbnb

  1. Configurez votre projet Figma en utilisant le design Airbnb comme exemple
  2. Apprenez à importer des ressources, à structurer les calques et à organiser votre projet pour une meilleure efficacité
  3. Explorez les grilles fluides et les contraintes pour faciliter la création de designs réactifs

Création de l'UI Design

  1. Explorez les techniques pour créer des mises en page flexibles et adaptatives

  2. Apprenez à optimiser l'expérience utilisateur et à gérer les interactions

  3. Comment organiser son fichier, ses pages et ses calques ?

  4. Quelle convention de nommage utiliser ?

  5. Concevez les éléments clés de l'interface Airbnb adaptables à toutes les tailles d'écran, en utilisant les fonctionnalités avancées de Figma

Adaptation pour les appareils mobiles et tablettes

  1. Découvrez comment adapter le design Airbnb pour les écrans de mobile et de tablette
  2. Explorez les techniques spécifiques pour optimiser la navigation, l'expérience tactile et les interactions pour chaque appareil
  3. Apprenez à utiliser les fonctionnalités avancées de Figma pour rendre vos designs réactifs et fluides

Témoignage vidéo

Aurore Diezma, fondatrice de MIRA Conception, une société spécialisée dans l'UX et l'UI Design.

Témoignages

Corinne

Chef de projet

Je viens de commencer la formation et c'est juste parfait !

Tes explications sont claires, pas à pas, merci pour tes tips !

__

Anne

UX designer

Cette formation m'a appris à organiser efficacemment mes projets. J'ai pu mettre ça en application direct !

Grâce à Jessica, j'ai pu me mettre à jour sur les dernières nouveautés de Figma. Et je comprends l'intérêt des variables, une fois fait j'ai mis ça en place sur mon projet et après j'ai dupliqueé sur un autre projet ! C'est juste énorme le temps que j'ai gagné !

Et le gros + Jessica a été super réactive pour répondre à mes questions.

Merci beaucoup pour ce que tu fais !

Aélia

Product designer

Je voulais une formation pour me mettre à jour sur Figma. C'est chose faite.


Quand je lui ai posé une question plus complexe, elle n'a pas hésité à faire une visio avec moi !

Merci encore !

  • 297 € ou 3 paiements mensuels de 99 €

Créez des UI Design Responsive avec Figma en 4h

  • Cours
  • 31 Leçons

Tu vas perfectionner tes connaissances et apprendre à créer des UI Design vraiment Responsive. Et pour cela, nous verrons comment maîtriser les dernières mises à jour notamment sur auto-layout, Apprendre à utiliser et organiser ses variables... Et comme toujours je te partage les bonnes pratiques.

Questions fréquement posées

Si vous avez d'autres questions écrivez-moi dans le chat :)

A qui s'adresse cette formation ?

  • Débutant

  • UX / UI / Product / Web designer

  • Graphiste

  • aux personnes souhaitant passer de Sketch ou XD à FIGMA

  • aux personnes en reconversion en UX / UI / Web designer

  • Se perfectionner en responsive web design

  • Chef de projet

  • Toute personne devant utiliser FIgma dans le cadre de la conception et la création d'interface

Quels sont les pré-requis ?

Les pré-requis

  • une bonne connaissance du Web est conseillé

  • avoir une bonne maîtrise de son environnement informatique

  • connaître les bases de Figma

Combien de temps ai-je accès à la formation ?

La formation est accessible à vie et en illimité.

Tu avances à ton rythme. 

Tu bénéficies des mises à jour sans paiement supplémentaire.

De quoi serai-je capable grâce à cette formation ?

Tu seras capable de :

  • créer des composants responsives

  • créer des pages complètes de type accueil et détail.

  • reproduire des pages du site airbnb complètement responsive avec des composants complexes.

  • utiliser les variables de type : color, text, string, boolean

  • maîtriser auto-layout avec ses dernières mises à jour

  • bien organiser tes fichiers

  • bien structurer une partie du design system présent dans Figma : Librairie de composants, charte graphique etc...)

Que fait-on exactement dans cette formation ?

Figma est un outil de conception d'interface, collaboratif.

Cette formation va te permettre de créer des composants, des pages complètements responsives.

Et surtout, elle va te permettre de GAGNER BEAUCOUP DE TEMPS dans ton processus de conception.

Mais aussi de mettre en place de bonnes pratiques pour bien structurer ton projet et le reproduire sur tes autres projets = GAIN DE TEMPS.

Module 1 :

Introduction :

  • Responsive design, à quoi ça sert ?

  • Atomic design, qu'est-ce que c'est ?

Module 2 :

Mise en place du projet Airbnb dans Figma :

  • Bien structurer vos pages

  • Mise en place des grilles + Constraint

  • Mise en place des styles

  • Conventions de nommages

  • Exercices

Module 3 :

Création de l'UI Design :

  • Variables color & text

  • Tokenisation

  • Maîtriser auto-layout

  • Variables de type boolean

  • Variables : les modes

  • Variables de type string

  • Exercice

Module 4 :

Continuer le design pour aller plus loin :

  • Galerie responsive

  • LIste responsive

  • Carrousel responsive

  • Page détail

  • Exercice

Module 5 :

Prototype & partage :

  • Prototype animation type sticky

  • Partage

  • Prototype mobile

  • Exercice

Fichiers Figma à télécharger

Cette formation est-elle éligible au CPF ?

Mes formations ne sont pas éligibles au CPF.

Malheureusement, les démarches sont très lourdes pour une petite structure comme la mienne, l'agrément Qaliopi n'est pas toujours un gage de qualité surtout dans les milieux du web.

Sommes-nous accompagnés durant la formation ?

Tout à fait. En rejoignant la formation, Vous aurez accès au groupe privé de la formation, où vous pourrez me poser des questions.

Vous pourrez également me poser vos questions via le Chat. Je réponds rapidement.

J’ai peur de ne pas pouvoir réussir à faire la formation, que faire?

Pas de panique ! Vous réalisez la formation à votre rythme et je suis là pour vous accompagner de la meilleure façon. J'ai créé la formation de la manière la plus pédagogue possible pour vous permettre d’assimiler facilement les différents concepts.

Accès immédiat | 5 modules | 4h de contenu

Parcourez le programme !

1 - Introduction

1.1 Introduction
1.2 Responsive design
1.3 Atomic design

2- Mise en place du projet Airbnb dans Figma

Nous allons voir :

  • comment organiser ses pages et ses calques ?

  • Comment créer des grilles fluides et utiliser "Constraint" ?

  • Les conventions de nommage

  • Création des composants et styles globaux

2.1 Intro
2.2 Configuration des pages
2.3 Grilles fluides + Constraint
2.4 Composant de type liste scrollable et responsive
2.5 Attention aux problèmes d'icônes
2.6 Conventions de nommage
2.7 Exercice : Mets un place ton propre projet sur une autre thématique
Starter UI Kit - À télécharger

3 - Création de l'UI Design

Dans ce module, nous allons voir, les nouvelles mise à jour de Figma au travers, des variables, des composants et d'auto-layout.

3.1 Variables de type couleur et texte
3.1.1 Tokenisation
3.2 Maitriser auto-layout avec les nouvelles mises à jour : wrap / Min Max
3.3 Variables, les modes
3.4 Variables de type boolean
3.5 Variables de type string
3.6 Variables Typographies
3.7 Variables Gradient
3.8 Exercice

4 - Continuer le design pour aller plus loin

Dans ce module, nous allons revoir les points abordés précédemment, en allant plus loin, tout en complétant notre UI Design.

4.1 Intro
4.2 Galerie Responsive : auto-layout + img ratio
4.3 Liste Responsive : auto-layout (wrap + Min Max)
4.4 Carrousel Responsive
4.5 Complement design : page détail
4.6 Exercice

5 - Prototype et partage

Dans ce module, nous allons voir comment créer des liens simples entre des pages, mais aussi comment utiliser la position sticky.

5.1 Prototype animation type sticky + partage
5.2 Prototype Mobile
5.3 Exercice
UIdesign-responsive-JessUIdesignMasterclass-final.fig

Conclusion

6 Conclusion

Obtenir les mises à jour

Entrez votre email pour être informé des prochaines mises à jour, promotions ou sortie d'une nouvelle formation.

Vous vous inscrivez pour recevoir les newsletters de Jessica Trocmé Masterclass.