Figma pour les débutantes : mes astuces de graphiste autodidacte

Quand j'ai découvert Figma il y a deux ans, j'utilisais encore Canva pour tout. La transition m'a semblé intimidante au départ — tellement de panneaux, tellement de fonctionnalités, une logique si différente. Aujourd'hui je ne pourrais plus m'en passer. Voici tout ce que j'ai appris, dans l'ordre où j'aurais aimé l'apprendre.

Comprendre la logique des frames

Avant même de parler des composants, il y a une notion fondamentale à assimiler : les frames. Dans Figma, une frame est un conteneur — l'équivalent d'une div en HTML. Toute votre interface vit dans des frames.

La bonne pratique : créez une frame par écran (Mobile, Tablette, Desktop) avec les dimensions exactes de votre cible. Figma propose des presets pour les appareils les plus courants. Ça vous force à travailler dans des contraintes réelles dès le début, et ça évite les mauvaises surprises à l'intégration.

Les composants : la clé de tout

La première chose à vraiment maîtriser, c'est les composants. Créez un bouton, une carte, une navbar — une seule fois — et réutilisez-les partout. Si vous changez le composant parent (le "Main Component"), toutes les instances se mettent à jour automatiquement. C'est la logique des design systems.

La puissance des composants décuple avec les variants : vous pouvez créer un seul composant "Bouton" avec des variants pour chaque état (default, hover, pressed, disabled) et chaque taille (small, medium, large). En quelques clics, vous gérez toute la complexité sans dupliquer votre travail.

Les variables de couleurs et de styles

Définissez votre palette une fois dans les styles locaux. Ainsi, quand un client veut changer son bleu pour un vert, vous faites la modification à un seul endroit et tout le fichier se met à jour.

Depuis la mise à jour Variables de Figma, vous pouvez créer des tokens sémantiques : color/primary, color/background, color/text-muted... C'est la même logique que les variables CSS, et ça prépare un handoff bien plus propre avec les développeurs.

Auto Layout : pensez comme un navigateur

C'est la fonctionnalité la plus puissante de Figma pour les graphistes qui pensent en web. Auto Layout se comporte exactement comme le Flexbox du CSS : vos éléments s'adaptent automatiquement au contenu, ils se réorganisent, s'espacent, se centrent.

Quelques règles d'or : - Tout mettre en Auto Layout : boutons, cartes, navbars, listes… - "Hug" pour les dimensions qui s'adaptent au contenu, "Fill" pour celles qui s'étirent - Gap entre éléments plutôt que des marges manuelles - Padding défini dans le composant, pas en ajoutant des éléments vides

Quand vous commencez à penser en Auto Layout, vos maquettes deviennent presque automatiquement responsive-ready.

Organiser ses fichiers Figma

Un fichier Figma mal organisé, c'est un cauchemar à maintenir dans le temps. Voici la structure que j'utilise sur tous mes projets :

• ▸Page 1 — Cover : prévisualisation du projet, informations générales
• ▸Page 2 — Design System : tokens, composants, styles
• ▸Page 3 — Wireframes : maquettes basse fidélité
• ▸Page 4 — UI Design : maquettes haute fidélité par écran
• ▸Page 5 — Prototype : flux interactifs pour les tests

Nommez vos frames clairement : Home — Desktop, Home — Mobile, Checkout — Étape 2. Et utilisez les sections Figma pour regrouper les écrans par fonctionnalité.

Le prototypage et les interactions

Figma permet de créer des prototypes interactifs directement dans l'outil. C'est parfait pour tester des parcours utilisateurs et présenter vos designs aux clients de manière bien plus parlante qu'une série de screenshots statiques.

Quelques interactions clés à connaître : - Liens entre frames : créez des flux de navigation réalistes - Overlay : simulez des modals, menus déroulants, tooltips - Smart Animate : créez des transitions fluides entre les états d'un composant - Variables + conditions : simulez des états dynamiques (menu ouvert/fermé, formulaire rempli)

Montrer un prototype cliquable à un client, c'est incomparablement plus efficace que d'expliquer avec des mots. Et ça réduit les allers-retours de révision.

Les plugins indispensables

Figma a un écosystème de plugins très riche. Voici ceux que j'utilise au quotidien :

• ▸Unsplash : insérer des photos réelles directement dans Figma
• ▸Iconify ou Phosphor Icons : bibliothèques de milliers d'icônes gratuites et cohérentes
• ▸Content Reel : remplir les textes et images avec du contenu réaliste
• ▸Accessibility Checker : vérifier le contraste et l'accessibilité de vos maquettes
• ▸Figma to HTML : exporter du HTML basique depuis vos frames

Mes raccourcis indispensables

• ▸Ctrl + D : dupliquer un élément
• ▸Ctrl + G : grouper une sélection
• ▸Ctrl + Alt + G : créer un frame depuis la sélection
• ▸K : l'outil mise à l'échelle (scale)
• ▸R : outil rectangle / T : outil texte / L : outil ligne
• ▸Ctrl + [ / ] : envoyer en arrière / avant
• ▸Alt + clic sur un composant : sélectionner l'élément à l'intérieur
• ▸Ctrl + Alt + C : copier les propriétés / Ctrl + Alt + V : les coller
• ▸Espace + glisser : se déplacer dans le canvas

Pour les graphistes qui veulent coder

Figma génère du CSS pour chaque élément. Clic droit → "Copy/Paste as" → "Copy as CSS". C'est une passerelle fantastique entre le design et le code. Mais attention : le CSS généré est rarement production-ready. Prenez-le comme point de départ, pas comme résultat final.

Une habitude très utile : nommez vos calques comme des classes CSS. button-primary, card-project, nav-link… Ça crée une cohérence naturelle entre votre fichier Figma et votre code, et ça facilite énormément le handoff.

Figma est aujourd'hui bien plus qu'un outil de design — c'est un espace de collaboration, de documentation et de communication entre designers et développeurs. Investir du temps pour le maîtriser vraiment, c'est un des meilleurs retours sur investissement dans votre pratique créative.