IntegrationOfficialCertified

figma-mcp

by Skills Hub

Connect the Figma Dev Mode MCP server to your AI coding agent and implement designs against your real component library. Covers MCP setup, Code Connect annotation, design-to-code implementation, and design token sync — all in one autonomous workflow.

v1.0.0New

Signing

SignedSLSA L2
Signed by
skills-hub.ai distributor
Method
Distributor-signed by skills-hub.aiCryptographically signed by the skills-hub.ai distributor key at publish time.
Signed

Install this skill

Run this command in your terminal. No account required — it auto-detects your AI tool and installs the skill file.

npx @skills-hub-ai/cli install figma-mcp
Or download directly:
Browse all CLI commands →

Setup by platform

Claude Code

~/.claude/skills/<skill>/SKILL.md

Setup guide →

Cursor

~/.cursor/skills/<skill>/SKILL.md

Setup guide →

Windsurf

~/.windsurf/skills/<skill>/SKILL.md, or add to .windsurfrules in your project

Setup guide →

Codex CLI

~/.codex/skills/<skill>/SKILL.md, or reference via codex.md instructions file

Setup guide →

Install

One-click setup for your editor

Run in your project root

npx @skills-hub-ai/cli install figma-mcp --target claude-code
0

Instructions

This skill doesn’t include stateful context yet, instructions only. Learn about stateful skills.

Security

Loading security scan...

Reviews (0)

View full changelog & diffs →

Related skills

Browse all →
web-gameScaffolds a browser-based game with Phaser 3, PixiJS, or Three.js including game loop, asset pipeline, responsive canvas, input handling, audio, save/load, and deployment to itch.io or web. Triggers: on: "web game", "browser game", "html5 game", "phaser game", "pixi game".29 installspreflightPre-deploy verification gate. Checks git status, build, tests, migrations, secrets, and commit conventions. Reports READY or NOT READY. Read-only, no changes. Trigger words: preflight, pre-deploy check, ready to deploy, deployment checklist.29 installsdesign-auditComprehensive autonomous design quality audit across accessibility (WCAG 2.2), performance, theming, responsive/adaptive design, and anti-pattern detection. Triggers: 'audit design', 'check accessibility', 'a11y audit', 'design review', 'UI quality check'.29 installsdesign-polishFinal autonomous quality pass before shipping. Fixes alignment, spacing, consistency, typography hierarchy, color harmony, motion timing, and every micro-detail that separates good from great..28 installsdesign-claudeHTML-first hi-fi design skill: interactive prototypes, slide decks, animation demos, design variant exploration, visual direction advising, and expert critique. Triggers: make a prototype, design demo, interactive prototype, HTML presentation, animation demo.27 installscleanup-sprintDeep codebase cleanup — kills dead code, fixes all lint/format warnings, removes orphaned files, cleans stale TODOs, strips security hazards, tightens TypeScript strict mode, and organizes imports. Triggers: clean up, dead code, unused imports, lint, technical debt cleanup.25 installs

More from Skills Hub

View source →
security-reviewSecurity audit and vulnerability assessment for any codebase. Scans for authentication bypasses, missing auth middleware, broken JWT validation (algorithm confusion, weak secrets, missing expiry), OAuth state and PKCE flaws, IDOR and horizontal privilege escalation.83 installsunit-testGenerate comprehensive unit tests with edge cases, error paths, and boundary values. Triggers: you need to add unit tests, increase code coverage, test edge cases, or verify error handling paths.76 installsdesign-to-codeTurn a design into production-quality frontend code: extract a design system with tokens and components, make layouts responsive across breakpoints, add dark mode with WCAG-compliant theming, then run a UX audit to validate everything..63 installshumanizerMulti-pass editor that removes AI-writing tells from drafted content — eliminates filler phrases, balances sentence length, restores opinion and voice, and strips em-dash overuse so posts sound human and opinionated rather than ChatGPT-generic..38 installsdesign-animateAdd purposeful motion to interfaces using modern CSS — scroll-driven animations, view transitions, @starting-style, and GPU-accelerated transforms. Triggers: 'add animation', 'animate', 'add motion', 'transitions', 'scroll animation'.31 installsskill-creatorCreate new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.31 installs

More Integration skills

Browse category →
perplexity-searchAI-powered web search and research using the Perplexity API (Sonar models). Performs deep web research with citations, fact-checking, competitive analysis, market research, and technical documentation lookup. Supports streaming responses, search domain filtering, and recency filtering.25 installsauth-providerSet up complete OAuth/SSO authentication with Google, GitHub, Apple, or SAML providers. Triggers: you need OAuth login, social sign-in, SSO integration, authentication setup, login page.3 installsgoogle-drive-mcpGuide users through connecting Claude Code to Google Drive via an MCP server. Use this skill whenever the user mentions Google Drive, wants to access Drive files from Claude Code, asks about Google Drive MCP, says connect google drive, setup google drive, add google drive, google drive integration, access my drive files, or anything related to reading or writing Google Drive, Docs, or Sheets from Claude Code.3 installsantigravity-sdkScaffold, configure, and deploy custom AI agents with the Google Antigravity 2.0 SDK and agy CLI. Handles auth, AGENTS.md setup, skill installation, MCP server connections, parallel subagent workflows, and Managed Agents API calls. Use when the user wants to build or extend agents on the Antigravity 2.0 platform launched at Google I/O 2026.2 installscopilot-model-routingIntelligent task-to-model routing for GitHub Copilot's multi-lab model picker (2026).2 installsstitch-bridgeBidirectional sync between your codebase and Google Stitch. Pushes current design state (tokens, components, screenshots) to Stitch and pulls generated designs back into a platform-agnostic staging directory. Use when: 'sync to stitch', 'push to stitch', 'pull from stitch', 'stitch sync', 'connect stitch', 'stitch bridge'.1 installs

Frequently asked questions about figma-mcp

What does the figma-mcp skill do?

Connect the Figma Dev Mode MCP server to your AI coding agent and implement designs against your real component library. Covers MCP setup, Code Connect annotation, design-to-code implementation, and design token sync — all in one autonomous workflow. It's a reusable SKILL.md instruction set that loads into your AI coding assistant on demand, no prompt engineering, no copy-pasting every session.

How do I install the figma-mcp skill?

Run `npx @skills-hub-ai/cli install figma-mcp` from your terminal. The CLI writes the SKILL.md to the correct location for your AI tool (e.g. ~/.claude/skills/figma-mcp/ for Claude Code or ~/.cursor/skills/ for Cursor with --target cursor) and adds it to your project's .skills.json lockfile.

Which AI tools does figma-mcp work with?

figma-mcp runs in Claude Code, Cursor, Windsurf, Codex CLI. It follows the open Agent Skills standard (SKILL.md), so the same skill works in every supported tool without modification.

Is the figma-mcp skill free?

Yes. Every skill on skills-hub.ai is free and open-source. There are no premium tiers, paywalls, or usage limits. You only pay for whatever AI assistant you're already using.

How do I use figma-mcp after installing it?

In Claude Code, type `/figma-mcp` (or whatever slash command the skill registers) and the AI follows the skill's instructions immediately. You can also reference it by name in natural language, your AI loads the skill into context when relevant.

Can I share the figma-mcp skill with my team?

Yes. Commit your project's .skills.json lockfile and teammates run `npx @skills-hub-ai/cli install` (no args) to install every skill at the exact version you pinned. Organization-scoped installs work via skills-hub.ai organizations.