Figma Canvas (AI agent canvas)

Qu'est-ce que Figma Canvas ?

Figma Canvas, comme décrit dans cet article de blog Figma, est le workflow canvas de Figma ouvert aux agents IA pour qu'ils puissent concevoir directement dans les fichiers Figma. L'objectif principal est de permettre aux agents de créer et mettre à jour des actifs de design tout en utilisant le même contexte de design que les équipes maintiennent dans Figma — comme un design system, des composants, des variables et les conventions d'équipe.

L'article introduit également un serveur Figma MCP en bêta pour connecter Figma aux workflows de développement, permettant aux outils pilotés par LLM de générer et modifier des travaux de design tout en restant liés à la structure de design existante.

Fonctionnalités clés

• Les agents IA peuvent écrire directement dans les fichiers Figma sur le canvas afin que les travaux générés puissent être créés ou modifiés au même endroit où les équipes itèrent sur les designs.
• Un serveur Figma MCP en bêta qui intègre Figma dans le workflow développeur/LLM pour supporter la génération de code informée par le design et les opérations sur les actifs de design.
• L'outil use_figma pour les opérations sur le canvas permettant aux clients MCP (y compris Claude Code et Codex mentionnés dans l'article) de générer et modifier des actifs de design liés au design system.
• Contexte partagé entre code et canvas pour que les agents puissent passer fluidement de la mise à jour d'UI dérivée du code à l'affinage des designs dans Figma.
• Skills pour guider le comportement des agents via des instructions markdown où les skills définissent les étapes du workflow, la séquencing et les conventions à suivre dans Figma.

Comment utiliser Figma Canvas

1. Utilisez un client MCP qui supporte le serveur MCP de Figma (l'article mentionne des outils comme Claude Code et Codex) pour accéder aux capacités Figma via MCP.
2. Utilisez l'outil use_figma pour indiquer à l'agent de créer ou mettre à jour des composants et autres actifs de design dans Figma en utilisant le contexte de votre design system.
3. Ajoutez des instructions via des skills en fournissant des instructions basées sur markdown que l'agent peut suivre pour exécuter des tâches dans Figma (y compris le skill fondamental /figma-use référencé dans l'article).
4. Optionnellement, synchronisez à partir d'UI live avec generate_figma_design quand vous partez de HTML/code, puis passez à use_figma pour éditer ces designs avec les composants et variables existants.

Cas d'usage

• Transformer un codebase en composants Figma initiaux : Utilisez un skill comme /figma-generate-library pour créer de nouveaux composants dans Figma à partir d'un codebase.
• Générer de nouveaux écrans en utilisant des composants et variables existants : Utilisez /figma-generate-design pour que l'agent construise des designs dans Figma en s'appuyant sur des composants/variables plutôt qu'un layout libre.
• Appliquer des specs d'accessibilité à partir de descriptions UI : Utilisez create-voice pour générer des specs de lecteur d'écran (VoiceOver, TalkBack, ARIA) à partir de specs UI.
• Imposer des conventions d'espacement via des règles conscientes du système : Utilisez rad-spacing pour appliquer des patterns d'espacement hiérarchiques dans Figma.
• Connecter ou remapper des designs existants aux composants du système : Utilisez apply-design-system pour aligner les designs sur les composants du système au lieu de les laisser comme des calques déconnectés.

FAQ

Est-ce une fonctionnalité payante ?

L'article de blog indique que le support des agents IA sur le canvas Figma deviendra éventuellement une fonctionnalité payante basée sur l'usage, mais elle est disponible gratuitement pendant la période bêta.

Quels outils permettent aux agents de travailler dans Figma ?

L'article décrit un outil use_figma pour que les agents opèrent sur le canvas en utilisant le contexte du design system. Il référence également un outil existant generate_figma_design pour traduire le HTML d'apps/sites live en calques Figma éditables.

Qu'est-ce que les « skills » dans ce workflow ?

Dans l'article, les skills sont des ensembles d'instructions écrites sous forme de fichiers markdown qui façonnent la façon dont les agents opèrent dans Figma — couvrant les étapes du workflow, la séquencing, les conventions et les connaissances domaine nécessaires pour produire des designs durables et alignés sur la marque.

Ai-je besoin de créer un plugin pour authoriser des skills ?

Non. L'article précise que n'importe qui peut authoriser un skill, et qu'il ne nécessite pas de créer un plugin ou d'écrire du code.

Les outils mentionnés sont-ils seulement pour des agents spécifiques (ex. Claude Code) ?

L'article nomme Claude Code et Codex comme clients MCP pouvant utiliser use_figma, et décrit également « d'autres clients MCP ». Il ne liste pas une matrice de compatibilité complète.

Alternatives

• Flux de travail de traduction design-to-code (sans édition directe par agent sur le canvas) : Vous pouvez générer des designs en dehors de Figma ou traiter Figma comme une cible en lecture seule, puis reconstruire manuellement les assets dans Figma. Cela diffère par l’absence d’éditions directes par agent liées à votre design system au sein du canvas.
• Utiliser l’automatisation Figma seule ou des plugins existants : Si vous avez besoin de composants et variables cohérents sans agents IA, vous pouvez compter sur les plugins Figma ou des approches basées sur des templates. Cela échange l’autonomie des agents contre un comportement plus déterministe.
• Flux de travail d’agents générant des artefacts de design en dehors de Figma : Certaines chaînes d’outils LLM peuvent produire des fichiers de design ou des spécifications pour un designer à implémenter. Comparé à l’approche décrite ici, les agents ne modifieront pas directement les mêmes composants/variables Figma via use_figma.
• Traduction HTML-to-Figma uniquement : Si votre focus est d’importer des UI existantes dans Figma (via la capacité de type generate_figma_design) sans la boucle d’édition sur le canvas agent, cela peut réduire la complexité mais nécessitera plus de suivi manuel pour s’aligner sur le design system.