Figma : ce qu'on en pense vraiment.

On utilise Figma pour concevoir chaque site qu'on livre. Voilà comment on l'intègre dans notre workflow Webflow, ce qu'il fait mieux que ses concurrents, et ce qu'on aurait voulu savoir avant de commencer.

Partager sur :

Pourquoi Figma est devenu notre outil de conception exclusif

Quand on conçoit un site pour un client, le design passe systématiquement par Figma avant d'arriver dans Webflow. Ce n'est pas un hasard. C'est le résultat de plusieurs années de pratique, de comparaisons avec d'autres outils, et d'une conviction claire : Figma est aujourd'hui la meilleure solution pour concevoir des interfaces web en équipe, itérer vite et collaborer avec les clients.

Voilà ce qu'on a appris après plus de 60 projets livrés.

Ce que Figma fait mieux que tous ses concurrents

Collaboration en temps réel

C'est la fonctionnalité qui a tout changé pour nous. Plusieurs personnes sur le même fichier, en même temps, sans conflit de version. Notre CMO rédige le copy directement dans les maquettes. Notre designeuse ajuste les composants en temps réel. Le client commente sans avoir besoin d'un compte payant. Tout le monde voit la même chose au même moment.

Avant Figma, on s'envoyait des PDF, des captures d'écran, des fichiers Sketch avec des numéros de version. C'était long, inefficace, source d'erreurs. Figma a éliminé tout ça.

Les composants et l'Auto Layout

Figma a introduit une logique de composants qui ressemble beaucoup à celle de Webflow. Un bouton créé une fois, utilisé partout, modifiable en un clic global. Des grilles et des espacements qui s'adaptent automatiquement au contenu. L'Auto Layout permet de construire des interfaces qui se comportent comme du vrai CSS, ce qui rend le passage à Webflow beaucoup plus fluide.

Pour une agence qui livre des sites Webflow, c'est un avantage décisif. On conçoit dans Figma en pensant déjà à l'intégration. Les composants Figma deviennent des composants Webflow. Les espacements Figma deviennent des variables Webflow. Le handoff est propre. On explique tout ce processus dans notre guide convertir une maquette Figma en site Webflow.

Les variables et le design system

Depuis l'introduction des variables dans Figma, on peut construire de vrais design systems avec des tokens de couleur, de typographie et d'espacement. Pour les projets récurrents ou les clients avec plusieurs sites, c'est une avancée majeure. On crée les variables une fois, on les applique partout, et on peut changer l'ensemble d'un design en modifiant une seule valeur.

La bibliothèque de ressources

Figma Community propose des milliers de ressources gratuites : kits d'UI, icônes, maquettes de wireframe, plugins. Notre équipe utilise régulièrement des plugins comme Unsplash pour les photos, Iconify pour les icônes, ou Content Reel pour les données de test. Ce qui aurait pris des heures à créer from scratch se monte en quelques minutes.

Ce que Figma ne fait pas bien

Aucun outil n'est parfait. Voilà les limites qu'on a rencontrées après des années d'utilisation.

  • Les performances sur les gros fichiers. Quand un projet accumule des dizaines de pages et des centaines de composants, Figma peut devenir lent. Sur des configurations moins puissantes, les latences deviennent frustrantes. On a appris à structurer nos fichiers différemment pour éviter ça.
  • Le prototypage reste limité. Figma permet de créer des prototypes cliquables, mais ils restent superficiels comparés à ce qu'on peut faire avec du vrai code. Pour présenter des micro-interactions complexes ou des animations avancées, on passe directement à Webflow plutôt que de simuler dans Figma.
  • La courbe d'apprentissage de l'Auto Layout. C'est un outil puissant mais contre-intuitif au départ. Les membres juniors de l'équipe mettent du temps avant de maîtriser les comportements d'Auto Layout, surtout pour reproduire fidèlement des layouts CSS complexes.
  • Le prix. Figma est passé d'un modèle freemium généreux à une tarification plus restrictive. Les équipes qui utilisaient intensivement le plan gratuit ont dû s'adapter. Pour une petite agence, le coût par éditeur peut représenter un budget non négligeable.

Pourquoi Figma et Webflow forment un duo si efficace

Figma et Webflow partagent la même philosophie : le visuel d'abord, le code géré proprement en dessous. Cette parenté n'est pas anodine. Les concepts d'Auto Layout dans Figma correspondent presque un pour un aux logiques de flexbox et de grid dans Webflow. Les composants Figma trouvent leur équivalent direct dans les composants Webflow.

Concrètement, un designer qui maîtrise Figma apprend Webflow beaucoup plus vite, parce que la logique structurelle est la même. C'est pour ça qu'on utilise ce duo en exclusivité chez Wenoble. Si vous voulez comprendre pourquoi on a fait de Webflow notre outil de production unique, notre fiche Webflow détaille tout, et notre guide C'est quoi Webflow ? pose les bases pour les débutants.

Notre workflow Figma vers Webflow

Voilà comment on intègre Figma dans notre process concret :

  • Phase ARMO : on crée les directions artistiques dans Figma. Palettes de couleurs, typographies, style des visuels. Le client choisit une direction et on part de là.
  • Phase maquettes : Pré-V1, V1, V2, VF. Chaque version est présentée en mode présentation Figma. Le client commente directement dans le fichier. On itère jusqu'à la version finale signée.
  • Handoff développement : notre CTO inspecte les composants Figma, récupère les valeurs exactes (espacements, couleurs, typographies, rayons) et les intègre dans Webflow. On a développé nos propres conventions de nommage pour que le passage soit le plus fluide possible.
  • Archivage : chaque projet client a son fichier Figma conservé. Si le client revient 2 ans plus tard pour une évolution, on repart de la source, pas d'une capture d'écran.

Questions fréquentes sur Figma

Figma est-il gratuit ?

Figma propose un plan gratuit qui permet de créer et collaborer sur un nombre limité de fichiers. Pour un usage professionnel avec plusieurs projets et éditeurs, il faut passer sur un plan payant facturé par éditeur. Le plan gratuit reste suffisant pour découvrir l'outil ou pour un projet ponctuel.

Peut-on transformer une maquette Figma directement en site ?

Pas automatiquement de manière fiable. Il existe des plugins d'export, mais le code généré est rarement propre ou maintenable. Chez Wenoble, on reconstruit chaque maquette proprement dans Webflow, en s'appuyant sur les valeurs exactes du fichier Figma. C'est plus long, mais le résultat est un site performant et évolutif.

Figma remplace-t-il Photoshop ou Illustrator ?

Pour le design d'interface web et mobile, oui, largement. Figma n'est pas fait pour la retouche photo avancée ou l'illustration vectorielle complexe, domaines où Photoshop et Illustrator restent supérieurs. Pour concevoir des sites et des applications, Figma est aujourd'hui le standard.

Faut-il Figma pour travailler avec une agence Webflow ?

Pas de votre côté. En tant que client, vous pouvez consulter et commenter les maquettes Figma via un simple lien, sans compte ni logiciel à installer. C'est justement l'un des grands avantages de Figma pour la collaboration : la validation des maquettes se fait sans friction.

Notre retour après +60 projets

Figma est l'outil de design que tous les membres de l'équipe utilisent quotidiennement. Il a remplacé Sketch, Adobe XD, et les prototypes PowerPoint qu'on faisait encore il y a quelques années.

Ce qu'on a appris : la qualité d'un site Webflow dépend en grande partie de la qualité des maquettes Figma qui le précèdent. Un fichier Figma bien structuré, avec des composants propres et un Auto Layout cohérent, donne un site Webflow propre, maintenable, et facile à faire évoluer.

Figma est aujourd'hui utilisé par la majorité des équipes design dans le monde, un statut confirmé par des sources indépendantes comme G2 où il cumule des dizaines de milliers d'avis. Notre expérience terrain le confirme : c'est devenu un standard incontournable.

Si vous avez des questions sur comment on utilise Figma dans nos projets, on peut en parler.

Tu souhaites résumé l'article avec une IA :

Maintenant, on passe à l'action ?

Un échange gratuit pour voir comment on peut structurer ton acquisition ensemble.