CATALOGUE Design et Infographie Formation Figma Apprendre Figma - Les fondamentaux Comprendre et Utiliser les Propriétés des Composants

Comprendre et Utiliser les Propriétés des Composants

Propriétés des composants

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

Introduction aux Divers Types de Propriétés

Objectifs

L'objectif de cette vidéo est de vous rendre capable d’appliquer et de manipuler diverses propriétés de composants pour améliorer l'efficacité et la flexibilité de vos designs.

Résumé

Apprenez à manipuler les propriétés des composants de design pour optimiser vos workflows.

Description

Dans cette vidéo, vous allez approfondir vos connaissances sur les propriétés des composants. Vous découvrirez les différents types de propriétés et leur utilité, comme les propriétés de variant, les propriétés boolean, les permutations d’instances et les propriétés de texte.

Les exemples pratiques inclus dans cette leçon vous permettront de comprendre comment utiliser ces propriétés pour améliorer et personnaliser vos composants. Grâce à cela, vous serez en mesure de créer des designs plus flexibles et dynamiques, tout en optimisant votre temps de travail.

Nous commencerons avec une révision de l’utilisation des propriétés de variant à travers un exemple d’avatars, et nous explorerons ensuite les propriétés boolean pour contrôler la visibilité des éléments, ainsi que les permutations d’instances pour changer rapidement d’icône.

Questions fréquentes

Quel est le principal avantage des propriétés de variant?

Les propriétés de variant permettent de créer plusieurs états ou versions d'un composant, augmentant ainsi la flexibilité et la réutilisabilité du design.

Comment les propriétés boolean peuvent-elles être utilisées avec l’auto-layout?

Les propriétés boolean peuvent montrer ou cacher des éléments, ce qui, en combinaison avec l’auto-layout, permet une réorganisation dynamique et automatique du contenu sans effort manuel.

Quelle est l’utilité principale d’une propriété de permutation d’instances?

Les propriétés de permutation d’instances facilitent le changement rapide et efficace des composants imbriqués sans avoir à redéfinir manuellement chaque instance.

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