figma · figma — Claude Code plugin: what it does, how to install
Connects design files to AI agents to read layout data, variables, and components. Turns selected frames into code and syncs your repository using Code Connect.
/plugin install figma@claude-plugins-official
/plugin marketplace add anthropics/claude-plugins-community
/plugin install figma-test@claude-community
/plugin marketplace add anthropics/claude-plugins-officialWhat figma does
This plugin connects coding agents directly to the Figma MCP server at https://mcp.figma.com/mcp. It inspects layers, reads design tokens, and extracts auto layout rules straight into the editor. When paired with Code Connect, the agent reuses existing workspace components instead of writing fresh markup. It can also create placeholder graphics via generate_image, prompting for approval before using Figma AI credits.
Rate limits depend strictly on your Figma license. Users on the Starter plan or with View seats get only 6 read tool calls per month. That makes a Dev or Full seat on a paid tier necessary for everyday development. Modifying native canvas elements is free during the current beta, though Figma plans to meter it later.
What it helps with
- generate front-end code from a selected canvas frame
- extract design tokens and theme variables into the IDE
- match existing codebase components with designs via Code Connect
- render missing image placeholders using AI credits
Example prompts for the agent
- Turn the selected Figma frame into a front-end component
- Extract design tokens and typography variables from this file
- Check Code Connect mappings for our navigation bar
How to install figma
Plugin marketplace
/plugin install figma@claude-plugins-official/plugin marketplace add anthropics/claude-plugins-community/plugin install figma-test@claude-community/plugin marketplace add anthropics/claude-plugins-officialCommand from the source
copilot plugin install figma@awesome-copilotStep by step, with commands for each platform: Claude Code plugins: marketplaces, installing, and building your own
Questions about figma
How do I install figma in Claude Code?
Add the official registry by running /plugin marketplace add anthropics/claude-plugins-official. Then install the plugin using /plugin install figma@claude-plugins-official.
How do Figma plan rate limits affect this plugin?
Accounts on the Starter plan or with View-only access receive up to 6 read tool calls each month. Heavy workflows require a Dev or Full seat under Professional, Organization, or Enterprise subscriptions.
What does the write to canvas feature do?
It lets the agent create and modify native frames, auto layout structures, and variables in the design file. This capability is free during the beta period before becoming usage-based.
Similar plugins
All plugins for Design →figma by other authors comes first.
