Figma : l’outil de prototypage dont vous réviez (peut-être).

On est en 2020. Les maquettes de site web se créent maintenant directement dans le navigateur et ont accessibles en direct.

Qu’est-ce que Figma ? Qu’est-ce que le prototypage ? En quoi ça peut nous être utile ? Pourquoi ne pourrons-nous plus jamais nous en passer ? Nous allons essayer de répondre à ces questions en quelques paragraphes.

C’est après une petite journée de travail sur ce logiciel que je me décides de vous en parler. Il est entré en quelques jours seulement dans mon process de travail et franchement je ne pourrais plus m’en passer. J’avais bien testé avant des logiciels comme Adobe XD ou InVision Studio, mais aucun ne m’a convaincu comme Figma l’a fait.

Mais c’est quoi alors Figma ? C’est en gros un outil pour faire des maquettes de sites web et d’applications.

Avant, pour faire ça on utilisait basiquement Photoshop, on sortait des JPEG, on les envoyait au client et globalement tout se passait bien. Mais voilà ça c’était en l’an 2000 quand les sites ne devaient pas encore s’adapter à des tablettes ou à des téléphones mobiles. Puis le responsive webdesign a débarqué, et tout le monde a commencé à surfer sur son iPhone. Maintenant les sites internet doivent être conçus d’abord pour les terminaux mobiles tant le trafic de ses derniers tend à dépasser celui des ordinateurs classiques. Tout ça pour vous dire que maintenant, même une simple maquette doit être déclinée en différents formats. Et là les outils de prototypage tels que Figma s’avèrent bien pratiques.

Il y a bien eu un dénommé Sketch qui a été historiquement et notablement le premier outil de prototypage ui, mais celui-ci n’était disponible que sur Mac. Un peu élitiste non ?

Alors, pourquoi Figma ? Eh bien Figma est simple, et sacrement bien organisé. C’est tout simplement le logiciel le plus ergonomique que j’ai jamais utilisé. Tout est à sa place. L’interface et les fonctionnalités sont très simples, et se développent au fur et à mesure. Même pas besoin d’utiliser les raccourcis claviers tellement tout est là, à portée de clic. Au-delà de pouvoir aisément assembler les différents éléments qui composent la maquette d’un site internet ou d’une application, le logiciel est aussi un éditeur vectoriel. Il permet de tracer de tracer et de motidifier des formes à la plume. Il possède aussi des fonctionnalité de styles qu’on va pouvoir répliquer facilement sur tous nos éléments.

La simplicité et la gratuité (j’oubliais d’en parler) est un des atouts de Figma, et s’il n’y avait que ça, ce serait déjà très bien, mais non content d’être déjà un très bon outil, il s’utilise en ligne ! Au début, j’étais sceptique quand aux logiciels qui s’executent dans le navigateur, mais il s’avère que Figma fonctionne très bien comme ça et que ça n’a que de avantages. Déjà, vous ne perdez pas votre travail, puisqu’il est associé au compte avec lequel vous vous connectez. Mais il permet aussi de partager de ce fait votre travail très simplement de montrer ce que vous faites à vos clients sous forme de prototypes.

Vous pouvez alors leur envoyer un lien des planches sur lesquelles vous travaillez. Ces planches apparaissent sous la forme de prototypes. Pour les versions mobiles et tablette ces planches sont même habillées de mockup d’iPhone et d’iPad. On peut ne pas être d’accord avec la sur-représentation des appareils de la marque Apple comme c’est mon cas, c’est tout de même rudement classe.

Il en plus possible de donner vie à ces prototypes en définissant des intéractions. On peut par exemple simuler une navigation entre plusieurs pages.

Je ne vais pas encore fait un « ce n’est pas tout ». Je m’arrête là pour les points positifs. Bon Figma n’est pas totalement gratuit, si vous souhaitez l’utiliser pour du travail collaboratif (plus de deux membres), vous allez devoir payer un abonnement… Mais franchement ça dépasse le cadre de mon utilisation et si jamais j’en arrivais là je serais heureux de payer.

Les gars de Figma ont réussi leur coup. Espérons que ça dure !