Vous rêvez de créer des interfaces magnifiques pour vos sites web ou applications mobiles, mais vous pensez que le design est réservé aux professionnels avec des années d’expérience ? Détrompez-vous ! Figma a révolutionné le monde du design en le rendant accessible à tous, même aux débutants complets.
Dans ce guide ultra-complet, vous allez découvrir comment maîtriser Figma pas à pas, de la création de votre compte jusqu’à la réalisation de votre premier design professionnel. Que vous soyez entrepreneur, développeur no-code, marketeur ou simplement curieux, ce tutoriel est fait pour vous.
Ce que vous allez apprendre :
Prêt à transformer vos idées en designs professionnels ? C’est parti !
Figma n’est pas un logiciel de design comme les autres. C’est une plateforme complète qui fonctionne directement dans votre navigateur web, sans installation compliquée ni ordinateur ultra-puissant. Imaginez Google Docs, mais pour le design graphique.
Les avantages qui font la différence :
Gratuit pour commencer – La version gratuite offre tout ce dont vous avez besoin pour créer des designs professionnels. Pas d’abonnement obligatoire, pas de période d’essai limitée.
Accessible partout – Que vous soyez sur PC, Mac ou même Chromebook, Figma fonctionne parfaitement dans Chrome, Firefox ou Safari. Votre travail est automatiquement sauvegardé dans le cloud.
Collaboration en temps réel – Plusieurs personnes peuvent travailler simultanément sur le même projet, voir les modifications en direct et laisser des commentaires. Parfait pour les équipes à distance.
Courbe d’apprentissage douce – Contrairement à Photoshop ou Illustrator qui peuvent intimider, Figma a été conçu pour être intuitif. Vous créerez votre premier design en moins d’une heure.
Utilisé par les pros – Des géants comme Uber, Airbnb et Microsoft utilisent Figma quotidiennement. En l’apprenant, vous maîtrisez un outil reconnu dans l’industrie.
Si vous avez lu notre article sur le développement no-code, vous savez déjà que créer un site sans coder est possible. Mais avant de construire, il faut designer ! Figma est l’outil parfait pour :
Étape 1 : Inscription Rendez-vous sur figma.com et cliquez sur “Sign up”. Vous pouvez utiliser votre compte Google pour vous inscrire en un clic, ou créer un compte avec votre email personnel. Confirmez votre adresse email et voilà, vous êtes prêt !
Étape 2 : Votre Tableau de Bord Une fois connecté, vous arrivez sur votre dashboard. C’est votre espace personnel où tous vos projets seront organisés. Pensez-y comme votre bibliothèque de designs.
Étape 3 : Premier Fichier Cliquez sur le gros bouton “+ New design file” en haut à gauche. Une page blanche s’ouvre : c’est votre canvas, votre toile vierge prête à accueillir votre créativité.
L’interface de Figma peut sembler intimidante au premier regard, mais elle est en réalité très logique. Visualisez votre écran divisé en trois sections principales.
Le Panneau de Gauche : Vos Calques C’est la liste complète de tous les éléments de votre design. Chaque forme, texte ou image que vous créez apparaît ici, organisé hiérarchiquement. Plus un élément est en haut de la liste, plus il apparaît au premier plan dans votre design.
Le Centre : Le Canvas Votre espace de travail blanc infini où la magie opère. C’est ici que vous placez tous vos éléments visuels. Vous pouvez zoomer, dézoomer, vous déplacer librement dans cet espace.
Le Panneau de Droite : Les Propriétés Quand vous sélectionnez un élément, ce panneau affiche toutes ses caractéristiques modifiables : couleur, taille, position, opacité, bordures, effets. C’est votre centre de contrôle.
La Barre d’Outils du Haut Tous vos outils de création sont alignés ici : formes, texte, dessin à main levée, et bien plus. Chaque outil a un raccourci clavier pour accélérer votre workflow.
[EMPLACEMENT IMAGE : Capture d’écran annotée de l’interface Figma avec les 3 zones surlignées]
Symbolisé par une flèche noire en haut à gauche, c’est l’outil que vous utiliserez 80% du temps. Il permet de sélectionner, déplacer et redimensionner tous vos éléments.
Actions essentielles :
Raccourci magique : Appuyez sur V à tout moment pour activer cet outil.
Les Frames sont des conteneurs spéciaux, comme des cadres photo numériques. Ils définissent les dimensions de vos designs et organisent votre travail.
Pourquoi utiliser des Frames ? Imaginez que vous concevez une application mobile. Sans Frame, vos éléments flottent dans le vide. Avec une Frame “iPhone 14”, vous savez exactement comment votre design apparaîtra sur ce téléphone.
Comment créer une Frame : Appuyez sur F ou cliquez sur l’icône Frame en haut. Sur la droite, Figma vous propose des formats prédéfinis : iPhone 14, iPad, Desktop 1440px, etc. Cliquez sur celui qui vous convient, et une Frame de cette taille apparaît sur votre canvas.
Astuce pro : Créez plusieurs Frames sur le même canvas pour comparer différentes versions de votre design côte à côte.
[EMPLACEMENT IMAGE : Exemples de différentes Frames (mobile, tablette, desktop)]
Rectangle (Raccourci : R) Le rectangle est l’outil le plus polyvalent. Vous l’utiliserez pour créer des boutons, des cartes, des conteneurs, des bannières. Pour créer un rectangle, appuyez sur R, puis cliquez et glissez sur le canvas.
Cercle/Ellipse (Raccourci : O) Parfait pour les avatars, les icônes rondes, les points décoratifs. Maintenez Shift en dessinant pour obtenir un cercle parfaitement rond plutôt qu’une ellipse.
Ligne (Raccourci : L) Pour créer des séparateurs, des soulignements, des connecteurs. Maintenez Shift pour tracer une ligne parfaitement horizontale ou verticale.
Polygone Pour des triangles, pentagones, hexagones. Une fois créé, vous pouvez modifier le nombre de côtés dans le panneau de droite sous “Count”.
Astuce design : Combinez ces formes simples pour créer des designs complexes. Un logo sophistiqué n’est souvent qu’une combinaison intelligente de cercles et rectangles !
[EMPLACEMENT IMAGE : Exemples de formes de base combinées pour créer des éléments UI]
Le texte est crucial dans tout design d’interface. Appuyez sur T ou cliquez sur l’icône texte, puis cliquez n’importe où pour commencer à taper.
Personnalisation du texte : Une fois votre texte créé, le panneau de droite révèle toutes les options :
Recommandations typographiques pour débutants :
[EMPLACEMENT IMAGE : Exemples de hiérarchie typographique]
Déplacement libre : Sélectionnez l’objet avec V, puis cliquez-glissez. Simple et efficace.
Déplacement contraint : Maintenez Shift en glissant pour bouger uniquement horizontalement ou verticalement. Parfait pour aligner des éléments.
Déplacement au pixel près : Utilisez les flèches du clavier pour déplacer de 1px, ou Shift + Flèches pour déplacer de 10px.
Positionnement exact : Dans le panneau de droite, tapez directement les valeurs X et Y pour placer l’objet à des coordonnées précises.
Méthode visuelle : Tirez sur les poignées (petits carrés) aux coins ou sur les côtés. Les poignées d’angle permettent de changer largeur et hauteur simultanément.
Conserver les proportions : Maintenez Shift en tirant pour que l’objet garde son ratio largeur/hauteur. Indispensable pour les logos et photos.
Dimensions exactes : Dans le panneau de droite, les champs W (width/largeur) et H (height/hauteur) acceptent des valeurs précises. Tapez 200 dans W et 100 dans H pour un rectangle de 200×100 pixels.
Redimensionnement intelligent : Figma propose “Scale” qui redimensionne proportionnellement TOUT, y compris les bordures et effets. Utile pour créer des versions plus petites de designs complexes.
Méthode rapide : Maintenez Alt (Windows) ou Option (Mac) puis glissez l’objet. Une copie se crée instantanément.
Méthode classique : Sélectionnez l’objet, puis Ctrl+D (Windows) ou Cmd+D (Mac). La copie apparaît légèrement décalée.
Duplication multiple : Dupliquez une première fois avec Ctrl+D, déplacez la copie. Appuyez à nouveau sur Ctrl+D, Figma place intelligemment la nouvelle copie à la même distance. Répétez pour créer des espacements réguliers automatiquement.
Sélectionnez plusieurs objets (maintenez Shift et cliquez sur chacun), puis utilisez les icônes d’alignement en haut à droite du panneau de propriétés.
Options d’alignement :
Astuce pro : Pour aligner par rapport au canvas entier plutôt qu’à la sélection, cliquez d’abord sur le canvas avant de sélectionner vos objets.
Quand plusieurs éléments forment un ensemble logique (par exemple un bouton = rectangle + texte), groupez-les.
Pour grouper : Sélectionnez les éléments, puis Ctrl+G (Windows) ou Cmd+G (Mac). Ils se comportent maintenant comme un seul objet.
Pour dégrouper : Ctrl+Shift+G ou Cmd+Shift+G.
Avantage : Vous pouvez déplacer, dupliquer ou redimensionner tout le groupe d’un coup. Dans le panneau de gauche, le groupe apparaît avec une icône de dossier.
[EMPLACEMENT IMAGE : Animation GIF montrant les différentes manipulations]
Changer la couleur de fond (Fill) : Sélectionnez votre objet, trouvez la section Fill dans le panneau de droite. Cliquez sur le carré coloré pour ouvrir le sélecteur de couleur.
Le sélecteur de couleur :
#3498db pour un bleu)Trouver les bonnes couleurs :
Règle d’or : Limitez-vous à 3-4 couleurs principales dans un design. Une couleur dominante, une secondaire, et une pour les accents.
[EMPLACEMENT IMAGE : Exemples de palettes de couleurs harmonieuses]
Les bordures ajoutent de la définition et du contraste à vos formes.
Pour ajouter une bordure : Sélectionnez l’objet, dans le panneau de droite, section Stroke, cliquez sur le +. Choisissez la couleur et ajustez l’épaisseur en pixels.
Types de bordures :
Astuce design : Pour un look moderne et minimaliste, utilisez des bordures fines (1-2px) dans des tons gris clairs (#E0E0E0).
Les dégradés créent des transitions douces entre couleurs, ajoutant sophistication et dimension.
Créer un dégradé : Sélectionnez votre objet, cliquez sur Fill, changez “Solid” en “Linear” (dégradé linéaire) ou “Radial” (dégradé circulaire).
Personnaliser le dégradé :
Tendances actuelles :
L’opacité contrôle la transparence d’un élément, de 0% (invisible) à 100% (totalement opaque).
Changer l’opacité : Sélectionnez l’objet, en haut du panneau de droite, trouvez le champ Opacity (avec le symbole %). Réduisez pour rendre transparent.
Utilisations créatives :
[EMPLACEMENT IMAGE : Exemples d’utilisation créative de l’opacité]
Le panneau de gauche liste tous vos éléments dans l’ordre d’empilement. Ce qui apparaît en haut de la liste s’affiche devant sur le canvas.
Réorganiser les calques : Glissez un calque vers le haut pour le faire passer devant, ou vers le bas pour l’envoyer derrière.
Raccourcis d’ordre :
Par défaut, Figma nomme vos éléments “Rectangle 123”, “Ellipse 45”. Catastrophique pour s’y retrouver !
Renommer intelligemment : Double-cliquez sur le nom du calque dans le panneau de gauche et tapez un nom descriptif.
Conventions de nommage :
Pourquoi c’est crucial : Dans un design complexe avec 100+ éléments, retrouver “btn_inscription” prend 2 secondes. Retrouver “Rectangle 87” peut prendre 5 minutes de recherche frustrante.
Verrouiller un élément : Quand un élément est terminé et que vous ne voulez plus le modifier accidentellement, sélectionnez-le et appuyez sur Ctrl/Cmd + L. Un petit cadenas apparaît. L’élément devient non-sélectionnable sur le canvas.
Déverrouiller : Même raccourci, Ctrl/Cmd + L.
Masquer un élément : Dans le panneau des calques, cliquez sur l’icône œil à gauche du nom. L’élément devient invisible mais reste dans votre projet. Utile pour comparer des versions ou désencombrer temporairement.
Astuce : Verrouillez votre Frame principale et vos éléments de fond pour éviter de les déplacer quand vous travaillez sur les détails au premier plan.
Assez de théorie ! Il est temps de créer quelque chose de concret. Nous allons réaliser une carte de visite moderne et professionnelle. Suivez chaque étape attentivement.
[EMPLACEMENT IMAGE : Aperçu du résultat final de la carte de visite]
Créer la Frame : Appuyez sur F, puis au lieu de choisir un format prédéfini, dessinez manuellement un rectangle sur le canvas. Dans le panneau de droite, entrez ces dimensions exactes :
Nommer la Frame : Dans le panneau de gauche, double-cliquez sur “Frame 1” et renommez en “Carte_Visite”.
Couleur de fond : Avec la Frame sélectionnée, dans Fill, choisissez un blanc cassé (#F8F9FA) ou une couleur pastel douce. Évitez le blanc pur (#FFFFFF) qui peut paraître dur.
Créer le texte : Appuyez sur T, cliquez au centre supérieur de votre Frame, et tapez votre nom complet.
Styliser :
#2C3E50) ou noir doux (#1A1A1A)Positionner : Sélectionnez le texte et utilisez les outils d’alignement (en haut à droite) pour le centrer horizontalement dans la Frame. Placez-le environ 60px du haut.
Créer un second texte : Appuyez sur T, cliquez sous votre nom, tapez votre profession (ex: “Designer UI/UX”, “Développeur Web”, “Consultant Marketing”).
Styliser :
#7F8C8D)Espacement : Placez ce texte environ 10-15px sous votre nom. Utilisez les flèches du clavier pour ajuster au pixel près.
Créer le cercle : Appuyez sur O, maintenez Shift, et dessinez un cercle. Dans le panneau de droite, entrez :
Couleur et style :
#3498DB pour du bleu, #E74C3C pour du rouge, #2ECC71 pour du vert)Positionner : Placez le cercle dans le coin supérieur droit de la Frame. Il devrait chevaucher légèrement les bords pour un effet moderne.
Ordre des calques : Si le cercle cache votre texte, dans le panneau de gauche, glissez le calque du cercle tout en bas pour l’envoyer à l’arrière-plan.
Créer le texte de contact : Appuyez sur T, cliquez en bas de la Frame, et tapez vos informations :
email@exemple.com | +221 77 123 4567Styliser :
#95A5A6)Positionner : Centrez horizontalement et placez environ 20px du bas de la Frame.
Créer une ligne fine : Appuyez sur L, dessinez une ligne horizontale sous votre profession.
Styliser :
Centrer : Utilisez les outils d’alignement pour centrer la ligne sous votre titre de profession.
Vérifier l’alignement : Sélectionnez tous vos éléments de texte (maintenez Shift) et utilisez l’alignement centré pour vous assurer que tout est parfaitement aligné verticalement.
Ajuster les espacements : Vérifiez que les espaces entre les éléments sont harmonieux. Une règle simple : les espacements doivent être cohérents (par exemple, toujours 15px entre les éléments).
Ajoutez votre touche personnelle :
Vous venez de créer votre première carte de visite digitale dans Figma. Ce design peut être exporté et utilisé comme signature email, avatar LinkedIn, ou même imprimé.
[EMPLACEMENT IMAGE : Étapes de création en séquence]
Auto Layout est une fonctionnalité puissante qui organise automatiquement vos éléments avec des espacements cohérents. Parfait pour les boutons, menus, et listes.
Cas d’usage pratique : Créer un bouton parfait
Normalement, créer un bouton nécessite de calculer manuellement la taille du rectangle en fonction du texte. Avec Auto Layout, c’est automatique.
Comment faire :
L’avantage magique : Changez le texte en “Se connecter maintenant” et le bouton s’adapte automatiquement à la nouvelle largeur !
Les composants sont des éléments réutilisables. Modifiez le composant principal, et toutes les copies changent instantanément.
Exemple concret : Imaginez créer 15 boutons identiques dans votre design. Sans composants, si vous voulez changer la couleur, vous devez modifier les 15 manuellement. Avec un composant, vous modifiez une seule fois, et les 15 changent.
Créer un composant :
Utiliser le composant :
Quand utiliser les composants :
Les plugins sont des extensions créées par la communauté qui ajoutent des fonctionnalités à Figma.
Installer un plugin : Menu en haut → Plugins → Browse plugins in Community. Recherchez et cliquez sur “Install”.
Plugins indispensables pour débutants :
Unsplash – Photos gratuites de haute qualité Insérez des images professionnelles directement dans vos designs sans quitter Figma.
Iconify – Des millions d’icônes gratuites Cherchez n’importe quelle icône (menu, flèche, utilisateur, etc.) et insérez-la en un clic.
Lorem Ipsum – Texte de remplissage Générez du faux texte pour visualiser vos designs sans contenu réel.
Remove BG – Suppression d’arrière-plan Retirez automatiquement le fond des images pour isoler des objets.
Content Reel – Données réalistes Générez des noms, emails, avatars réalistes pour vos maquettes.
[EMPLACEMENT IMAGE : Captures d’écran des plugins en action]
Une fois votre design terminé, vous voudrez l’exporter pour l’utiliser ailleurs.
Exporter en image :