It's 2026, and MCP and design tooling are constantly changing with various improvements in the AI space. Arguably, one of the most long-awaited features was Figma MCP supporting agents writing to its canvas. The funny thing is, I created a particular workflow 2 weeks ago, the lack of the write to canvas was a bit of a bottleneck but could be worked around since Claude Code was pretty good at generating plugins to create and clean up tokens (variables), as well as components and their props. Thankfully, that gap didn't hang around for long enough, and now there's native support for writing directly to canvas.
Firstly, we'll look at how we can set up the correct tooling for the following use case:
- You've joined a startup, they have a website or a web page, but lack any reusable design system in either codebase or Figma. You want to generate semantic CSS variables and a basic set of web components in React and have the exact same copy of them in Figma.
If you have Claude Code, the good news is that you can achieve it with just 4 commands.
What are Claude Code commands?
For this workflow, we'll be using commands, since they're a set of repeatable instructions that can be invoked in the order we want, and every step can be controlled and double-checked.
Starter files
You can download or clone pre-defined commands as part of the starter repository here:
https://github.com/saintasia/workshop-claude-figma-design-system
Building the design system
1. Check that the repository is correctly initiated in Claude Code
Open terminal, go inside the repository you downloaded, cd REPOSITORY, run claude and try typing /extract to see if /extract-tokens command is on the list. If it is, then we're ready to go.
2. Extract tokens from a web page
I suggest making sure the page you're feeding Claude has all the colours and primary and secondary buttons for its reference, so that it can read a more complete token system.
When Claude is done with the command, you should get a token summary:
This command will generate a raw.json file with semantic and other token mapping for easier further organisation.
3. Build token system
Once the previous step is complete, Claude Code should let you know to run the following command: /build-token-system.
This command will generate structured css and json files under the tokens/system directory and give you a summary, including the contrast audit. It will also generate a human-readable token-conventions.md that will list the decisions it made and the implied rules that it has detected.
4. Generate React components
After we have the token systems and descriptions in place, we can generate our web components, including a basic preview of the entire design system by running /generate-components. You can follow the command up with a list of components you'd like to be generated, otherwise it will generate a basic set that includes some elements it has detected when first looking at the colour tokens and semantics.
Once the command is done running, you should see a summary of what has been generated, including a web application for preview.
If we run cd preview && npm run dev it should run our preview application locally and we should get something like the following preview in the browser.
5. Generate all the tokens and components in Figma
Once you've confirmed everything is looking pretty good, it's time to run the final command /push-to-figma. Follow it up with a link to the file where you'd like the variable sets and components to be generated.
For this step, make sure you install figma plugin from claude code plugins directory (https://claude.com/plugins/figma). And that you authenticate in order to use Figma's MCP.
Once you get the success message from Claude Code, you can go and check your referred Figma design file; it should have new tabs for tokens and components and be filled with the correct properties and light/dark modes.
All done!
Summary and good follow-up steps
In summary, as the AI tools keep evolving, it's important to keep trying different workflows and pay more attention to context engineering when it comes to reusable steps. Something like the example above could previously take several days to set up and make sure it's decently synced between the code tokens, components, and Figma; now, with Claude Code the same thing is achievable within about 30 minutes (given the correct context engineering).
Some of the follow-up steps I'd recommend now would be to add Figma's Code Connect to your web components and publish the Design System to be accessible outside of your local environment for developer reusability.
You can also rewrite the /generate-components command to set up a Storybook system instead of a simple web preview, and to also generate documents on how to use and assemble components into full-fledged UI for further reuse.
Top comments (0)