Why

  • The agent works inside your design system: your components, your variables, the decisions already in the product.
  • A similar-looking frame never passes as a component: an instance, a design system update or a new component, nothing else.
  • The agent doesn't learn the Figma API all over again: the limits, the approaches that work and the checks are in the rules.

What's inside

figma-audit-design-system

Reads the file and reports what the design system holds: components, tokens, patterns, debt. Changes nothing by default.

figma-plan-user-flows

Maps the flow: every screen and state, entry and exit points, a page structure for the file, before anything is drawn.

figma-design-screens

Builds new screens and edits approved ones: where the style comes from, a brief per screen, checks after, one element at a time.

figma-fix-variable-bindings

Finds detached, orphaned and hardcoded values, shows you a report, and rebinds only after you approve it.

figma-plugin-api-rules

Recorded Plugin API failures and the way around each one. Loads by itself, before the agent writes into your file.

How to start

  1. Install the plugin in Claude Code with the two commands above, then restart the agent.
  2. Connect the agent to Figma: type /mcp, pick figma, and log in through the browser.
  3. Start the agent in your project folder and send a link to the frame along with the task.

Check your Figma seat first: Dev and Full allow substantially more tool calls than View and Collab. Limits in the Figma docs

Feedback

Tell me what worked, where you had to step in, and when the result diverged from what you expected. If something broke, send the session.

More

Article “Agent, open Figma”

Install the bundle

claude plugin marketplace add schudarin/chudarin-figma-skills
claude plugin install chudarin@chudarin