Figma MCP design system: build and apply one with your agent
A Figma MCP design system is a set of tokens, styles and components that your agent builds and applies in your open file. With FigmaMCP, Claude Code or Codex can create variables, styles, components and variants, and put instances on a screen. You state the rules. FigmaMCP does not enforce them.
The parts of a design system, and who does what
| Part | Tools | What the agent can do |
|---|---|---|
| Tokens | variable_list, variable_manage, node_bind_variable | Read tokens, create them, and bind them to layers. |
| Styles | style_list, style_manage, node_apply_style | Read local styles, create or update paint, text, effect and grid styles, and apply a style to a layer. |
| Components | component_list, create_component, create_component_set | List components, turn a frame into a component, and combine components into variants. |
| Component properties | component_manage_property | Add or edit boolean, text and instance-swap properties. |
| Instances | create_instance, instance_set_property | Place an instance and set its properties. |
| Layout | node_set_auto_layout | Set direction, padding, spacing and alignment on a frame. |
Download for Mac Version 0.1.10
Figma MCP create design system: a sensible order
The agent can build a design system in the open file. Work in layers, and review each one before the next.
Tokens first
Ask for collections and variables: color, spacing, radius. Review the scopes the agent picks.
Then styles
Ask for text and effect styles that match your tokens.
Then components
Ask for one component, such as a button. Combine variants with a component set only after the first one looks right.
Then instances
Ask the agent to place instances in a screen and bind spacing to tokens.
Figma MCP Claude Code design system: how it runs
Claude Code or Codex talks to FigmaMCP, and FigmaMCP acts in the Figma desktop app on your Mac. Your instructions live in your prompt. Name the collection, the naming pattern and the order of work, and the agent will pass those names back to the tools. See Figma MCP for Claude Code for setup.
Figma MCP design system rules
FigmaMCP does not store or enforce your design rules. It will not reject a badly named variable or an off-grid spacing value. State your rules in the request and review the result. What FigmaMCP does enforce is safety:
- Edits go only to the open file where AI can edit this file is on.
- Each edit names its target, and the name must match.
- A batch with one invalid item changes nothing.
- Layers inside component instances are not edited directly. Edit the main component, or use instance overrides.
- Library assets are read-only. The agent can read a library variable or style from a layer that uses it, and it can edit an instance of a library component through overrides.
Example requests
| You ask | What the agent does |
|---|---|
| “Create a Colors collection with brand and neutral variables.” | Creates the collection and variables. You review names and scopes. |
| “Turn this button frame into a component.” | Converts the frame to a main component, after reading its name and parent. |
| “Combine these three buttons into a Size variant set.” | Builds a component set with a Size property. |
| “Apply the Heading style to these titles.” | Applies the named text style to each layer. |
Related pages: Figma MCP variables, what the agent can write, and code to design. A wrong edit that follows the rules still goes through, so use Figma version history.
