Summary  
This chapter explains how to implement event-driven UI controls to manage layout organization, toggle component visibility, and handle context-sensitive menu actions in an interface.

General domain of usage  
User interface design tools

### Renommer des projets
Double-cliquer sur le nom du projet en haut pour le renommer. Appuyer sur **Entrée/Retour** pour enregistrer les modifications.

## Principaux composants de l’interface

- **Pages et calques** : situés à gauche, utilisés pour organiser le contenu ;

- **Panneau de design** :
situé à droite, ce panneau contient les paramètres pour les workflows de design, de prototypage et d’animation ;

- **Barre d’outils** :
Positionnée sous la zone de travail, cette section comprend des outils qui seront abordés dans le prochain chapitre.


## **Menu déroulant**
Accessible via une icône en forme de flèche, ce menu comprend :
- **Nouvelle fenêtre** : ouvre une fenêtre Figma séparée ;  
- **Nouvel onglet** : similaire au bouton « Créer nouveau » ;  
- **Ouvrir dans le navigateur** : affiche le projet dans un navigateur ; 
- **Ouvrir un fichier depuis le presse-papiers** : coller et ouvrir des fichiers directement ;  
- **Fermer/réouvrir des onglets** : gérer les onglets et fenêtres Figma ; 
- **Plugins et échelle de l’interface** : ajuster l’échelle (ex. : 110 %) ou gérer les plugins ;  
- **Préférences** : accéder aux paramètres, guides d’aide, mises à jour et « À propos de Figma ».

#### **Icône Réduire l’interface**
Permet d’afficher ou masquer les panneaux gauche et droit.

#### **Icône de recherche**
Permet de trouver rapidement des ressources ou composants dans un projet.

## Mode Présentation
- Utiliser l’**icône Présenter** pour afficher les cadres dans des maquettes d’appareils (ex. : iPhone, MacBook) ;
- Changer l’appareil ou activer/désactiver le cadre de la maquette ;
- Passer en mode plein écran via un bouton en haut à droite.

### Options de partage
- Utiliser le **bouton Partager** pour partager des fichiers via des liens, des invitations par e-mail ou en copiant des liens développeur/prototype ;
- Définir les autorisations (lecture/modification) et accéder aux options pour publier dans la communauté ou obtenir un code d’intégration.

### Gestion des fichiers
Rechercher et filtrer les projets par :
 - **Type de fichier** : fichiers de design, tableaux FigJam, diapositives ;  
 - **Créateur, organisation ou dossier**.

### **Options d’affichage**
- Choisir entre la **vue grille/miniatures** ou la **vue liste** ;
- Trier par nom, date de création (plus ancien/récent).


Quelle fonctionnalité supplémentaire la version de bureau de Figma offre-t-elle par rapport à la version navigateur ?

En mode Présentation, que fait l’option « Afficher le cadre de l’appareil » ?

Apprenez tout, des bases de la conception d'interfaces utilisateur aux techniques avancées de prototypage et de collaboration. Découvrez comment créer des maquettes fonctionnelles, concevoir des mises en page visuellement impressionnantes et collaborer efficacement avec les équipes de développement grâce aux fonctionnalités puissantes de Figma. Parfait pour les débutants et les professionnels, ce parcours d'apprentissage combine des projets pratiques, des conseils d'experts et des applications concrètes pour vous aider à réussir dans le monde compétitif du design.

Découvrez ce qu'est Figma, son rôle dans la conception UI/UX, et comment naviguer dans son interface et ses outils. Explorez le tableau FigJam pour le brainstorming et la collaboration, ainsi que les pages et les cadres dans Figma, qui constituent la base pour organiser et structurer efficacement vos conceptions.

Découvrez comment les calques dans Figma permettent de garder votre conception organisée, explorez comment les formes groupées vous aident à créer des visuels impressionnants, et apprenez à styliser le texte de manière élégante en utilisant les outils de typographie.

Apprenez à placer des photos et des vidéos, à utiliser des masques et à appliquer des modes de fusion pour des designs dynamiques. Maîtrisez les couleurs, les dégradés, les boutons, les mises en page automatiques, les composants et les styles. Débloquez la puissance des plugins et des widgets pour renforcer votre créativité et optimiser votre flux de travail.

Explorez les colonnes, les grilles, les plugins et la structure parent-enfant des composants pour optimiser votre processus de conception.

Développer des wireframes basse fidélité, créer des prototypes interactifs, animer des designs et présenter efficacement le travail aux clients.

Project Setup in Figma

Renommer des projets

Principaux composants de l’interface

Menu déroulant

Icône Réduire l’interface

Icône de recherche

Mode Présentation

Options de partage

Gestion des fichiers

Options d’affichage

1. Quelle fonctionnalité supplémentaire la version de bureau de Figma offre-t-elle par rapport à la version navigateur ?

2. En mode Présentation, que fait l’option « Afficher le cadre de l’appareil » ?