Figma et Anthropic lancent Code to Canvas pour transformer le code en designs modifiables

Figma et Anthropic ont officiellement lancé Code to Canvas, une nouvelle intégration qui comble le fossé entre le code et le design en permettant aux développeurs de capturer une interface utilisateur fonctionnelle depuis un navigateur et de la convertir en frame Figma entièrement modifiable.

Comment ça fonctionne

L'intégration repose sur le serveur MCP (Model Context Protocol) de Figma, un standard ouvert qui permet aux outils d'IA de se connecter aux sources de données et applications externes. Il agit comme un adaptateur universel entre Claude Code et l'environnement de design Figma.

Pour la configuration, les développeurs activent le serveur MCP dans les préférences de l'application Figma de bureau, activent "Dev Mode MCP Server", puis exécutent une commande terminal pour connecter Claude Code :

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

Une fois connecté, Claude Code peut capturer l'état en direct du navigateur — que ce soit en production, staging ou localhost — et le convertir en frames compatibles Figma que les designers peuvent modifier directement.

Pourquoi c'est important

Pour les équipes qui utilisent déjà des outils de développement assistés par l'IA, cette intégration élimine l'un des derniers points de friction majeurs : ramener le travail des développeurs dans un espace de design partagé où tout le monde peut contribuer.

Traditionnellement, le transfert entre code et design était unidirectionnel. Les designers créent des maquettes dans Figma, les développeurs les implémentent en code, et les modifications visuelles dans le code reviennent rarement au fichier de design. Code to Canvas inverse ce flux, créant un pont bidirectionnel.

Capacités clés

• Capture en direct : capturer toute interface depuis un navigateur actif, y compris les états dynamiques difficiles à simuler dans les outils de design
• Frames entièrement modifiables : les résultats sont du Figma natif — pas des captures d'écran ou des images aplaties — permettant aux designers de modifier les layouts, couleurs et typographies
• Basé sur MCP : construit sur le standard ouvert Model Context Protocol, le rendant extensible et interopérable
• Fonctionne avec Claude Code : exploite Claude Sonnet 4.6 d'Anthropic pour une compréhension intelligente des interfaces

Réactions de la communauté

L'annonce a attiré une attention significative de la communauté des développeurs, avec plus de 9 700 publications sur X discutant de l'intégration. De nombreux développeurs ont souligné le potentiel de réduction des frictions entre design et développement, tandis que les designers ont noté la valeur de pouvoir inspecter et itérer sur des interfaces en production.

CNBC a rapporté que ce partenariat reflète une tendance plus large des outils d'IA à briser les silos traditionnels entre les équipes de design et d'ingénierie.

Et ensuite

Figma et Anthropic ont signalé que ce n'est que le début de leur partenariat. L'architecture basée sur MCP suggère que les futures intégrations pourraient s'étendre au-delà de la capture d'interfaces pour inclure la synchronisation automatisée des systèmes de design et les revues de design assistées par l'IA.

Source : Figma Blog