Logotype de Splash
Ombre diffuse sur un cercle bleu
Ombre diffuse sur un cercle bleu

Le 12 avril 2024

Bien débuter sur Figma : Le Guide Complet des Splash Makers

Dans la suite d'outils incontournables, on y retrouve Figma. Au fil des ans, ce logiciel s'est imposé comme une référence dans le design collaboratif et la conception de produits. Si vous débutez sur Figma en 2024, cet article est fait pour vous.
Valentin Splash

par Valentin

Débuter sur Figma
Ombre diffuse sur un cercle bleu
Ombre diffuse sur un cercle bleu
Ombre diffuse sur un cercle bleu
Ombre diffuse sur un cercle bleu

Faites appel aux Splash Makers

Faites appel aux Splash Makers

Tous les jours, de nouveaux outils viennent bouleverser nos habitudes de travail, rendant la création plus intuitive et plus collaborative. Dans ce contexte, un outil a su se démarquer par la souplesse et l’efficacité de ses fonctionnalités : Figma.
Aujourd’hui, on vous explique comment bien débuter sur Figma. Si vous êtes un professionnel du Web Design, que vous soyez débutant ou confirmé, ce guide est fait pour vous. Nous allons vous montrer comment tirer parti de Figma pour optimiser votre processus de travail et créer des interfaces créatives.

Interface et conception

Avant de vous lancer dans la création, il est important de comprendre l’interface utilisateur de Figma, sa logique de travail et ses fonctionnalités principales. Figma est structuré autour de 4 espaces principaux :

  • Le panneau de calques
  • L’espace de travail
  • Le panneau de propriétés
  • La barre d’outils

L’espace de travail est l’endroit où vous allez créer vos designs. C’est ici que vous pourrez ajouter des éléments, dessiner des formes, ajouter du texte, créer des Wireframes, et bien plus encore.
Cet espace de travail fonctionne sur du pixel, de manière à proposer des interfaces les plus fiables possibles pour les développeurs.
→ J’ai un projet

Espace de travail de Figma

Le panneau de calques, situé à gauche de l’écran, est l’endroit qui répertorie tous les éléments présents dans votre espace de travail. Pour bien débuter sur Figma avec ce panneau, on vous recommande vivement de renommer vos calques. Cela permet de bien s’y retrouver et d’organiser notre document.

La fenêtre de calque de Figma

Le panneau des propriétés, situé sur le côté droit de l’écran, est le lieu où vous allez définir les attributs de vos éléments sélectionnés. Ici, vous pourrez modifier les couleurs, la taille, le positionnement, l’opacité, entre autres.

Panneau d'outils de Figma

La barre d’outils, située en haut de l’écran, regroupe tous les outils de création et de modification que Figma met à votre disposition. De l’outil texte à l’outil forme, en passant par l’outil pipline, vous y trouverez tout ce dont vous avez besoin pour concevoir vos projets.

Barre d'outils de Figma

Créer sa première maquette sur Figma

Maintenant que vous êtes familiarisés avec l’interface de Figma, il est temps de créer votre première maquette. Commencez par ouvrir un nouveau projet depuis la page d’accueil. Un espace de travail vierge s’ouvrira alors devant vous, prêt à accueillir vos idées.
Nous verrons dans un guide plus complet comment préparer ses variables et sa librairie.

Sélectionner l’outil Frame dans votre barre d’outil et choisissez la taille de cette dernière dans le panneau de propriétés.

L’un des avantages de Figma réside dans sa capacité à créer des Wireframes rapidement. Les Wireframes sont des esquisses de votre interface utilisateur, qui vous permettent de visualiser l’architecture de votre page web avant de vous lancer dans le design détaillé. Figma propose une bibliothèque d’éléments préconçus que vous pouvez utiliser pour créer vos Wireframes.

Écran Figma de maquette mobile

Structurez votre travail et collaborez efficacement

Pour tirer le meilleur parti de Figma, il est essentiel d’adopter une méthodologie de travail efficace. Commencez par bien structurer votre espace de travail, en organisant vos éléments en auto-layout, en frame ou en groupe. Cela vous permettra de naviguer plus facilement dans vos designs et de gagner en productivité.
De plus, il est essentiel de renommer vos calques pour s’y retrouver dans des projets Figma complexe. Si vous débutez sur Figma, cette tâche est indispensable

Ensuite, utilisez les fonctionnalités collaboratives de Figma pour travailler en équipe sur vos projets. Figma permet à plusieurs utilisateurs de travailler simultanément sur un même projet, facilitant ainsi le partage d’idées et la révision des designs.

Image montrant l'outil Figma en utilisation par plusieurs designers en simultanée

Pensez également à exploiter les fonctionnalités de prototypage de Figma. Le prototypage vous permet de créer des versions interactives de vos designs, pour tester leur fonctionnalité et leur ergonomie avant de passer à la phase de développement.

Page avec du prototype  sur l'interface Figma

L’outil de prototype fonctionne en créant des liens interactifs entre les Frame votre projet. Après avoir construit le Design de vos pages, passez sur du prototype pour projeter les idées de navigation possibles. Cette fonctionnalité n’est pas indispensable si vous débutez sur Figma. En revanche, elle apporte un atout à votre projet.

La puissance des auto-layout, à apprendre rapidement !

Si vous débutez sur Figma, vous devez prendre en main des fonctionnalités importantes.
Les auto-layout en sont un parfait exemple. Toute maquette doit prendre en compte un score de développement, c’est-à-dire la capacité à développer le produit facilement. Vous devez également avoir quelques notions de .CSS pour certaines mises en page.

Au revoir les groupes, bonjour les auto-layout. L’objectif est d’utiliser les flexbox afin de mieux construire votre design et de le rendre le plus accessible possible. Cet outil est aussi un avantage dans la conception de vos maquettes en responsive.

Flex Direction
Vous pouvez choisir la direction des élements dans votre auto-layout : horizontal, vertical, ou auto (le contenu s’adapte en fonction de la taille de son parent.

Justify Content
Vous pouvez répartir les différents élements de votre frame avec plusieurs propriétés CSS : left, center, right, space between

Padding
Choisissez l’espacement interne de votre frame avec un padding horizontal ou vertical

Comprendre les plugins Figma pour maximiser votre productivité

Cet outil puissant offre une multitude de fonctionnalités pour le design d’interface utilisateur. Mais encore plus impressionnant, c’est sa capacité à être étendu grâce à l’utilisation de plugins. Il existe une multitude de plugins Figma, conçus pour vous aider à gérer divers aspects de votre travail et à augmenter votre productivité.

Utilisation du plugin Unsplash

Les plugins Figma peuvent être considérés comme des fonctionnalités supplémentaires que vous pouvez ajouter à votre interface Figma. Adrien Gazaix et Olivier Krakus, deux designers reconnus de la communauté Figma, recommandent vivement l’utilisation des plugins pour optimiser votre temps et améliorer l’efficacité de votre travail. Par exemple, il existe des plugins pour automatiser la création de grilles, pour générer du texte aléatoire, pour convertir des images en échelle de gris, et bien plus encore.

Pour ajouter un plugin à votre interface Figma, il vous suffit de naviguer vers la marketplace des plugins Figma, de rechercher le plugin qui vous intéresse, et de cliquer sur le bouton « Installer ». Une fois installé, le plugin sera accessible depuis la barre d’outils de votre interface Figma.

Plugin Figma

Les plugins Figma sont un véritable atout pour maximiser votre productivité et enrichir votre expérience utilisateur. Ils permettent de gagner du temps sur des tâches répétitives et de se concentrer sur l’aspect visuel et l’expérience utilisateur de vos designs.

Pour débuter sur Figma, il faut s’entraîner !

Enfin, cet outil de design d’interface extrêmement polyvalent et puissant, a su s’imposer dans le paysage du design web. Que vous soyez un professionnel du design d’interface utilisateur ou un débutant, Figma offre une gamme de fonctionnalités pour vous aider à créer des designs impressionnants et percutants.
→ Pourquoi utiliser Figma ?

L’utilisation des plugins Figma peut augmenter de manière significative votre productivité et enrichir votre expérience utilisateur. De plus, la réalisation d’exercices Figma, comme la création d’une maquette de carousel horizontal, peut vous aider à maîtriser cet outil et à améliorer vos compétences en design d’interface. Enfin, des formations Figma sont disponibles pour ceux qui souhaitent approfondir leurs connaissances et maîtriser pleinement cet outil. N’hésitez donc pas à vous lancer dans l’aventure Figma, un monde de créativité et de collaboration vous attend.
→ J’ai un projet Design

Découvrez nos articles
Made In Splash

27 mai 2024

Le meilleur hébergement web pour votre site en 2024

26 mai 2024

Tout savoir sur Bubble : référence de développement no code

Avec 10 ans d'ancienneté, Bubble fait référence dans le milieu des outils de développement no-code. Découvrez avec Splash sa présentation. ...

24 mai 2024

L’impact du motion design sur l’UX en 2024

Le motion design apparaît aujourd'hui comme une véritable discipline à part entière permettant d'améliorer significativement l'expérience utilisateur. Découvrez sur quels points le motion design peut ...

Notre livre blanc sur
le No Code & Low Code

Avec vous pendant le projet, et bien après

Les acteurs de Splash sont soucieux de votre présence digitale. En portant le projet ensemble, nous proposons après livraison de votre site internet, un accompagnement complet sur l’amélioration, la correction et la gestion de votre produit.

Nous sommes votre partenaire, et pour longtemps !

Une équipe toujours à l’écoute. Ce sont des vrais professionnels. Leurs conseils ont été clé pour la réussite du nouveau design de notre site web.

Victor Flores Gooden

Victor Flores Gooden

CEO de Star Croisières

La proactivité des équipes nous a permis d’avancer rapidement. Une équipe professionnelle avec des conseils avisés, qui a su être force de proposition et flexible, surtout lorsque certains sujets étaient primordiaux.

Céline Humpae-Versavaud

Céline Humpage-Versavaud

Directrice Marketing chez Enoptea

Un projet réussi grâce à une très bonne communication des équipes et à la qualité d’exécution.

Gilles Belloir

Gilles Belloir

Directeur Général Placement Direct

Élevons votre édifice

Discutez dès aujourd’hui avec un expert pour construire ensemble le projet de demain