Dekolage Academy

Qu’est ce que Figma ?

Rhalid Hidoun

Rhalid Hidoun

Consultant et Formateur en Marketing Digital

Figma : outil de webdesign collaboratif

Figma, outil de webdesign collaboratif

Dans cette article, nous allons voir qu’est-ce que Figma et comment vous allez pouvoir propulser vos différents projets web à travers cet outil.

 

Figma est un outil de design collaboratif qui va vous permettre de réaliser des interfaces utilisateurs très simplement : site internet, application mobile, interface web plus complexe…

Vous avez la possibilité de l’utiliser directement en ligne depuis votre navigateur en mode online, ou tout simplement télécharger le logiciel et de l’installer sur votre ordinateur.

Concrètement, qu’est ce que vous allez pouvoir faire avec Figma ? Nous allons le voir ensemble. Voici 3 axes sur lesquels Figma s’est positionné :

FigJam, outil de Brainstorm et de travail collaboratif

FigJam concerne une première approche de Brainstorm et de travail collaboratif. A travers cet outil, vous aurez la possibilité de travailler sur des FigJam qui sont des tableaux blancs virtuels. Le travail en équipe est de cette manière facilitée. Vous pouvez travailler ensemble et échanger vos idées sur un même fichier à distance. Cette première étape peut être essentiel pour poser les premières briques de votre web design et ainsi avancer dans le bon sens.
Figma Brainstorm

Design, conception de Wireframes et de Mockups

Le second axe concerne la partie graphique et comporte 2 étapes importantes. 

 

On va pouvoir créer des Wireframes qui sont une sorte de schéma de votre projet web. C’est une ébauche représentative de la globalité de votre site web ou application mobile par exemple, mais de manière schématique : sans harmonie des couleurs, sans effet… Nous allons dans un premier temps passer par cette étape de wireframe pour valider l’idée, la structure, la globalité du projet avec votre interlocuteur : votre client, votre supérieur hiérarchique, votre collaborateur par exemple… 

 

La phase suivante est la réalisation des Mockups, les maquettes qui reflètent fidèlement le produit finit. C’est une étape importante pour éviter les innombrables allers-retours sur votre plan de travail.

Figma design

Prototype, création de votre Design System / UI kit

La phase de prototypage va nous permettre de créer les différentes interactions, les effets, les animations présentes sur vos pages et les présenter en live sur votre navigateur. Vous pourrez créer très facilement votre Design System ou votre UI kit : ensemble de composants qui va nous permettre de gagner du temps et d’optimiser notre travail. Vous pourrez ainsi travailler sur les différentes typographies et la sémantique des titres et paragraphes, les comportements des boutons… L’idée est de préparer en amont tout notre design system pour avoir un ensemble cohérent sur toutes nos pages de notre projet web. Figma nous permet de gérer cette partie avec la création de Composants.

Figma prototype

Vous l’aurez compris c’est un must have pour pouvoir concevoir son web design ou son application.

 

Vous voulez aller plus loin dans la prise en main de Figma ? Je vous propose une formation complète de 4h qui va vous permettre de devenir complètement autonome sur l’outil : > En Savoir Plus

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.