Maîtriser l'outil de conception Figma : conseils et procédures utiles
Publié: 2019-03-26Tous ceux qui ont travaillé avec Google Docs savent à quel point c'est pratique : il est facile de modifier, de collaborer et d'enregistrer vos fichiers sur le Web. Et si les web designers disposaient du même outil pour leurs projets ? Eh bien, ils en ont un et c'est Figma. Dans cette revue Figma, nous vous guiderons à travers les fonctionnalités les plus brillantes de la plate-forme qui en font l'outil de choix des concepteurs.
Qu'est-ce que Figma
Figma est un outil de conception basé sur le cloud qui, contrairement à d'autres outils de conception populaires fonctionnant exclusivement sous Mac OS ou Windows, peut également fonctionner sous Linux. Ainsi, cette plate-forme permet la collaboration de concepteurs qui utilisent différents systèmes d'exploitation et ont besoin de générer du code SVG, CSS et du code iOS ou Android pour leur travail.
La plate-forme permet à ses utilisateurs de créer des conceptions, de fabriquer des prototypes et de recueillir des commentaires sur une seule plate-forme.
Pourquoi utiliser Figma
Avant de plonger dans les beautés de l'outil de conception Figma, examinons ce qui rend cette plate-forme si attrayante pour les concepteurs.
- C'est basé sur le Web. Figma s'exécute dans votre navigateur et vous pouvez travailler sur vos projets sans avoir à les enregistrer en tant que fichiers séparés sur votre ordinateur - toutes les modifications sont automatiquement enregistrées dans votre cloud. Mais n'oubliez pas que vous aurez besoin d'une connexion Internet active pour enregistrer toutes les modifications.
- Il permet le travail d'équipe . Avec Figma, vous pouvez avoir une équipe de deux à un nombre illimité d'éditeurs, le tout en fonction de votre plan tarifaire. Vous pourrez toujours voir combien de membres de l'équipe travaillent sur un seul projet et quels changements ils apportent.
- C'est gratuit pour les designers solo. Toutes les fonctionnalités sont absolument gratuites à utiliser sans aucune période d'essai.
Globalement, Figma propose trois plans tarifaires. Découvrons quelle fonctionnalité la plate-forme fournit pour chacun d'eux.
Plans tarifaires Figma
| Entrée | Professionnel | Organisation |
| Libérer Utilisez ce plan pour tester la plate-forme et vous faire une idée de ses fonctionnalités de base : prototypage, attributs de code, commentaires, espace de stockage illimité et visionneuses illimitées, importation de Sketch et divers formats de fichiers à importer. | 12 $ par éditeur/mois Passez au plan suivant si votre projet nécessite une édition et un partage en équipe. Avec ce plan, vous pouvez profiter d'un nombre illimité d'éditeurs, de projets et de visionneuses gratuites, ainsi que d'un historique de versions et d'un stockage illimités. Vous pourrez également créer des projets et des systèmes privés avec des composants d'interface utilisateur partagés que toute l'équipe peut utiliser. | 45 $ par éditeur/mois Passez à ce plan et profitez d'un éventail encore plus large de fonctionnalités : nombre illimité d'équipes, propriété des brouillons, contrôles d'accès aux liens ou polices partagées. Vous pourrez approfondir les contrôles de compte assurés par les rapports des journaux d'activité, la gestion centralisée des membres, l'authentification unique (SSO) et le provisionnement à distance avec le fournisseur d'identité de l'organisation. |
Premiers pas avec Figma
Lors de l'inscription, l'utilisateur reçoit un e-mail de bienvenue avec les liens nécessaires à l'intégration : centre d'aide, didacticiels vidéo, forum et ressources utiles.
En outre, lorsque les utilisateurs commencent à travailler avec l'outil, une présentation rapide de la plate-forme leur est proposée. Vous pouvez à la fois travailler en ligne et télécharger la version de bureau de Figma pour définir votre flux de travail hors ligne. En fait, l'interface est assez intuitive, avec le panneau Calques, qui comprend les éléments de votre projet, une barre d'outils avec des outils et des options disponibles, et le panneau Propriétés, le tout sur le côté droit.
Voyons maintenant les fonctionnalités et les options les plus remarquables de Figma et voyons comment vous pouvez les appliquer.
Fonctionnalités Figma et options utiles
Prototypage
Figma vous permet de créer une version cliquable d'un site Web ou d'une application en créant autant d'écrans que vous le souhaitez. De cette façon, vous pourrez tester, modifier ou ajuster n'importe quelle fonctionnalité ― fonctionnalité de bouton, survol d'éléments, animation de fenêtre modale ― sans avoir à basculer entre les onglets. Vous pourrez créer des connexions et des points chauds pour votre conception afin de simuler son apparence dans un environnement réel.
Passez simplement à Prototype dans le panneau Propriétés et commencez à créer des chemins et des interactions.
Composants
Ce sont des éléments d'interface utilisateur qui peuvent être réutilisés dans vos projets. Cette fonctionnalité vous permet de créer des composants symétriques en les retournant ou en répétant des motifs en mosaïque les composants. Vous pouvez créer des composants à partir de boutons, de champs ou de menus. Pour créer un composant principal, cliquez sur le bouton Créer un composant dans le menu Options ou cliquez avec le bouton droit sur le calque et choisissez l'option Créer un composant.
Vous pouvez réutiliser les composants principaux en créant des instances. Vous pouvez également créer ces composants à partir d'éléments d'interface utilisateur tels que des couleurs, des blocs, des boutons, des formes et des pages de destination en tant que composants distincts.
Afin de créer des composants d'instance, choisissez le composant principal, maintenez enfoncée la touche de raccourci (Alt ou D pour Windows et Mac OS respectivement), faites glisser l'instance du composant et copiez-la vers un autre emplacement si nécessaire.
N'oubliez pas que les instances que vous créez sont liées aux composants maîtres, ce qui signifie que toutes les modifications que vous apportez à ces derniers s'appliqueront à tous les premiers. Par exemple, en mettant à jour la forme ou la couleur du bouton dans le composant principal, vous mettrez à jour ses composants enfants dans la conception de votre site Web.
Réseaux de vecteurs
Cette fonctionnalité Figma vous permet de créer des formes vectorielles complexes puisque vous n'êtes plus limité par seulement deux lignes provenant de deux points. Vous pouvez utiliser l'outil plume pour tracer des lignes supplémentaires à partir de n'importe quel point de la forme que vous avez créée.
En plus de cela, Vector Networks peut faciliter votre routine HTML car vous pouvez copier le code SVG à partir d'une source externe et le coller en tant que couche vectorielle directement dans Figma. Vous pouvez également copier des vecteurs Figma sous forme de codes SVG. Pour ce faire, faites simplement un clic droit sur l'élément, choisissez copier en SVG et collez le code dans le code HTML ou dans tout projet Web que vous créez.
Commentaires, édition et partage intégrés
Avec Figma, vous pouvez créer une équipe et sélectionner ce que chaque membre de l'équipe a la permission de faire avec vos projets : soit afficher, soit afficher et modifier également. Vous pouvez également voir comment les membres de l'équipe mettent à jour ou modifient la conception en temps réel.
Votre équipe peut laisser des commentaires ou discuter de n'importe quel élément du projet directement dans la zone de travail et l'épingler n'importe où sur le canevas, comme dans Google Docs. Pour laisser vos commentaires, choisissez la bulle de dialogue dans le menu supérieur, cliquez sur l'élément que vous souhaitez commenter et écrivez vos commentaires.
Contrôle de version
Avec Figma, vous pouvez suivre l'historique de chaque collaborateur et même revenir à la version précédente. Le service enregistre automatiquement les versions lorsque les utilisateurs ferment l'onglet avec le projet ou si aucune modification n'a été apportée dans les 30 minutes. Pour accéder rapidement à cette option, sélectionnez l'icône déroulante à gauche du nom du projet dans la barre d'outils. Vous verrez l'historique des versions sur votre droite avec une option pour nommer, restaurer ou dupliquer une version spécifique.
Outil de conception Figma en action
Après nous être familiarisés avec la plate-forme et ses fonctionnalités, nous avons décidé d'essayer les options de conception de Figma et de créer une page simple pour un livre électronique. Tout d'abord, nous avons cliqué sur le signe "+" dans le menu supérieur. Ensuite, nous avons cliqué sur l'icône « Cadre » dans la barre d'outils pour créer un cadre et organiser notre conception sur la toile. Ensuite, nous avons rempli notre projet avec les calques nécessaires - blocs de texte, rectangles et images - et configuré tous les espaces entre les éléments.
Voici ce que nous avons réussi à créer :
Gardez à l'esprit que vous ne pourrez pas faire une impression de qualité, car la plate-forme n'a pas la palette principale pour la peinture - la palette CMJN - ou le changement de taille entre les millimètres et les centimètres.
Prise finale
Figma se présente comme un outil soigneusement pensé par des designers pour des designers. La plateforme vous permet de
- travaillez en ligne et enregistrez vos conceptions sur un cloud sans avoir à dépendre du stockage de votre ordinateur ;
- créer des conceptions sur divers systèmes d'exploitation ;
- collaborer avec l'équipe en temps réel, commenter, modifier et partager les fichiers ;
- profitez de fonctionnalités utiles telles que le prototypage, les réseaux vectoriels, la création de composants et leurs instances pour modifier, tester, ajuster votre conception et étendre ses possibilités.
Nous espérons que notre revue Figma a clarifié les astuces internes de la plate-forme et que vous vous êtes suffisamment inspiré pour l'essayer. Créez vos designs avec Figma et vos projets marketing avec SendPulse. À bientôt!