Figma
Figma est un outil de conception d'interfaces qui fonctionne directement dans le navigateur et permet à plusieurs personnes de dessiner, commenter et rendre cliquables les écrans d'un site ou d'une application dans un même fichier partagé, en temps réel. C'est aujourd'hui l'outil de référence pour les maquettes de projets web et mobiles.
Le meilleur point de comparaison est la bureautique en ligne : Figma est au design ce que les documents partagés sont au traitement de texte. Avant lui, chacun travaillait sur son poste et s'échangeait des fichiers lourds, avec les conséquences que l'on connaît, du fichier nommé maquette-v3-final-vrai-final aux retours envoyés en captures d'écran collées dans un mail. Avec un lien unique, tout le monde voit la même version au même moment, et les commentaires restent attachés à l'endroit précis dont ils parlent.
En quoi ça consiste
Un fichier Figma contient des cadres, un par écran, organisés par parcours. Les éléments répétés (bouton, carte, en-tête) sont déclarés comme composants : on les modifie à un seul endroit et la correction se propage partout. Le mode prototype relie les écrans entre eux pour simuler la navigation. Un mode dédié aux développeurs expose les valeurs exactes de couleurs, de tailles et d'espacements, et permet d'exporter les images. Il existe une offre gratuite adaptée aux usages limités, et des formules payantes facturées par éditeur.
À quoi ça sert concrètement
- Valider avant de coder : voir et cliquer une interface avant le développement évite les corrections tardives, qui sont les plus chères.
- Réunir les avis au bon endroit : un client peut commenter sans rien installer et sans risquer de modifier la maquette.
- Faire gagner du temps au développement : les valeurs précises et les exports d'images sont récupérés directement, sans allers-retours par mail.
- Capitaliser : la bibliothèque de composants devient la référence visuelle de la marque, réutilisable sur les pages suivantes.
Les erreurs fréquentes
Prendre le prototype pour le produit : ça clique, mais rien ne fonctionne derrière et aucune donnée n'est enregistrée. Laisser le fichier diverger du site en ligne après quelques mois de corrections, puis continuer à s'y fier. Accumuler des dizaines de variantes sans indiquer laquelle est validée. Ne pas obtenir l'accès au fichier à la fin d'une prestation : la maquette de votre site vous appartient, exigez-la ou faites-la dupliquer dans votre propre espace.
Comment ça s'articule avec le reste du projet
Figma prend le relais des wireframes et précède l'intégration. Le fichier validé sert de contrat visuel : ce qui y figure sera développé, ce qui n'y figure pas fera l'objet d'un avenant. Pendant le développement, il reste ouvert comme référence, puis il est mis à jour à chaque évolution pour rester utile lors de la refonte suivante.
Termes associés
Persona
Un persona est le portrait fictif mais documenté d'un utilisateur type, construit à partir d'élémen...
Firebase
Firebase est une plateforme de développement d'applications proposée par Google, qui réunit des ser...
Features
Une feature, ou fonctionnalité, est une capacité identifiable qu'un produit numérique offre à son u...
KPI
Un KPI, pour Key Performance Indicator ou indicateur clé de performance, est une mesure chiffrée su...
Prototype
Un prototype est une version simulée et cliquable d'un produit numérique : on navigue d'un écran à ...
Fastlane
Fastlane est un outil open source en ligne de commande qui automatise les tâches répétitives de pub...
