Comment bien utiliser Figma ?

Si vous vous dites que Figma est un très bon outil, mais trop compliqué à utiliser et très chronophage, vous êtes au bon endroit. Dans cet article, vous allez découvrir comment bien utiliser Figma afin de gagner du temps et créer des maquettes de bien meilleure qualité.

UX / UI : Définition et enjeux

L'UX (User experience) et l'UI (User interface) sont deux termes très importants car ils constituent le fondement même du Web Design. Ces deux concepts se concentrent chacun sur un aspect de la création d'un produit : l'un sur l'interactivité et l'intuitivité et l'autre sur l'homogénéité et la cohérence visuelle.

L'utilisateur final est placé au coeur du processus de création de l'UX d'une application. Cet aspect du web design se concentre sur la partie fonctionnelle d'une maquette, il est donc primordial pour permettre à une personne de facilement prendre en main un outil et de l'utiliser quotidiennement sans difficulté et de manière efficace.

Au contraire, L'UI se focalise sur la partie visuelle d'un design. Ce travail est généralement réalisé après la mise en place de l'UX et permet de rendre une application jolie, moderne et surtout homogène. Une UI travaillée et soignée va transmettre une image positive d'un produit ou d'une marque à la personne qui l'utilise.

Figma

Figma est un outil prépondérant dans les domaines du Web Design et du Développement web. Il permet à des équipes techniques ou de créatifs de concevoir et de créer en collaborant sur un même fichier, de brainstormer ou d'organiser des idées. Il embarque tout un tas de fonctionnalités, d'outils et de plugins permettant de faciliter et d'accélérer la création.

Bien que Figma soit un excellent outil, il est souvent utilisé de la mauvaise manière : création de blocs à la volée, placement des éléments au pixel près et bien évidemment l'obligation de tout replacer manuellement si un ou plusieurs éléments viennent à être modifiés. Par conséquent, cela peut vite engendrer des complications quand il s'agit d'apporter des modifications ou de faire des ajouts sur un gros projet.

Finalement, une maquette bien faite est une maquette qui embarque :

• Des styles globaux servant à définir des couleurs, des typographies ou des effets (box-shadow, grid, etc...)
• Une utilisation des Frames et de l'Auto-layout pour faciliter la disposition des éléments
• Des composants permettant de centraliser toutes les propriétés d'un élément

Styles globaux

Un menu "Styles" est présent dans l'interface de Figma permettant de définir des variables (couleurs, typographies, shadows, layout, etc...) qui seront ensuite accessibles dans toutes les pages du projet.

Frames et Auto-layout

Une frame est un élément qui agit comme un conteneur servant à organiser d'autres éléments comme du texte, des formes ou des images. Les frames peuvent être stylisées de la même manière que les autres "blocs" et peuvent également être encapsulées les unes dans les autres afin de créer des designs complexes. Cet élément est indispensable à l'utilisation de l'Auto-layout.

L'auto-layout est un équivalent du standard Flexbox en CSS. En effet, il embarque une grande partie de ses propriétés comme flex-direction, justify-content, align-items et flex-wrap. Concrètement, l'auto-layout permet de faciliter et d'accélérer le positionnement de différents éléments présents dans une frame, y compris de manière responsive.

Composants

L'utilisation de composants est une approche permettant d'accélérer grandement la création d'une interface. On distingue deux notions fondamentales concernant les composants :

• Le composant principal qui embarque le style, les propriétés, les variants, etc...
• L'instance du composant utilisée dans le fichier de design qui est une copie du composant principal

Le principal avantage des composants est qu'une modification apportée à l'un d'eux va automatiquement se répercuter sur toutes ses instances, permettant ainsi d'éviter des mises à jour manuelles répétitives et chronophages. Un autre avantage est de pouvoir créer des variants ou des états différents pour un même composant. On pourrait donc imaginer pour un bouton un variant solid et un variant outline sur lesquels sont définis des styles différents, nous permettant d'utiliser un même composant pour différents contextes.

Bonus : Plugins, widgets, assets

Figma propose également des fonctionnalités annexes permettant de faciliter et accélérer grandement le développement d'interfaces.

Dans ces outils, on retrouve :

• Les plugins et les widgets qui permettent d'importer du texte de remplacement, des images ou des icônes directement dans le fichier de design (exemple : Lorem Ipsum, Phosphor Icons, Unsplash, etc...).
• Les assets permettent de récupérer et d'insérer des composants de son propre fichier de design, ou alors de libraries de composants externes comme Material 3 ou Simple Design System de Figma.

Conclusion

En conclusion, Figma reste un outil très abordable quant à sa prise en main. Les fonctionnalités abordées telles que les frames, l'auto-layout, les composants et les styles peuvent paraître intimidantes au premier abord mais apportent une réelle plus-value à un projet. L'utilisation de ces outils rend le projet plus facilement accessible et maintenable, en plus de faire gagner un temps considérable pendant le développement.

Au-delà des outils de conception, Figma brille également pour ses autres fonctionnalités comme les commentaires, permettant entre autres aux équipes de collaborer directement au sein d'un même fichier. Figma propose également une fonctionnalité de prototypage interactif qui permet de donner pleinement vie au projet en ajoutant de l'interactivité directement sur les maquettes.

L'investissement initial dans l'apprentissage de l'outil est donc au final très vite rentabilisé.