figma Claude Code Plugin
Claude Code PluginClaude CodeDesignDesign & Media ProductionWeb & App DevelopmentThe explanation below is AI-generated. Please verify it against the sources.
This plugin connects an AI coding assistant to Figma through the Figma MCP server, letting it read design files and turn them into working code. According to the README, it can pull structured design context (such as React and Tailwind representations), extract variables and design tokens, and generate code from a selected frame or layer. It also supports writing changes back into a Figma file, linking components to a codebase through Code Connect, and pulling context from Figma Make prototypes. The README notes that some read operations are subject to monthly or per-minute rate limits depending on the user's Figma plan and seat type.
About the service
Figma is a web-based design platform for creating, prototyping, and collaborating on UI and product designs, and this plugin connects to it through Figma's MCP server so an AI agent can retrieve design data and generate related code.
What you can do with figma
- Retrieve structured design context (e.g., React + Tailwind representation) for a selected Figma frame or node
- Extract variables, styles, and design tokens used in a design
- Generate code from a chosen frame or layer for implementation in a project
- Write updates back into Figma files, including frames, components, variables, and auto layout (remote server only, currently free during beta)
- Link generated code to existing components via Code Connect for consistency with the codebase
- Fetch context and files from Figma Make projects to extend prototypes into production code
- Convert web pages into Figma designs via the AI coding agent (feature rolling out)
- Use additional workflow skills, such as turning UI recordings into annotated Figma boards or turning a PRD into a FigJam project plan