Faire des maquettes avec Figma

Faire des maquettes avec Figma

19/11/16

Quand il s’agit de faire des maquettes d’applications, on peut soit se tourner vers des solutions Web gratuites telles que Balsamiq ou Moqups soit utiliser des logiciels payant (et souvent propriétaires) comme Sketch. Je suis étudiant, j’ai pas beaucoup de sous, et j’ai donc une préférences pour les outils Web cités en premiers. Parmi ces alternatives, j’ai eu connaissance d’un petit nouveau par le biais de la newsletter d’Invision (très sympa pour faire des maquettes aussi, et gratuit dans sa version normale). Je ne suis pas un expert de ce qui touche à l’UI et l’UX, mais je compte bien le devenir et le premier pas pour ça c’est la pratique! Dans cette optique là je voulais vous parler de Figma.

Bon déjà je pars avec un avis subjectif puisque j’accroche beaucoup au nom et au style du site. Ensuite il faut savoir aussi que j’aime beaucoup les outils qui innovent dans leur domaine en ajoutant une composante collaborative (comme le font très bien les outils Framasoft d’ailleurs dont cet excellent Framapad). Figma est dans cette catégorie-là, puisque vous allez pouvoir faire de la conception d’application ou de site simultanément avec vos collègues, amis, autres!

Lorsque l’on arrive sur le site du projet, on est accueilli avec une demo de l’application avec deux personnes qui travaillent sur un projet en même temps:

L’interface se divise en 4 zone:

  • A gauche la liste des calques et objets
  • Au centre le canvas pour travailler et voir sa maquette
  • A droite un panneau de paramètre de l’élément sélectionné ou de l’outil
  • Et en haut une barre d’outils avec largement de quoi s’amuser

Tout est fait en vectoriel, donc on peut mettre à l’échelle autant qu’on veut le contenu de sa maquette ça n’influencera pas sur la qualité de la maquette! (Enfin, je ne vais pas faire un cours sur les formats vectoriel x) )

Sauf que ça c’est dans la pratique, mais dans Figma je n’ai pas vu de bouton pour choisir la finesse des images lors de l’export du document, du coup on se retrouve avec un fichier zip et des .png dedans, qui sont certes d’assez bonne qualité mais des fois qu’on veuille plus ou moins lourd comme fichiers, et bien on n’a pas le choix.

J’aime beaucoup le design de l’interface et je pense que je vais essayer d’aller un peu plus loin avec Figma, et peut-être vous ressortir un article un peu plus détaillé de ses fonctionalités, et pourquoi pas un tutoriel, une fois que j’aurais essayé de faire deux trois travaux de conception avec.

Si il y a des adeptes de Figma déjà dans le coin, hésitez pas à me dire ce que vous en pensez ou même si vous connaissez des alternatives libres qui font ce genre de chose, ça ce serait top =D