Figma

Figma est notre outil de design unique chez Justa. Tous nos projets clients y vivent : design system, maquettes, prototypes, handoff. Cette page décrit notre méthodologie Figma vers Webflow et les plugins qu'on utilise au quotidien.

Dernière mise à jour :

5/5/2026

Informations

année de création : 2016

Créé par : Dylan Field & Evan Wallace

Intégration Webflow : Plugin officiel disponible

Démarrer un design Figma

Contacter Justa

Notre point de vue sur Figma

Figma est devenu un standard universel parce qu'il résout deux problèmes que Sketch et Adobe XD n'ont jamais résolus : la collaboration en temps réel et l'accès web sans installation. Pour une agence qui passe ses fichiers entre designers, devs, clients et freelances, c'est non négociable.

Sur les projets Webflow, Figma joue un rôle particulier : il sert de source de vérité visuelle ET de cahier des charges de développement. Bien structuré, il rend l'intégration Webflow quasi mécanique. Mal structuré, il fait perdre des jours en allers-retours.

Quand on choisit Figma

  • Tout projet de site Webflow. C'est notre standard, pas une option.
  • Projet avec design system. Composants, variants, tokens via Tokens Studio, le tout versionné dans des fichiers de bibliothèque.
  • Collaboration designer + dev en parallèle. Le mode Dev de Figma rend l'inspection des espacements, couleurs et typographies immédiate côté Webflow.
  • Prototypage interactif. Quand on doit valider des micro-interactions ou des flows de navigation avant de développer.

Quand on déconseille Figma

  • Génération d'assets vectoriels lourds. Pour des illustrations complexes ou des maquettes print, Adobe Illustrator reste plus puissant.
  • Animation avancée timeline. Figma reste limité sur l'animation. Pour du motion design sérieux, on bascule sur After Effects ou Rive.
  • Édition photo poussée. Figma sait recadrer et appliquer des filtres basiques. Pour de la retouche, Photoshop ou Affinity Photo.

Comment on l'utilise concrètement chez Justa

1. Structure de fichier standardisée

Chaque projet a la même architecture : page Cover, page Discovery (recherche, références), page Wireframes, page UI (par section du site), page Components (design system), page Handoff (annotations dev). Cette uniformité permet à n'importe quel membre de l'équipe de prendre la suite d'un projet sans onboarding.

2. Design tokens via Tokens Studio

Couleurs, typographies, spacing, radius, shadows sont stockés en tokens. Cela permet de faire évoluer le design system sans casser les écrans existants, et facilite le mapping vers les variables Webflow.

3. Plugin Webflow Labs pour le handoff

On utilise le plugin officiel Webflow pour exporter des structures HTML pré-stylées. Le résultat n'est jamais utilisable tel quel, mais ça accélère la création des composants Webflow d'environ 30 %.

4. Versioning sérieux

Chaque sprint est une branche, chaque livraison client est un snapshot nommé. On peut revenir 3 mois en arrière sur n'importe quel design.

Alternatives qu'on connaît aussi

  • Penpot. Open source, gagne du terrain, à surveiller pour les clients à forte exigence de souveraineté logicielle.
  • Sketch. Toujours utilisé par certaines équipes, mais l'écosystème s'est déplacé.
  • Pencil.dev. Outil IA-First intéressant pour créer rapidement des variantes de mockups

Nos derniers projets réalisés avec Figma

Je veux lancer mon projet avec Justa

Nous contacter

Découvrez d'autres outils

JavaScript et custom code dans Webflow
Custom Code Webflow

Webflow couvre 80 % des besoins en no-code, mais les 20 % restants demandent du JavaScript custom. Chez Justa, on code beaucoup pour étendre Webflow : intégrations tierces, animations sur-mesure, comportements complexes. Cette page explique notre méthode pour ajouter du code propre, performant et maintenable.

Logo Swiper, librairie de carrousels
Swiper

Swiper est notre librairie de slider par défaut quand le composant natif Webflow n'est pas suffisant. Carrousels tactiles, paginations fines, slides infinis, effets 3D, contrôle granulaire des breakpoints : Swiper fait ce que Webflow ne fait pas.

Logo Linguana, traduction IA pour Webflow
Linguana

Linguana est une alternative à Weglot, AI-first et à pricing plus agressif. Installation rapide, traductions générées par IA puis éditables. On l'utilise sur les projets clients où le budget rend Weglot inenvisageable et où la qualité IA brute est acceptable.