Le scénario est classique, presque historique : les designers créent des maquettes statiques sur Figma, les développeurs tentent de les reproduire en code, et les allers-retours s'éternisent. Pire encore, avec l'avènement des agents IA, la génération de code s'est accélérée, mais elle s'est isolée dans des fenêtres de chat textuelles, loin du plan de travail collaboratif.
Figma vient de jeter un pavé dans la mare lors de la Config en présentant les Code Layers (calques de code). L'ambition ? Faire du canevas de design un espace d'exécution de code interactif et collaboratif.
Voici pourquoi cette annonce change la donne pour les équipes produit.
Le Code devient un matériau de design comme un autre
Jusqu'ici, pour tester trois variantes d'un bouton ou d'un flux, un designer dupliquait une frame. Avec les calques de code, la logique reste strictement la même, mais appliquée à du code fonctionnel.
Interactivité réelle : On ne compare plus seulement l'aspect visuel, mais le feeling de l'expérience utilisateur. Vous redimensionnez un composant sur Figma ? Le code s'ajuste en temps réel.
Flexibilité d'entrée : Vous pouvez démarrer un calque de code à partir d'un prompt adressé à l'agent Figma, d'une frame existante, ou en important directement un dossier local ou un dépôt GitHub.
Le chaînon manquant : L'aller-retour fluide (Bidirectional Workflow)
La véritable prouesse des Code Layers réside dans leur nature bidirectionnelle. Figma brise le mur entre le visuel et le textuel grâce à deux fonctionnalités majeures :
Extract Designs (Du Code vers le Design) : Vous avez un composant codé complexe ? Figma est capable de convertir un état ou un flux de ce code en calques Figma standard et modifiables.
Sync & Push (Du Design vers le Code) : Vous modifiez ces calques visuellement, et d'un clic, le calque de code se met à jour. Mieux encore, une fois l'équipe alignée, vous pouvez pusher ces modifications directement sur votre repo Git.
Le constat : L'éditeur de code intégré permet d'annoter, de guider l'agent IA ou de coder soi-même à la main pour affiner les détails. Le design et le code source ne font plus qu'un.
En finir avec l'exploration solitaire de l'IA
Les outils de génération de code par IA actuels souffrent d'un défaut majeur : ils se calfeutrent dans des discussions en tête-à-tête entre un ingénieur et un LLM.
En intégrant le code interactif directement sur le canevas partagé de Figma, l'exploration redevient un sport d'équipe. Les développeurs, les designers et les Product Managers peuvent tester des invites (prompts), laisser des commentaires sur un composant fonctionnel et itérer ensemble, au même endroit.
Qu'en penser ?
Les Code Layers entrent actuellement en version bêta fermée. Si la promesse technique tient la route (notamment sur la propreté du code généré et la gestion des conflits Git), nous assistons peut-être à la concrétisation ultime du mouvement Design Tokens / Design Systems : un monde où le canevas de conception est aussi l'environnement de pré-production.
Et vous, comment imaginez-vous l'intégration de ce type de workflow dans vos pipelines de build et vos équipes produit ?
Les calques de code sont en cours de déploiement progressif. Pour les plus curieux, les inscriptions pour la bêta fermée sont ouvertes sur le site de Figma.
Par Aghilas AZZOUG