Figma
Design-to-code workflows for Claude Code — read Figma frames, generate component code, create Code Connect mappings and maintain design-system rules.
Install
claude plugins add figma The official Figma plugin for Claude Code bridges the gap between design and implementation. Provide a Figma frame URL and Claude will fetch the layout structure, colour tokens, typography, spacing and component hierarchy directly via the Figma REST API, then generate matching code in your project framework of choice.
Code Connect support means Claude can create the mapping files that link Figma components to their source-code counterparts, enabling the Figma Dev Mode panel to show real code. 140k installs from an official Figma-backed release position it as the leading design integration in the Claude ecosystem.
Features
Frame reader
Pulls Figma frame metadata — layout, styles, component names — into Claude context.
Code Connect
Generates Code Connect mappings between Figma components and source files.
Design system rules
Creates project-specific rules for repeatable Figma-to-code translation.
Common Use Cases
- Implementing Figma designs in React/HTML
- Maintaining code-design sync
- Generating design token files