Figma : Qu'est-ce que Figma ?

Qu'est-ce que Figma ?

Figma est un outil de conception d'interfaces numeriques entierement base sur le cloud, accessible depuis un navigateur web ou une application de bureau. Contrairement aux outils de design traditionnels qui fonctionnent en local, Figma permet a plusieurs designers, developpeurs et parties prenantes de travailler simultanement sur le meme fichier, en temps reel, a la maniere de Google Docs pour le design.

Lance en 2016, Figma a revolutionne le monde du design d'interfaces en eliminant les frictions liees au partage de fichiers, aux versions concurrentes et a l'isolation des designers. Il couvre l'ensemble du flux de conception : wireframing, design haute fidelite, prototypage interactif, creation de design systems, handoff aux developpeurs et gestion des assets.

Chez Kern-IT, au sein de la division KERNWEB, Figma est l'outil central de toute la chaine de conception. Chaque projet web demarre dans Figma (wireframes et prototypes) et s'y termine (specifications de design pour les developpeurs). L'integration avec le workflow de developpement Tailwind CSS est fluide : les tokens de design definis dans Figma sont transposes directement dans la configuration Tailwind.

Pourquoi Figma est important

Figma a transforme la maniere dont les equipes design travaillent et collaborent. Son impact depasse largement l'outil lui-meme pour influencer les processus et la culture de conception.

• Collaboration en temps reel : plusieurs personnes peuvent editer le meme fichier simultanement, avec des curseurs visibles et des commentaires contextuels. Cette capacite elimine les allers-retours de fichiers et les conflits de version.
• Accessibilite universelle : Figma fonctionne dans un navigateur web, sans installation locale. Un client peut consulter et commenter un design depuis n'importe quel appareil, sans licence ni logiciel specifique.
• Source unique de verite : le fichier Figma est toujours a jour. Il n'existe pas de version "v2_final_vraiment_final.fig" qui circule par email. Tout le monde travaille sur la meme version.
• Prototypage integre : le prototypage interactif est natif dans Figma, sans besoin d'exporter vers un outil tiers. Les transitions, les micro-interactions et les flux utilisateurs sont definis directement dans l'outil de design.
• Mode Dev : le mode Dev de Figma fournit automatiquement aux developpeurs les specifications CSS, les mesures, les couleurs et les assets exportables, facilitant le passage du design au code.

Comment ca fonctionne

Figma organise le travail de design dans une structure hierarchique : organisation, equipe, projet, fichier, page, cadre (frame). Chaque fichier peut contenir plusieurs pages, et chaque page peut contenir de nombreux cadres qui representent des ecrans, des composants ou des zones de travail.

Le systeme de composants est au coeur de Figma. Un composant est un element de design reutilisable (bouton, champ de formulaire, carte, en-tete) qui peut etre instancie a travers l'ensemble du projet. Lorsque le composant principal est modifie, toutes ses instances sont mises a jour automatiquement. Ce mecanisme est fondamental pour maintenir la coherence d'un design system.

Les variables et les tokens de design permettent de definir des valeurs centralisees (couleurs, espacements, rayons de bordure, typographies) qui sont referencies dans l'ensemble du projet. Chez Kern-IT, ces tokens Figma sont alignes avec la configuration Tailwind CSS du projet, ce qui garantit une correspondance exacte entre le design et le code.

Le prototypage dans Figma fonctionne par connexion d'ecrans via des interactions (clic, survol, glisser, minuterie). Chaque interaction peut declencher une transition animee (fondu, glissement, dissolution) vers un ecran cible. Les prototypes sont partageables via un simple lien, ce qui facilite les tests utilisateurs et les presentations clients.

Exemple concret

L'equipe KERNWEB de Kern-IT utilise Figma pour concevoir le site web d'une startup edtech (technologie educative) bruxelloise. Le projet comprend douze pages distinctes et un espace de connexion pour les etudiants.

Le designer cree d'abord un design system dans une bibliotheque Figma partagee : palette de couleurs (definie en variables), echelle typographique, composants de boutons (quatre variantes, cinq etats chacune), composants de cartes de cours, composants de navigation et composants de formulaire. Ce design system represente une trentaine de composants maitre.

Les douze pages sont ensuite assemblees a partir de ces composants, garantissant une coherence visuelle totale. Un prototype interactif relie les pages entre elles et simule les parcours principaux : decouverte du catalogue, inscription a un cours et acces au tableau de bord etudiant.

Le client revoit le prototype via le lien Figma et laisse des commentaires contextuels directement sur les ecrans. Apres validation, le developpeur utilise le mode Dev pour extraire les specifications et implemente les pages dans Wagtail CMS avec Tailwind CSS, en transposant les tokens Figma dans le fichier tailwind.config.js.

Mise en oeuvre

1. Structurer le projet : creer un projet Figma avec des pages dediees (wireframes, design system, maquettes, prototype) et une convention de nommage claire.
2. Definir les tokens de design : configurer les variables de couleurs, typographies et espacements qui serviront de base a tout le projet.
3. Construire la bibliotheque de composants : creer les composants reutilisables avec leurs variantes et leurs etats, organises dans une structure atomic design.
4. Concevoir les ecrans : assembler les pages a partir des composants de la bibliotheque, en respectant la grille et les tokens definis.
5. Prototyper les flux : connecter les ecrans par des interactions pour creer des parcours navigables testables par les utilisateurs et le client.
6. Preparer le handoff : verifier que les composants sont bien nommes, que les tokens sont a jour et que le mode Dev fournit les informations correctes aux developpeurs.

Technologies et outils associes

• Tailwind CSS : le framework CSS utilitaire dont la configuration (couleurs, espacements, typographies) est alignee avec les tokens de design Figma chez Kern-IT, garantissant une fidelite design-code optimale.
• Wagtail CMS : le CMS Django dont les templates sont developpes a partir des maquettes Figma. Les StreamField blocks correspondent aux composants de la bibliotheque Figma.
• FigJam : l'outil de tableau blanc collaboratif de Figma, utilise pour les ateliers de cadrage, les cartes de parcours utilisateurs et les sessions de brainstorming.

Conclusion

Figma est bien plus qu'un outil de design : c'est la plateforme de collaboration qui relie designers, developpeurs et clients dans un flux de travail fluide et transparent. Chez Kern-IT, la division KERNWEB a fait de Figma le pivot de sa chaine de conception : chaque projet web nait dans Figma sous forme de wireframes, evolue en design haute fidelite, est valide via des prototypes interactifs et se traduit fidelement en code Tailwind CSS integre dans Wagtail CMS.