Introduction — Figma, la révolution du design collaboratif

Figma, lancé en 2016 par Dylan Field et Evan Wallace, est devenu en moins de 10 ans le standard mondial du design UI/UX. En septembre 2022, Adobe a annoncé son rachat pour 20 milliards de dollars, prouvant la position dominante du logiciel sur le marché. Selon Figma, plus de 4 millions d'utilisateurs actifs mensuels dont 80 % des entreprises du Fortune 500 utilisent l'outil quotidiennement.

La force révolutionnaire de Figma : il s'exécute 100 % dans le navigateur (Chrome, Edge, Firefox, Safari) avec collaboration temps réel comme Google Docs. Plusieurs designers et développeurs peuvent travailler simultanément sur le même fichier, voir les curseurs des autres et échanger des commentaires.

« Figma helps teams create, test, and ship better designs from start to finish. Build interactive prototypes, use design systems, and code with the world's design platform. » — Figma — À propos

1. Architecture Figma : équipes, projets, fichiers, pages

2. Interface Figma — anatomie

2.1 Zones principales

• Toolbar haut : Outils (Move V, Frame F, Rectangle R, Texte T, Plume P, Commentaire C), zoom, partage
• Panneau gauche : Layers (calques), Assets (composants), Pages
• Canvas central : zone de travail infinie
• Panneau droit : Design (propriétés), Prototype, Inspect (code pour dev)
• Barre du bas : zoom, échelle, mode de zoom

2.2 Raccourcis essentiels

3. Frames — la base de tout design

Une frame dans Figma est l'équivalent d'un cadre, un écran, ou un conteneur. Différence avec un Group : la frame a des propriétés CSS (background, border-radius, shadow, padding) et peut contenir d'autres frames imbriquées.

3.1 Créer une frame

1. Outil Frame (F)
2. Au lieu de dessiner, cliquez dans le panneau de droite : Figma propose des presets (iPhone 14, iPad Pro, MacBook Pro, Desktop 1440, Android Pixel)
3. Ou dessinez manuellement

3.2 Constraints (contraintes responsive)

Sélectionnez un élément dans une frame → panneau droit → section Constraints. Définissez le comportement quand la frame parent est redimensionnée :

4. Auto-layout — Flexbox de Figma

Lancé en 2020, Auto-layout est devenu en quelques années LA fonctionnalité killer de Figma. C'est l'équivalent du Flexbox CSS : les enfants d'une frame auto-layout se distribuent automatiquement selon les paramètres définis.

4.1 Activer Auto-layout

1. Sélectionnez un Frame ou un Group
2. Raccourci Shift+A ou bouton + à droite du panneau « Auto-layout »
3. Le panneau Auto-layout apparaît dans la barre de droite

4.2 Propriétés Auto-layout

4.3 Modes de redimensionnement (resizing)

• Hug contents : la frame s'ajuste au contenu (largeur automatique selon enfants)
• Fill container : la frame remplit le parent (flex: 1 en CSS)
• Fixed width / height : taille fixe en pixels

5. Components — composants réutilisables

Un component est un élément maître réutilisable. Chaque copie est une instance. Modifier le master propage le changement à toutes les instances. C'est l'équivalent des Symbols Sketch ou des Master Slides PowerPoint, mais en bien plus puissant.

5.1 Créer un component

1. Sélectionnez votre design (par exemple un bouton)
2. Clic droit → Create Component (Cmd+Alt+K)
3. Le composant apparaît avec une icône violette en losange dans le panneau Layers
4. Glissez-déposez depuis le panneau Assets pour créer des instances

5.2 Hiérarchie des overrides

Une instance peut être personnalisée (text, color, image) sans détacher du master. Les overrides sont conservés lors des mises à jour du master :

5.3 Detach Instance vs Reset Instance

• Detach Instance (Cmd+Alt+B) : casse le lien avec le master. L'instance devient un design libre, ne reçoit plus les mises à jour.
• Reset Instance : annule tous les overrides et restaure les valeurs du master.

6. Plugins et ressources communautaires

L'écosystème Figma compte plus de 50 000 plugins et millions de templates sur la Figma Community (figma.com/community). Plugins indispensables :

Synthèse — Points-clés à retenir

• Figma : 100 % navigateur, collaboration temps réel, racheté par Adobe 20 milliards USD
• Hiérarchie : Équipe → Projet → Fichier → Page → Frame → Layer
• Les frames supportent padding, background, border-radius (contrairement aux Groups)
• Les constraints définissent le comportement responsive d'un élément dans sa frame parent
• L'auto-layout (Shift+A) reproduit Flexbox CSS : direction, gap, padding, alignment, resizing
• Modes de resizing : Hug contents, Fill container, Fixed width/height
• Un component (Cmd+Alt+K) est un maître réutilisable, ses copies = instances
• Convention nommage components : Catégorie/Nom/État (avec slashes)
• 50 000+ plugins disponibles sur Figma Community (figma.com/community)

Pour aller plus loin

• Figma Help — Get Started
• Figma Help — Auto-layout
• Figma Help — Components Guide
• Figma Community — Plugins et templates