implement-design
๐ฏSkillfrom figma/mcp-server-guide
|Guide for the official Figma MCP server that brings Figma design context to AI agents, enabling code generation from selected frames and design data extraction.
Overview
Implement Design is a skill associated with the Figma MCP Server Guide, which brings Figma design files directly into your development workflow by providing design information and context to AI agents generating code. It enables developers to select a Figma frame and turn it into code, extract design context including variables, components, and layout data, and boost output quality by reusing actual components through Code Connect.
Key Features
- Design-to-Code Generation - Select a Figma frame and turn it into code, ideal for product teams building new flows or iterating on app features
- Design Context Extraction - Pull in variables, components, and layout data from Figma directly into the IDE for design system and component-based workflows
- Code Connect Integration - Boosts output quality by reusing actual codebase components, keeping generated code consistent with the existing codebase
- Dual Server Options - Available as a remote hosted server (no setup needed) or a local desktop server running on
127.0.0.1:3845/mcpthrough the Figma desktop app - Rate-Limited Access - Free tier provides up to 6 tool calls per month; Dev/Full seat users on paid plans get per-minute rate limits following Figma REST API Tier 1 limits
Who is this for?
This skill is designed for front-end developers and product teams who work with Figma designs and want to streamline the design-to-code workflow using AI assistance. It is particularly valuable for teams with established design systems in Figma who want to maintain consistency between designs and code by leveraging Code Connect and component reuse.
Same repository
figma/mcp-server-guide(13 items)
Installation
npx vibeindex add figma/mcp-server-guide --skill implement-designnpx skills add figma/mcp-server-guide --skill implement-design~/.claude/skills/implement-design/SKILL.mdSKILL.md
More from this repository10
Official Figma skill that generates code from selected Figma frames, providing design information and context to AI agents via the Figma MCP server.
Mandatory prerequisite skill for the `use_figma` MCP tool โ documents Figma Plugin API critical rules (use `return`, no `figma.closePlugin()`, no `figma.notify()`, `getSharedPluginData` only, 0โ1 color range, always `loadFontAsync` before text, clone-modify-reassign for read-only fills/strokes, work incrementally) to prevent common hard-to-debug failures.
Official Figma skill that creates and modifies native Figma content on the canvas, enabling AI agents to write directly to Figma files via the MCP server.
Official Figma skill that creates design system rules from Figma files, bridging design tokens and development workflows via the Figma MCP server.
Generates custom design system rules tailored to your project for Figma-to-code workflows, creating project-level instructions that encode component patterns, naming conventions, and architectural decisions for Claude Code, Codex, and Cursor.
Figma MCP Server skill for generating component libraries from Figma designs, bringing design information and context to AI agents.
Figma MCP Server skill for creating new Figma design files programmatically through AI agents using the MCP server.
Connect Figma design components to their code implementations using Figma's Code Connect feature, analyzing design structure, scanning codebase for matching components, and establishing design-code mappings.
Figma MCP server skill for connecting Figma components to code using Code Connect, so generated output reuses your actual components and stays consistent with your codebase and design system.
Figma MCP Server skill for implementing designs by connecting Figma components to code via Code Connect, ensuring generated code is consistent with your codebase.