Figma Implement

Implement Figma Design

Self-Documentation

When invoked WITHOUT a Figma URL or clear input:

1. Display the Quick Help block below
2. Ask the user to provide a Figma URL or describe what they want to implement

When invoked WITH a Figma URL or clear intent — skip help and proceed to Step 1.

Quick Help

What I do: Take a Figma design URL and translate it into production-ready code that matches your project's stack, components, and conventions.

Example prompts:

• Implement this design: https://figma.com/design/abc123/MyApp?node-id=10-5
• Build this Figma button component: [URL]
• Generate code from this Figma frame: [URL]

Prerequisites:

• Figma MCP server configured (Official Remote or Desktop). Run /figma-setup if not configured.
• A project with existing codebase to adapt to (framework, styling, components).

What you get:

• Production code adapted to your project (not raw Tailwind)
• Reuse of existing project components where possible
• Visual validation against the Figma screenshot
• Report of created files, reused components, and any deviations

---

Step 1: Parse Figma URL

Extract fileKey and nodeId from the Figma URL:

• figma.com/design/:fileKey/:fileName?node-id=:nodeId — convert - to : in nodeId
• figma.com/design/:fileKey/branch/:branchKey/:fileName — use branchKey as fileKey

If the user provides only a description without URL, ask for the URL.

Step 2: Fetch Design Data

Run these MCP calls (in parallel when possible):

1. get_design_context(fileKey, nodeId) — returns structured layout, styling, component data (React + Tailwind by default). This is the primary data source.
2. get_screenshot(fileKey, nodeId) — visual screenshot for reference and validation.
3. get_code_connect_map(fileKey, nodeId) — check if Figma components are already mapped to code components.

Step 3: Analyze Project Context

First, check for existing rules: If .claude/rules/figma-design-system.md exists (generated by /figma-rules), load it as the primary project context. This file already encodes the project's conventions, token mappings, and component patterns — skip redundant analysis for anything it covers.

If no rules file exists (or it's incomplete), scan the target project:

• Framework: React, Vue, Svelte, Angular, vanilla HTML/CSS, etc.
• Styling approach: Tailwind, CSS Modules, styled-components, SCSS, design tokens
• Component library: existing UI components that match Figma elements
• Token system: color variables, spacing scale, typography definitions
• File conventions: component directory structure, naming patterns

Step 4: Generate Code

Translate the Figma design context into project-native code:

CRITICAL RULES:

1. Treat MCP output as a reference, NOT final code. The get_design_context returns React + Tailwind by default — always adapt to the actual project stack.

1. Reuse existing components. If the project has a Button, Card, Input, etc. that matches the Figma element — use it instead of creating a new one.

1. Replace Tailwind with project tokens. If the project uses CSS variables, SCSS, or a custom token system — map Figma colors/spacing to those tokens.

1. Follow Code Connect mappings. If get_code_connect_map returned mappings, use the codebase component directly instead of generating new code.

1. Follow design annotations. If the Figma design has annotations or notes from the designer — follow them as constraints.

1. Download assets. If the design contains images, icons, or SVGs — download them and place in the appropriate project directory.

Step 5: Validate Against Screenshot

Review the generated code structure against the Figma screenshot to verify:

• Layout hierarchy and nesting matches the design composition
• Spacing proportions are consistent with the design intent
• Colors and typography tokens map correctly
• Component decomposition reflects the Figma layer structure
• Responsive behavior is considered where the design implies it

If there are significant deviations, document them and explain why.

If the node is very large: Use get_metadata first to check complexity. If the node has many deeply nested children, consider implementing sub-sections individually rather than the entire node at once.

Step 6: Report

Present a summary to the user:

=== Implementation Report ===
Source:    [Figma URL]
Files:     [list of created/modified files]
Reused:    [list of existing components reused]
Assets:    [list of downloaded assets]
Deviations: [any differences from Figma design and why]
Next:      Run `/figma-connect` to map these components back to Figma
=============================

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: ikusmart
• Source: ikusmart/claude.figma.skills
• License: MIT

Install and usage instructions live in the source repository linked above.