Les bases de Figma, tout pour bien démarrer

Pourquoi Figma s’est imposé

Arrivé en 2015, Figma est devenu la référence du design d’interface et du prototypage. Trois raisons expliquent cette place : l’outil tourne entièrement dans le navigateur, il est collaboratif en temps réel, et sa version de base est gratuite.

Il dépasse aujourd’hui les 4 millions d’utilisateurs, et les équipes d’Apple, de Disney ou de Netflix travaillent dessus.

Côté marché, un designer qui maîtrise l’outil trouve sa place, et beaucoup de postes sont proposés à distance.

Un débutant, par mois

2500 à 3500 €

Un senior, à l’international

plus de 6000 €

Une précision avant de commencer : l’IA de Figma génère des maquettes convaincantes, mais dès qu’un client demande une adaptation, il faut savoir manipuler l’outil.

L’IA est une fonctionnalité, pas une finalité.

Trois plugins Figma à connaître

html.to.design

Tu colles l’URL d’une page en ligne, tu choisis la taille d’écran, et le plugin reconstruit la page dans ton canvas. Pas une capture : une maquette avec sa hiérarchie complète, dont chaque texte, chaque couleur et chaque image reste modifiable. Il propose au passage d’importer l’auto layout, les local styles et les variables. La version gratuite suffit pour travailler.

Content Reel

Il remplit une sélection de blocs gris avec de vraies images, des avatars, des icônes ou du texte. Tu sélectionnes tes rectangles, tu choisis le type de contenu, tu appliques. Si un visuel tombe mal, tu le sélectionnes seul et tu relances, ce qui évite les répétitions d’une carte à l’autre.

Un plugin d’export d’animation

Le troisième transforme un prototype Figma en animation exploitable sur un vrai site. Un menu burger animé dans Figma ressort en JSON ou en Lottie, réglable dans un éditeur dédié, fond transparent compris, puis s’intègre dans Webflow.

Ce que l’IA de Figma sait faire

Les outils d’IA vivent dans la barre d’outils. Le plus impressionnant est First Draft : tu choisis un site ou une application mobile, tu écris un prompt en français, et il structure une page entière avec ses sections, son copywriting et ses images. Tout se réajuste ensuite sans repartir de zéro :

• changer le style graphique proposé pour un autre registre ;
• basculer en version claire ou sombre ;
• modifier les couleurs de boutons et le corner radius global ;
• tester des polices de titre et de corps de texte ;
• ajouter une section par un prompt, du type une section d’avis clients avant le footer.

Les autres outils génèrent des images, renomment les calques de la hiérarchie, préparent du prototypage, traduisent et réécrivent les textes.

L’interface et les composants

Le designer tient en trois zones : la hiérarchie des calques à gauche, le panneau de style à droite dont les propriétés changent selon l’élément sélectionné, et la barre d’outils qui sert à poser frames, formes, textes, tracés et commentaires.

Le composant est la première vraie économie de temps. Une barre de navigation d’application se répète sur des dizaines d’écrans : transformée en composant, elle se met à jour partout depuis un seul endroit. Le composant principal porte un losange plein dans la hiérarchie et un cadre violet, les instances se glissent depuis les Assets. Deux niveaux au-dessus :

• les variantes, pour gérer des états, par exemple l’onglet actif d’une barre de navigation, choisi ensuite instance par instance ;
• les propriétés, qui exposent le texte d’un bouton ou un état actif ou inactif directement dans le panneau de droite, sans entrer dans le composant.

Local styles, variables et prototypes

Les local styles s’ouvrent en cliquant à côté de la maquette. Tout élément connecté suit son style : une couleur modifiée une fois se propage sur l’ensemble de la maquette. Les variables vont plus loin.

L’onglet prototype anime le tout. Chaque liaison combine un déclencheur, clic, survol ou glissement, une action, naviguer vers un écran, revenir, scroller vers une section, ouvrir un overlay, et une animation.

Smart Animate calcule l’interpolation entre deux écrans et produit les transitions les plus crédibles, y compris un simple survol de bouton ou une apparition au scroll.

Conclusion

Les bases de Figma tiennent dans cet enchaînement : une interface en trois panneaux, des composants pour ne rien répéter, des styles et des variables pour tout piloter depuis un point, un onglet prototype pour montrer le résultat en mouvement.