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
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.
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.
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.
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.
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.
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.
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é.
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.
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
