Figma en anglais : guide complet

Figma est disponible uniquement en anglais. Chaque menu, chaque option, chaque message d'erreur est en anglais. Si vous ne maitrisez pas le vocabulaire de l'interface, vous perdez du temps à chercher des fonctionnalites et vous ne pouvez pas suivre les tutoriels anglophones — qui représentent 95% des ressources disponibles.

De plus, lorsque vous collaborez avec des développeurs ou des designers internationaux dans Figma, vous devez pouvoir nommer vos layers, vos components et vos styles en anglais. Un fichier Figma bien nomme en anglais est un signe de professionnalisme.

Ce guide couvre le vocabulaire complet de Figma : interface, outils, layers, components, prototyping et collaboration.

La toolbar (barre d'outils) en haut de l'écran contient les outils principaux. Le canvas est la zone de travail centrale ou vous creez vos designs. Le layers panel (panneau des calques) se trouve à gauche, il affiche la hiérarchie de tous vos éléments.

À droite, le properties panel (ou design panel) affiche les proprietes de l'élément selectionne : position, taille, couleurs, typographie. En bas, la status bar affiche le niveau de zoom et les informations de connexion.

Le assets panel donne accès à vos components et styles reutilisables. Le pages panel permet de naviguer entre les différentes pages de votre fichier. Chaque page peut contenir plusieurs frames.

Le Frame tool (F) crée un frame — le conteneur de base dans Figma. Contrairement à un simple rectangle, un frame peut contenir d'autres éléments et définir des contraintes de responsive. Le Rectangle tool (R), l'Ellipse tool (O) et le Line tool (L) creent les formes de base.

Le Pen tool (P) permet de dessiner des chemins vectoriels personnalises, point par point. Le Pencil tool dessine des formes a main levee. Le Text tool (T) ajoute un text layer.

Le Slice tool decoupe une zone à exporter. Le Section tool (Shift+S) crée des sections pour organiser votre canvas — idéal pour séparer les pages ou les états d'un composant.

Pour les transformations : le Scale tool (K) redimensionne un élément en conservant ses proportions. Le Move tool (V) est l'outil de sélection par défaut. Le Hand tool (H) permet de naviguer dans le canvas sans déplacer d'éléments.

Dans Figma, tout est un layer (calque). Un group (Cmd+G) rassemble des éléments sans contraintes de layout. Un frame avec Auto layout (Shift+A) organisé ses enfants automatiquement en ligne ou en colonne — c'est l'équivalent du flexbox en CSS.

Le concept de constraints (contraintes) définit comment un élément se comporte quand son parent est redimensionne : fix (fixe), hug contents (s'adapte au contenu), fill container (remplit le parent).

Les boolean operations combinent des formes : union (fusion), subtract (soustraction), intersect (intersection), exclude (exclusion). Le flatten (Cmd+E) convertit le résultat en un seul path.

Pour nommer vos layers, adoptez une convention claire en anglais : "Header / Nav / Logo", "Card / Thumbnail", "Button / Primary / Default". Utilisez le slash (/) pour créer une hiérarchie. Les développeurs et designers qui ouvrent votre fichier vous remercieront.

Un component (Cmd+Alt+K) est un élément reutilisable. Le main component est la source de vérité ; les instances sont des copies liees. Modifier le main component met à jour toutes les instances automatiquement.

Les variants regroupent différents états d'un composant : Default, Hover, Active, Disabled. Vous les definissez avec des properties : "State=Default", "Size=Large", "Icon=True". Cela permet aux autres designers de configurer le composant via le properties panel.

Les styles sont des proprietes reutilisables : color styles (couleurs), text styles (typographies), effect styles (ombres, flous), grid styles (grilles). Les variables (introduites récemment) permettent de gérer les tokens de design : couleurs, espacements, tailles.

Le concept de detach instance (Cmd+Alt+B) deconnecte une instance de son main component — utile pour des modifications uniques, mais à utiliser avec parcimonie. Le swap instance remplace un composant par un autre du même ensemble.

L'onglet Prototype du properties panel permet de créer des interactions. Vous definissez un trigger (declencheur) : On click, On hover, On drag, While pressing, Mouse enter, Mouse leave, After delay.

L'action peut être : Navigate to (naviguer vers un frame), Open overlay (ouvrir une fenêtre modale), Swap overlay, Close overlay, Back (retour), Scroll to (defiler vers), ou Open link (ouvrir un URL).

Les animations (ou transitions) definissent comment le changement se produit : Instant, Dissolve, Move in, Move out, Push, Slide in, Slide out. Vous pouvez ajuster la duration (durée) et l'easing (courbe d'acceleration) : Ease in, Ease out, Ease in and out, Linear.

Le Smart animate interprete les différences entre deux frames et crée une animation fluide automatiquement — a condition que les layers aient le même nom. Le flow starting point définit le premier écran de votre prototype.

Figma est un outil collaboratif en temps réel. Le share button donne accès au fichier avec différents niveaux de permission : can view (lecture seule), can edit (modification), can view prototypes only.

Les comments (C) permettent de laisser des annotations directement sur le design. Chaque commentaire crée un thread (fil de discussion) que l'on peut resolve (marquer comme resolu).

Le Dev Mode (active dans la barre supérieure) est l'interface dediée aux développeurs. Il affiche les CSS properties, les spacing values et permet l'inspect (inspection) de chaque élément. Les développeurs peuvent copier le code CSS, iOS ou Android directement.

L'export permet de sauvegarder des éléments en PNG, SVG, JPG ou PDF. Vous pouvez définir le export scale (1x, 2x, 3x, 4x) pour les écrans haute résolution. Le batch export exporte plusieurs éléments simultanement.