# From Claude Code to Figma: Turning production code into editable Figma designs

DevFeed: [From Claude Code to Figma: Turning production code into editable Figma designs](<https://devfeed.tech/articles/from-claude-code-to-figma-turning-production-code-into-editable-figma-designs-9868.md>)

Original publisher: [Read original article](<https://www.figma.com/blog/introducing-claude-code-to-figma/>)

Author: Gui Seiz; Alex Kern

Published: 2026-02-17T13:42:25.314000Z

Content type: article

Language: en

Sources: [Figma Blog](<https://devfeed.tech/sources/figma-blog.md>)

Topics: [Figma](<https://devfeed.tech/topics/figma.md>), [Claude Code](<https://devfeed.tech/topics/claude-code.md>), [ui](<https://devfeed.tech/topics/ui.md>), [Development](<https://devfeed.tech/topics/development.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [claude-code](<https://devfeed.tech/tags/claude-code.md>), [design](<https://devfeed.tech/tags/design.md>), [developers](<https://devfeed.tech/tags/developers.md>), [figma](<https://devfeed.tech/tags/figma.md>), [prototypes](<https://devfeed.tech/tags/prototypes.md>), [screenshots](<https://devfeed.tech/tags/screenshots.md>), [ui](<https://devfeed.tech/tags/ui.md>)

## AI overview

Figma describes a Claude Code to Figma workflow that captures functioning interfaces from a browser, including production, staging, or localhost environments, and converts them into editable Figma frames. The workflow supports organizing, refining, annotating, and sharing captured screens with a team.

## Source excerpt

Now you can take workflows that start in Claude Code even further in Figma.