Figma plugin: what it installs and how to add it
Connects Claude Code to Figma for design context, code generation, and canvas updates.
From the Marketplace: claude-plugins-official marketplace
Install
> /plugin install figma@claude-plugins-officialRun it inside Claude Code. The official marketplace is already known, so there is nothing to add first.
What is inside
- 14skills
- 1MCP server
About this plugin
The plugin connects Claude Code to Figma through its MCP server. It can read selected frames, components, variables, design tokens and layout data, then use that context to generate code or help keep implementations aligned with Figma designs. It can also create and modify native Figma content when the connected server and skills support canvas writing.
Use it when translating designs into code, working with Figma libraries, connecting existing code components, or generating and updating designs, diagrams, motion and slides. You need access to a Figma account and must connect the Figma MCP server. Read operations are subject to Figma plan and seat-based rate limits, while these skills are available as a beta feature.
What's inside
- 1 MCP server for Figma
- 14 skills:
figma-code-connect,figma-create-new-file,figma-design-to-code,figma-generate-design,figma-generate-diagram,figma-generate-library,figma-generative-plugins,figma-implement-motion,figma-shaders,figma-swiftui,figma-use-figjam,figma-use-motion,figma-use-slides, andfigma-use
More from claude-plugins-official
- SuperpowersOfficialGuides Claude Code through planning, TDD, debugging, code review, and subagent-driven software development.Marketplace: claude-plugins-officialGitHub stars: 294k
- Matt Pocock SkillsOfficialAdds reusable engineering skills for specification, TDD, code review, debugging, domain modelling and project handoffs.Marketplace: claude-plugins-officialGitHub stars: 274k
- HyperFramesOfficialCreates deterministic MP4 videos from HTML, CSS, media and animations using HeyGen's HyperFrames framework.Marketplace: claude-plugins-officialGitHub stars: 55.4k
- Chrome DevTools MCPOfficialControls and inspects a live Chrome browser for debugging, performance analysis, network checks, and Puppeteer automation.Marketplace: claude-plugins-officialGitHub stars: 52.9k
- Agent SDK DevOfficialCreates and verifies Claude Agent SDK applications in Python and TypeScript, with scaffolding and best-practice checks.Marketplace: claude-plugins-officialGitHub stars: 37.3k
- AsanaOfficialConnects Claude Code to Asana for creating tasks, searching projects, updating assignments and tracking work.Marketplace: claude-plugins-officialGitHub stars: 37.3k
Related plugins
- Open DesignConnects coding agents to the local OpenDesign app for projects, files, previews and design systems through an MCP server.Marketplace: open-designGitHub stars: 99.1k
- ImpeccableAdds design vocabulary and review guidance for building clearer, more consistent frontend interfaces with AI coding agents.Marketplace: claude-communityGitHub stars: 73.7k
- Accessibility ComplianceAudits web interfaces against WCAG and checks screen-reader, keyboard, and inclusive design concerns.Marketplace: claude-code-workflowsGitHub stars: 40.1k
- Brand Landing PageGuides brand discovery and iterative landing-page design in Stitch, producing a deployment-ready static HTML bundle.Marketplace: claude-code-workflowsGitHub stars: 40.1k
Skills, not plugins
Prefer a single skill for design work? 86 skills in the same category, each installed on its own.