CATALOGUE Design et Infographie Formation Figma Apprendre Figma - Les fondamentaux Simuler des gestes tactiles avec Smart Animate dans Figma

Simuler des gestes tactiles avec Smart Animate dans Figma

Geste tactile et Smart Animate

Vidéo non disponible ! Réessayez plus tard

4h 41min

43 leçons

4,9

Transcription

Cette leçon fait partie de la formation

Apprendre Figma - Les fondamentaux

Formation incluse dans l'abonnement Elephorm

Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

DescriptionProgrammeAvis

4h 41min

43 leçons

4,9

Cette leçon fait partie de la formation

Apprendre Figma - Les fondamentaux

Formation incluse dans l'abonnement Elephorm

Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

Utilisation de Smart Animate pour des interactions avancées

Objectifs

À la fin de cette vidéo, vous serez capable de :
1. Créer et gérer des composants avec des variantes.
2. Utiliser Smart Animate pour des transitions fluides.
3. Configurer des déclencheurs de glissement pour des gestes tactiles.

Résumé

Découvrez comment utiliser Figma et Smart Animate pour simuler des gestes tactiles de manière efficace.

Description

Dans cette leçon, nous explorerons comment exploiter les capacités de Smart Animate dans Figma afin de simuler des gestes tactiles. Vous apprendrez à créer un composant master et à utiliser des instances de ce composant pour démontrer des transitions fluides entre différentes variantes. Nous mettrons en place des prototypes et configurerons des déclencheurs de glissement (drag) pour améliorer l'interactivité. En suivant ces étapes, vous pourrez développer des micro-interactions complexes et des transitions visuelles convaincantes, essentielles pour des expériences utilisateur modernes et engageantes.

Questions fréquentes

Qu'est-ce que Smart Animate dans Figma?

Smart Animate est une fonctionnalité de Figma qui permet de créer des transitions fluides entre des états différents d'un même composant.

Comment peut-on utiliser les déclencheurs de glissement dans Figma?

Les déclencheurs de glissement permettent de configurer des éléments que l'utilisateur peut glisser pour passer d'un état à un autre dans un prototype.

Quelle est l'importance d'utiliser Clip Content dans une frame?

Clip Content permet de masquer les éléments sortant de la limite d'une frame, aidant ainsi à gérer l'affichage de contenus sur différentes tailles de variantes.

Programme détaillé

Accueil de la formation

Module 1 - Introduction à Figma

Présentation de Figma et tarification 04:39

Création d’un compte et installation 05:25

Organisation: Team, projet, fichier Figma et Figjam 10:38

Ressources de la communauté 06:01

Module 2 - Projet Figma

Présentation de l’interface d’un fichier Figma 05:32

Frame et section 09:33

Création et gestion des différents types de grille 07:22

Calques et organisation des objets 06:36

Découverte des pages 06:02

Module 3 - Les outils de Figma

Outils de dessin et formes 07:48

Sélection et transformation des objets 06:00

Les attributs de fonds et contours 06:42

Les opérations booléennes 03:49

Gestion des couleurs et des dégradés 05:57

Gestion des textes 05:48

Module 4 - Les styles et variables dans Figma

Les styles de couleurs 06:16

Les styles de texte 03:30

Les styles d’effets 07:10

Introduction aux variables 07:42

Module 5 - Importation de ressources externes

Importation d’images et de SVG 05:37

Importation de vidéos 03:05

Module 6 - Responsive Design

Présentation de l’auto layout 10:23

Aller plus loin avec l’auto layout 08:18

Auto layout et wrapping 06:59

Module 7 - Les Composants

Création et utilisation des composants 08:17

Utiliser les variants 06:08

Propriétés des composants 09:35

Module 8 - Les Plugins

Découverte et gestion des plug-ins 05:40

Plug-ins incontournable de couleurs 08:55

Plug-ins incontournable de textes 07:42

Autres Plug-ins incontournables 10:43

Module 9 - Le mode prototype

Composants interactifs 06:12

Les différents système de Scroll 04:02

Position fixe et sticky 05:50

Les liens d’ancrages 03:45

Créer des Overlays 04:58

Utilisation du Smart Animate 09:43

Geste tactile et Smart Animate 05:07

Prototyper en utilisant les variables 06:59

Module 10 - Prototype, partage et export

Paramètres du mode prototype 05:24

Partage de design et commentaires 05:35

Présentation du mode Dev 06:31

Export 03:37

8 commentaires

4,9

8 votes

Mélanie K.

Il y a 2 mois

Formation très bien construit. Explication claire. Parfait pour avoir de solides bases. Hâte qu'il y ait une suite à cette formation.

Michaël S.

Il y a 8 mois

Bravo, l'outil est très bien expliqué et couvre toutes les fonctionnalités principales. De plus les exemples sont pertinent et facile à comprendre. A mon avis il manque toutefois, soit des exercices par section, ou alors un exercice en file conducteur le long de la formation.
Par contre les fichiers de ressources mentionnés dans la formation sont manquant, dommage.

Maxime 6.

Il y a 9 mois

très bien

Magalie G.

Il y a 11 mois

Super formation. Les explications sont claires, vous donnant une base solide pour bien commencer avec Figma. Cela vous aide à gagner du temps et à mieux vous organiser dès le début. Parfait pour les débutants. Merci!

Jacques-André G.

Il y a 1 an

Excellente formation. Précise, complète et bien découpée.
(Il n' y a plus qu'à...:-))

Stéphane V.

Il y a 1 an

J'avais entendu parler de Figma. Excellente formation avec un formateur très compétent et pédagogique qui donne des astuces de réalisation donc parfait pour comprendre les concepts et la mise en œuvre de l'outil.

laurent a.

Il y a 1 an

Très pédagogique.

camille a.

Il y a 1 an

Pour débuter. avec une base solide …très bonne pédagogie !
Bravo, il faut maintenant rajouter une autre pour monter le niveau dans la continuité de celle-ci