La réponse la plus rapide à la question comment utiliser Figma n'est pas de lire la théorie, mais de commencer à concevoir tout de suite. Figma est un outil qui fonctionne dans le navigateur, propose un plan gratuit pour débuter et est devenu la norme de fait du secteur, tant pour la conception d'interfaces que pour le prototypage. Dans cet article, nous partons du principe que vous ne l'avez jamais ouvert : nous découvrons l'interface, créons votre premier frame, concevons une simple carte mobile avec les outils de base, puis rendons votre fichier partageable. L'objectif : repartir avec un design que vous aurez réellement réalisé.
Ouvrir Figma et créer son premier fichier
Pour commencer à utiliser Figma, il suffit d'aller sur figma.com dans votre navigateur et de créer un compte gratuit. Vous pouvez aussi télécharger l'application de bureau si vous préférez ; les deux utilisent le même cœur, donc aucune différence. Une fois connecté, un gestionnaire de fichiers (Files) vous accueille. Lorsque vous créez un nouveau design file avec le bouton en haut à droite, une surface vide et infinie s'ouvre. Dans le langage de Figma, cette surface s'appelle le canvas, et elle est vraiment illimitée : vous pouvez placer autant de designs côte à côte que vous le souhaitez.
Une habitude importante pour les débutants : nommez tout de suite votre fichier. Cliquez sur le titre en haut à gauche et tapez par exemple « Mon premier design ». Figma enregistre chaque modification automatiquement, donc inutile de chercher Ctrl/Cmd + S.
Découvrir l'interface : trois zones principales
Bien que l'interface de Figma semble chargée au premier coup d'œil, elle se compose en réalité de trois zones logiques :
- Panneau de gauche (Layers / Assets) : la structure arborescente de tous les calques de votre design est listée ici. À mesure qu'un design grandit, c'est votre carte.
- Zone centrale (Canvas) : l'espace de travail où vous dessinez. Zoomez avec la molette et déplacez la vue en maintenant la touche
Espace. - Panneau de droite (Design) : vous y réglez chaque propriété de l'objet sélectionné — taille, position, couleur, bordure, ombre. Quand rien n'est sélectionné, ce panneau affiche les réglages de la page.
La barre d'outils en haut contient les outils que vous utiliserez le plus. Chacun a un raccourci clavier, et les apprendre décuple votre vitesse : V pour déplacer, F pour un frame, R pour un rectangle, T pour le texte.
Qu'est-ce qu'un frame et pourquoi est-il la base de tout ?
Dans Figma, la base d'un design est le frame. Imaginez le frame comme une « boîte conteneur » : un écran de téléphone, une page web ou une carte de visite. Tout ce que vous y placez appartient à ce frame et se déplace avec lui. C'est l'équivalent dans Figma du concept de « plan de travail » (artboard) d'un logiciel de conception classique.
Quand vous appuyez sur F, des tailles prêtes à l'emploi apparaissent dans le panneau de droite : iPhone, Android, Desktop, tablette, et plus encore. Pour notre premier design, choisissons une taille iPhone 14 & 15 Pro (393 × 852). Un écran de téléphone apparaît sur le canvas. Notre surface de travail est prête.
Réaliser son premier design avec les outils de base
Concevons maintenant une simple « carte de profil » à l'intérieur de cet écran de téléphone. Procédons étape par étape :
- Arrière-plan : le frame étant sélectionné, réglez la couleur de Fill dans le panneau de droite sur un gris clair (par exemple
#F4F4F5). - Dessiner la carte : dessinez un rectangle avec
R. Pour arrondir les coins, réglez la valeur Corner radius sur16dans le panneau de droite et choisissez le blanc comme couleur de remplissage. Si vous le souhaitez, ajoutez une légèreDrop shadowdepuis la section Effects. - Ajouter un avatar : de nouveau avec
R, dessinez un petit carré, puis transformez-le en cercle en réglant le corner radius à la moitié de sa taille (pour un carré de 40×40, utilisez 20). - Ajouter du texte : appuyez sur
T, cliquez au-dessus de la carte et saisissez un nom. Réglez la police, la taille et la graisse depuis la section Text du panneau de droite. Ajoutez un sous-titre plus petit et gris en dessous.
Pour l'alignement, ma fonctionnalité Figma préférée entre en jeu : lorsque vous sélectionnez deux objets, des lignes guides rouges et des mesures de distance apparaissent entre eux. En rapprochant un objet d'un autre, il « s'aimante » automatiquement lorsque les centres s'alignent. Vous pouvez sélectionner plusieurs objets et les centrer avec les boutons d'alignement du panneau de droite, ou les répartir à intervalles égaux.
Petits conseils pour la couleur, la typographie et la mise en page
Pour un bon premier design, concentrez-vous sur la cohérence plutôt que sur le tape-à-l'œil :
- Peu de couleurs : un neutre (nuances de gris), une couleur principale et une couleur d'accent suffisent pour la plupart des interfaces.
- Espacement cohérent : travaillez avec des multiples de 8 (8, 16, 24, 32 pixels). Cette « grille de 8 points » rend instantanément votre mise en page plus professionnelle.
- Une seule police : au début, utilisez différentes graisses d'une même famille comme Inter ; quatre polices différentes à l'écran créent le chaos.
Pour dupliquer un élément, Ctrl/Cmd + D ou maintenir Alt en faisant glisser vous fait gagner beaucoup de temps. En cas d'erreur, Ctrl/Cmd + Z est toujours là pour vous.
Partager et prévisualiser le design
Quand votre design est prêt, vous pouvez faire deux choses. D'abord, l'afficher en plein écran comme sur un vrai appareil avec le bouton Present (lecture) en haut à droite. Ensuite, créer un lien avec le bouton Share et l'envoyer à un ami ou un client. C'est précisément là que réside la force de Figma : la personne à qui vous le partagez peut voir le design dans le navigateur sans rien installer, et même laisser des commentaires si vous l'autorisez.
Si vous voulez exporter une image, sélectionnez l'objet et téléchargez-le au format PNG, JPG ou SVG depuis la section Export en bas du panneau de droite. Pour le web, PNG ou SVG convient généralement ; pour l'impression, un PNG haute résolution fait l'affaire.
Questions fréquentes
Figma est-il gratuit ?
Oui, Figma propose un plan gratuit généreux pour un usage individuel. Avec lui, vous pouvez créer un nombre illimité de fichiers personnels et gérer un nombre limité de projets partagés. Pour débuter et apprendre, le plan gratuit est largement suffisant ; des fonctionnalités comme les équipes et l'historique de versions illimité arrivent avec les plans payants.
Je n'ai aucune expérience en design — puis-je quand même apprendre ?
Absolument. La courbe d'apprentissage de Figma est douce, et vous n'avez besoin ni de code ni de talent pour le dessin pour utiliser l'outil. Si vous commencez avec une petite carte comme celle de cet article et progressez en concevant un nouvel écran chaque semaine, vous saurez créer des interfaces de base en quelques semaines.
Dois-je utiliser Figma au lieu de Photoshop ?
Pour la conception d'interfaces (UI/UX), le prototypage et la collaboration en équipe, Figma est bien plus pratique car il fonctionne dans le navigateur et offre un partage en temps réel. Photoshop, lui, est puissant pour la manipulation photo et l'édition raster. L'objectif est donc différent : si vous concevez un produit numérique, Figma est le bon choix.
Prêt à réaliser votre premier design ? Si vous souhaitez mettre en place l'interface d'une marque, un logo ou un écran de produit complet de façon professionnelle, donnons vie à votre idée ensemble. Contactez-moi et parlez-moi de votre projet.