Clone live webpages into Figma as editable design frames, preserving layout, colors, and fonts via Chrome DevTools, and run Figma plugin API scripts to create and modify shapes, slots, and properties in open design files.
A Claude Code plugin that lets you interact with Figma directly through the browser.
/plugin marketplace add markacianfrani/claude-code-figma
/plugin install figma-friend
Once installed, use the /figma-friend:skills skill to start interacting with Figma:
/figma-friend:skills
The plugin will:
If you get figma is not defined:
Based on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimMark's Claude Code toolkit - agents, commands, and workflow tools
npx claudepluginhub markacianfrani/claude-code-figma --plugin figma-friendPlugin that includes the Figma MCP server and Skills for common workflows
Design System compliance harness for Claude + Figma. Enforces library-first components, token binding, and automated QA — so AI-generated designs stay on-spec.
Decode Figma's binary Kiwi wire protocol — extract scenegraph, SVGs, and CSS from WebSocket frames, bypassing REST API rate limits
Compiler-driven design generation in Figma — 100% design system compliant. Compiles component specs into verified Figma output via MCP.
Claude Code skill pack for Figma (30 skills)
The full collection: design tokens (export/import/setup), variable and library management, component-set analysis and docs, WCAG and design-system linting, accessibility audits, version history, changelog, blame, comments, annotations, FigJam, and Slides.