Figma : le logiciel de design gratuit à essayer immédiatement

Qu'est-ce que Figma ?

Figma est un logiciel de design qui fonctionne dans le navigateur, sans installation, ou en application de bureau. On l'utilise surtout pour concevoir et prototyper des maquettes de sites Web et d'applications, à plusieurs sur les mêmes fichiers. La vidéo ci-dessous en fait le tour.

Vous n'êtes pas obligé de télécharger quoi que ce soit : Figma fonctionne dans le navigateur, il suffit de créer un compte sur figma.com. Une application de bureau existe pour Mac (macOS 11 ou plus récent) et pour Windows (Windows 10 64 bits ou plus récent), sur la page de téléchargement officielle. Elle utilise le même compte et les mêmes fichiers que la version navigateur. Des applications mobiles existent aussi.

Figma propose une offre gratuite, Starter. Elle comprend des brouillons illimités, des kits UI et des modèles, et 30 jours d'historique des versions ; l'espace d'équipe est en revanche limité à un dossier et 3 fichiers. C'est suffisant pour apprendre l'outil et maquetter les pages d'un site. Les offres payantes deviennent utiles quand vous travaillez en équipe ou sur beaucoup de projets en parallèle.

Dans un projet de création de site Web, il y a souvent une séparation des rôles et des métiers : le designer design dans un logiciel de design, puis l'intégrateur intègre le design dans WordPress (ou autre outil Web / code). Même type d'organisation qu'une construction : un architecte définit un concept architectural, conçoit les plans et les documents techniques, puis un bureau d'études réalise les études techniques et fournit les plans détaillés, un maître d'œuvre coordonne les différents corps d'état et supervise le chantier, des entreprises du bâtiment interviennent selon leur spécialité, etc.

Les personnes capables d'être très bonnes en design ET en intégration Web sont extrêmement rares : souvent elles vont avoir une des 2 spécialités, et connaître un petit peu l'autre spécialité.

Même si vous faites tout votre projet en tant que personne seule, en travaillant le design dans Figma, on peut se concentrer sur le design seulement, sans noyer ou mélanger son temps et son énergie dans des considérations techniques Web. La conception d'un design et la construction Web nécessitent des états d'esprit différents, les séparer permet de mieux se concentrer sur la tâche.

Les changements de design sont plus faciles à faire dans un logiciel de design que directement dans un site Web, car un site Web a des fonctionnalités, des contraintes techniques, des bugs, etc.

Il est plus rapide de tester des idées de design dans Figma que directement dans un site Web.

On a une meilleure vue d'ensemble dans un canvas infini comme celui que propose Figma, que dans un site Web qui montre une page à la fois.

Figma permet aussi de rassembler d'autres éléments que le design des pages Web : notes diverses, fichiers vectoriels, images et photos, TODO list, historique des designs, etc.

Il est plus facile de faire des modifications et d'obtenir une validation d'un design dans Figma que dans un site Web. Un petit changement peut avoir de grosses conséquences / être long à faire dans un site Web opérationnel.

Séparer un projet en étapes est bénéfique : design dans un logiciel de design, validation du design, puis exécution de l'intégration Web.

Ajouter cette étape de design dans Figma peut d'abord paraître comme une perte de temps, mais au final, cela peut être un gain de temps.

Ajouter Figma à un projet Web a aussi des contreparties. Le design est fait deux fois, dans Figma puis dans WordPress, et un écart peut apparaître entre la maquette et le site réel. C'est un outil de plus à apprendre. Enfin, une maquette ne montre pas tout : affichage sur mobile, contenus réels plus longs que prévu, contraintes du thème. Sur un petit site, travailler directement dans WordPress peut suffire.

Figma est utilisé pour créer des mises en page de site Web ou d'application, pour travailler sur l'UI et l'UX. Toutefois, sa facilité d'utilisation et son canvas infini permettent d'autres utilisations.

Par exemple, je prends beaucoup de mes notes dans Figma, j'y organise des notes avec des images et des liens - je prends maintenant les notes relatives à mes sites Web dans Figma pour tout centraliser.

Organiser des galeries d'images - j'ai par exemple un fichier Figma dans lequel je mets une copie d'écran des sites Web que je trouve jolis.

Dans ce thread Reddit, d'autres utilisations sont mentionnées :

• Faire des présentations dans Figma, plus flexible que Powerpoint ou Google Slides

• Faire des diagrammes et infographies

• Faire des plans de son salon ou son jardin, design d'intérieur

• Des modèles de tricot

• Explorer des couleurs de maquillage

• Créations graphiques diverses comme vignettes YouTube

• Créer des jeux de société

• Organiser ses pensées visuellement

• Faire des CV

On peut trouver des templates Figma, des plugins Figma, et même des kits UI pour Figma.

La Figma Community regroupe des fichiers publiés par d'autres utilisateurs : modèles de sites Web, kits UI, wireframes, modèles de présentations et de tableaux blancs. Avec un compte Figma, vous pouvez dupliquer un fichier de la Community dans votre espace. Certaines ressources sont gratuites, d'autres payantes. Un modèle fait gagner du temps pour démarrer, à condition de l'adapter à votre marque.

Les plugins ajoutent des fonctions à Figma. Ils se trouvent eux aussi dans la Figma Community, avec les widgets, et sont publiés par Figma ou par d'autres utilisateurs. Toute personne qui peut modifier un fichier peut y lancer un plugin, dans Figma Design, FigJam ou Figma Slides ; il n'est visible que par la personne qui l'utilise. Installez-en peu, et seulement ceux qui répondent à un besoin précis.

WireFramer : kit de wireframing basse/moyenne fidélité qui vise à vous donner la flexibilité et la rapidité nécessaires pour mettre rapidement vos idées en forme. WireFramer tente de réduire au minimum les composants principaux (pour qu'ils soient faciles à trouver), mais avec de nombreuses options que vous pouvez personnaliser.

Le point de départ le plus fiable est la documentation officielle, Figma Learn (help.figma.com) : guides de démarrage, cours par compétence et petits exercices pratiques. Figma publie aussi des tutoriels vidéo sur sa chaîne YouTube officielle (@Figma). Comme le logiciel évolue souvent, privilégiez ces sources ou des tutoriels récents : les menus changent d'une version à l'autre.

Figmaster