Fiche de révision : Glossaire essentiel de Figma

📋 Plan du Cours

1. Espace de travail et structure
2. Composants et réutilisation
3. Mise en page et adaptation
4. Prototypage et développement
5. Styles et ressources visuelles

📖 1. Espace de travail et structure

🔑 Notions clés & Définitions

• Canvas : zone de travail principale dans laquelle on place les frames, composants, textes et images.
• Frame : conteneur utilisé pour créer une page, un écran ou une section d’interface.
• Layer : élément présent dans une composition Figma, comme un texte, une image, une frame, une forme ou un composant.
• Group : permet de regrouper plusieurs éléments afin de les déplacer ou de les manipuler ensemble.

📖 2. Composants et réutilisation

🔑 Notions clés & Définitions

• Component : élément réutilisable d’une interface, comme un bouton, un menu, une carte ou un champ de formulaire.
• Instance : copie liée à un composant principal et peut être mise à jour lorsque le composant principal est modifié.
• Variant : version différente d’un même composant, par exemple un bouton Default, Hover, Pressed ou Disabled.
• Component Set : groupe contenant plusieurs variantes d’un même composant.
• Properties : paramètres permettant de contrôler le comportement ou l’apparence d’un composant.

💡 Astuce mémo

Composant principal → instance → variante

📖 3. Mise en page et adaptation

🔑 Notions clés & Définitions

• Auto Layout : fonction qui organise automatiquement les éléments d’un composant ou d’une frame afin de créer des interfaces adaptées au contenu.
• Alignement : positionnement des éléments entre eux selon la gauche, la droite, le centre, le haut ou le bas.
• Contraintes : règles qui déterminent comment un élément se comporte lorsque sa frame change de taille.
• Responsive Design : principe consistant à concevoir une interface qui s’adapte aux tailles d’écran mobile, tablette et ordinateur.
• Grid : système qui organise les éléments d’une interface selon des colonnes, des lignes ou des espacements réguliers.

💡 Astuce mémo

Contraintes et Auto Layout → interface adaptée au contenu et à l’écran

📖 4. Prototypage et développement

🔑 Notions clés & Définitions

• Wireframe : maquette simplifiée d’une interface centrée sur sa structure et l’organisation des éléments, sans travailler nécessairement le design final.
• Prototype : version interactive d’une maquette qui simule la navigation et les interactions d’un site ou d’une application.
• Interaction : action déclenchée par l’utilisateur dans un prototype, comme un clic, un survol ou un glissement.
• Dev Mode : mode destiné aux développeurs qui permet notamment d’inspecter les dimensions, espacements, couleurs et propriétés des éléments.
• Mockup : présentation visuelle d’une interface dans un contexte réaliste, comme un site affiché sur un ordinateur ou une application sur un smartphone.

💡 Astuce mémo

Wireframe → maquette → prototype → Dev Mode

📖 5. Styles et ressources visuelles

🔑 Notions clés & Définitions

• Design System : ensemble de règles, composants, couleurs, typographies et styles utilisé pour garder une interface cohérente.
• Library : ensemble de composants et de styles pouvant être utilisés dans différents fichiers.
• Typography : gestion des textes, notamment la police, la taille, la graisse, l’interligne et l’espacement des lettres.
• Variable : valeur réutilisable pouvant être modifiée facilement dans plusieurs éléments, comme color-primary = #E31837.
• Assets : bibliothèque regroupant les composants et ressources réutilisables d’un fichier Figma.
• Style : paramètre enregistré et réutilisable, par exemple une couleur, une typographie ou une ombre.
• Spacing : distance entre les différents éléments d’une interface.
• Figma Community : espace où les utilisateurs peuvent partager et récupérer des templates, plugins, UI kits et icônes.