How much of a design system is preserved in Claude Code to Figma? I tested it out

As a designer in contract development, including myself, I think we often create UIs and organize screen flows during the requirements definition phase before entering development.
As development progresses, specification changes and text modifications occur, and before we know it, "Is the latest version in Figma or in the implementation?" becomes ambiguous.
If the implementation side has the latest version, there are times when we want to bring that state back to Figma as accurately as possible to update the design data... we've all been there, right?

With "Claude Code to Figma" released by Figma, operations that update Figma based on code as the source of truth might become a reality.

https://www.figma.com/blog/introducing-claude-code-to-figma/

This time, I conducted a verification of "Creating a Material 3 UI in Figma, implementing it with Claude Code in React + MUI, and then bringing it back to Figma with Claude Code to Figma".
The aim was to confirm "how much of the design system (structure/tokens/spacing rules) is retained in the round trip through AI" using procedures close to actual practice.

What Was Verified

Beyond just visual distortions, I focused on whether "design information returns."

• Whether component structure returns
• Whether Variables references remain
• Whether Auto Layout remains in an operable form
• Whether shadows and state expressions are maintained
• Whether naming conventions such as layer names remain

Verification Results

The conclusion is that while the general appearance (AppBar / Card / List / BottomNavigation) aligns, maintaining design information is difficult.

Test Environment

• Figma Desktop App v126.1.2
• Claude Code v1.0.44
• Model claude-sonnet-4-6
• React v19.2.4
• @mui/material v7.3.8
• @emotion/react v11.14.0

Figma Preparation

I created a UI using the Material 3 Design Kit.
Components placed more than once have different Styles and States.

Screen Composition

1. App Bar
2. Text
3. Horizontal card
4. List item
5. Stacked card
6. Fixed Bottom Navigation

I registered Color, Spacing/Radius included in the Material 3 Design Kit as individual Variables to verify whether margins would be referenced as fixed values or radius tokens.

Implementation Conditions

The implementation assumes using MUI's theme functionality to manage colors, rounded corners, and margins together as tokens.
To avoid brute-forcing the appearance, which would invalidate the verification, I limited theme modifications to palette / shape.borderRadius / spacing only.
components.*.styleOverrides was not used.

Additionally, since AI implementations tend to omit elements at the bottom of the screen (like BottomNavigation), I specified "no omissions + specified order" in my prompts.

What is a theme?

In MUI, it's a configuration that collects the "visual rules for the entire app (colors, spacing, rounded corners, etc.)".
It's created with createTheme and applied to the entire app with ThemeProvider.

Prompt

I instructed the following in Claude Code on VSCode:

Please implement a single "ProductListScreen" using React + MUI, referencing the following Figma (refactoring existing implementation is OK).
Figma:
https://www.figma.com/design/……………………………………
Target frame: ProductListScreen
Conditions (tokenization with theme):
- Define and apply theme using createTheme + ThemeProvider
- Only these 3 items can be set in the theme:
  1) palette (primary/secondary/background/text/divider, etc.)
  2) shape.borderRadius (e.g., 12)
  3) spacing (base is 4px. spacing(4)=16px, spacing(3)=12px, spacing(20)=80px should be valid)
- Don't use components styleOverrides
- Implement all elements from the Figma without omitting anything down to the bottom of the screen
UI to implement (in order from top to bottom):
1) AppBar (title: "Label")
2) 3 lines of descriptive text (Overline / Label text / Supporting line text)
3) 2 Horizontal cards (A/B)
4) 2 List items (one with a Switch)
5) 2 Stacked cards (horizontal scroll)
6) Fixed BottomNavigation (3 tabs, showLabels to always display labels)
Implementation:
- Create src/theme.js
- Apply ThemeProvider + CssBaseline in src/main.jsx
- Create/modify src/ProductListScreen.jsx
- Display ProductListScreen in src/App.jsx
- Please provide a list of modified/created files and the content of each file

Claude Code to Figma

• I ran generate_figma_design via MCP to import the Web screen (localhost) into Figma.
• Clicking "Send to Figma" inputs it into Figma.
• In this environment, the Figma MCP tool was read-only and couldn't directly edit existing frames, Variables values, or change colors/properties of existing nodes.
  As a result, Claude Code to Figma relied on generate_figma_design (Web capture).

If a frame with the capture results is added to the open Figma file, the import was successful.

UI Output by Claude Code to Figma

Summary

• I was able to reflect implementation results in Figma via Claude Code to Figma.
• It's very useful when code is available but Figma design data is not.
• It was difficult to maintain Material 3 design information (component structure, Variables references, naming) during the round trip, and Auto Layout remained only partially.
• For maintaining a design system during round trips, reproduction with a single instruction was difficult, requiring additional instructions or prompt adjustments.

Troubleshooting Notes

I ran into some issues during this verification, so I'm noting them for future reference.

• When running generate_figma_design for connectivity testing, requests can get large, so instruct to prohibit any editing.
• mcp.json is located in .vscode/mcp.json in the project, and the Figma MCP connection is set to type: "http" / url: "http://127.0.0.1:3845/mcp" (= referencing the local Figma MCP server)
• If the server status on VSCode shows as Running and displays Discovered 6 tools / 3 prompts, it's a good indicator that at least the "VSCode → Figma MCP" connection is established.
• Directly opening http://127.0.0.1:3845/mcp in a browser may return Invalid sessionId, but this doesn't necessarily mean failure (MCP expects clients like VSCode to call with a session, not browsers)

Though there are breakdowns, I'm amazed at how easily we can go back and forth between Figma and code through AI.
This verification made me realize my lack of understanding of Claude Code to Figma and prompt skills.
I'll continue studying Claude Code and Figma.

Thank you for reading to the end.