Figma
Lors du démarrage d’un projet, on a besoin de visualiser l’interface des pages avant leur intégration. Figma nous permet cet exercice. Avec Figma, on passera du dessin papier au graphisme sur ordinateur. Figma est un outil open source. On peut partager notre travail avec d’autres utilisateurs gratuitement. On peut collaborer avec d’autres personnes et prototyper des conceptions en utilisant les outils de collaborations intégrés.
Que faire concrètement avec Figma ? Tellement de choses !!
Voici quelques points principaux, mais vous pouvez explorer davantage selon vos besoins. 1- Concevoir des designs d’application ou design système. Avec Figma, on peut créer et réunir sur une même page, tous les éléments nécessaires à la construction de notre projet visuel. On peut détailler notre image de marque (branding). On peut créer notre palette de couleurs. Utiliser les polices que l’on souhaite dans notre design. Et également des icônes. En résumé, on peut réaliser notre charte graphique et créer notre moodboard (voir article moodboard). C’est par ailleurs un très bon format pour réaliser vos logos en format SVG. Différents plugins nous sont offerts afin d’accéder et d’étendre les fonctionnalités de Figma. Par exemple, le plugin Palette permet de déterminer les codes couleurs d’un logo existant. Il existe aussi un plugin qui fournit davantage de polices d’écritures. 2- Communauté Figma a bâti un écosystème du fait de sa communauté et ses plugins. Des développeurs externes s’occupent de créer des outils qui vont se greffer au cœur de l’écosystème. Figma est un outil collaboratif qui permet de travailler à distance avec les membres de votre équipe. En quelques clics, on peut partager son design avec la personne de son choix. On pourra même laisser des commentaires sur le design. 3- Prototyper des applications Pour la présentation d’une maquette, Figma permet l’animation de celle-ci. Les personnes à qui l’on présente notre travail, n’auront aucune idée si c’est une réelle application, codée ou simplement un design animé.
Comment utiliser ?
Pour commencer à utiliser Figma, il n’est pas obligatoire de télécharger, on peut l’utiliser directement dans son navigateur. Il suffit juste de créer un compte. Pour partager un design, on envoie tout simplement le lien de notre projet. Pour commencer à créer des designs, dans la section "New file", vous pouvez cliquer sur "Design file", ce qui vous dirige vers votre nouveau fichier. En cliquant sur "Design file" vous êtes dirigé vers votre nouveau fichier. Par défaut, votre fichier est créé dans les "Drafts" (brouillons), que vous pouvez retrouver en haut à gauche de la page. Vous pouvez commencer par nommer votre fichier "Maquette xouy" en cliquant sur le titre. Figma nous permet d’utiliser un système de pages, où on va pouvoir représenter les différentes itérations d'un même projet. On clique sur "Page 1", et on peut créer une nouvelle page pour avoir "Wireframes" et "Maquette" : Voilà, on a notre fichier "Maquette xouy", qui contient deux pages : "Wireframes" et "Maquette".
Pensez à réaliser les grilles correctement, car elles vont être utilisées lors de la conception. Mais il est possible de créer, sur Figma, votre propre grille, sans oublier de la coder. Il faut que toutes vos créations soient comprises, notamment par les développeurs. Passer au remplissage du contenu pour la maquette. Il ne s’agit pas de rajouter des images ou de modifier les couleurs, mais d’avoir du texte. Durant cette étape, on aura une idée sur la conception du site, en temps réel. Ensuite, vous pouvez commencer à superposer vos onglets et sections, comme le « à propos », ou des fonctionnalités du site web. Vous pouvez étiqueter et / ou nommer les sections et les définir, avec leurs couleurs et arrière-plan, ce qui vous permettra de les reconnaître et de les modifier facilement. C’est aussi un travail préparatoire, qui facilitera, plus tard, le travail de la conception.
Quelques erreurs à éviter
Premièrement, il ne faut pas avoir des images dont la taille est très grande. C’est un facteur de ralentissement du temps de chargement. Vous pouvez trouver sur Figma un outil qui vous permet, d’ailleurs, de juger la rapidité de votre fichier.
Deuxièmement, il faut absolument éviter les calques masqués. Pensez à la création de différents composants sous différents états !
Finalement, ne mettez pas les maquettes et les composants dans un même fichier, mais pensez à les séparer et favoriser une librairie externe de composants.