implement-design

Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design...

Security Scan

The skill's instructions and requirements are coherent with its stated purpose (translating Figma designs via an MCP connection) and it does not request unrelated credentials or install steps, but there are a few ambiguous points you should verify before use.

Purpose & Capability

The skill is explicitly about translating Figma designs and repeatedly references Figma MCP tools (get_design_context, get_screenshot, get_metadata). That aligns with the stated purpose. Minor inconsistency: the SKILL.md says the Figma MCP server is "included with the plugin" and suggests guiding the user to enable it, yet the registry shows no install or plugin files. This is ambiguous (documentation mismatch) but not necessarily malicious.

Instruction Scope

The instructions stay focused on fetching design data and assets from the Figma MCP server and translating them into project code. They do not instruct reading unrelated system files or requesting other credentials. Two items worth flagging: (1) the guidance to use any 'localhost' asset source directly — this requires the agent to access local endpoints and could surface sensitive local resources if misconfigured; (2) the SKILL.md assumes MCP tooling is present (e.g., get_design_context) but gives no fallback or verification beyond 'check if tools are available.' Both are scope/operational ambiguities to confirm.

Install Mechanism

No install specification and no code files—this is instruction-only, which is low-risk because nothing is written to disk or fetched during an install step.

Credentials

The skill requests no environment variables or credentials in the registry, which is proportionate for an instruction-only integration that expects a platform-provided MCP connection. However, the SKILL.md assumes access to a Figma MCP server; if your environment requires credentials or a separate connector for that MCP server, those requirements are not declared here and should be clarified before use.

Persistence & Privilege

always is false and the skill does not request any elevated persistence or system-wide configuration changes. Autonomous invocation is allowed (platform default) but not otherwise privileged by this skill.

Assessment

This skill looks coherent for implementing Figma designs, but verify a few operational details before installing: 1) Confirm how your environment provides the "Figma MCP server" the skill expects — does it require credentials, a separate plugin, or special configuration? Those credentials (if any) are not declared in the skill metadata. 2) Ask what 'localhost' asset URLs will point to in your environment; allowing the agent to fetch localhost-hosted assets can expose internal services or files if misconfigured. 3) Because the SKILL.md refers to an included MCP plugin but no install files exist, confirm whether there is an external plugin you must enable and whether that plugin is trusted. 4) If you plan to let agents run this autonomously, audit the MCP endpoint and asset-serving behavior (CORS, auth, access logs) to ensure only intended resources are available. If any of these answers are unclear or require additional credentials, treat the ambiguity as a reason to delay granting access until clarified.

Overview

This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.

Prerequisites

• Figma MCP server must be connected and accessible
  • Before proceeding, verify the Figma MCP server is connected by checking if Figma MCP tools (e.g., get_design_context) are available.
  • If the tools are not available, the Figma MCP server may not be enabled. Guide the user to enable the Figma MCP server that is included with the plugin. They may need to restart their MCP client afterward.
• User must provide a Figma URL in the format: https://figma.com/design/:fileKey/:fileName?node-id=1-2
  • :fileKey is the file key
  • 1-2 is the node ID (the specific component or frame to implement)
• Project should have an established design system or component library (preferred)

Required Workflow

Follow these steps in order. Do not skip steps.

Step 1: Get Node ID

Option A: Parse from Figma URL

When the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools.

URL format: https://figma.com/design/:fileKey/:fileName?node-id=1-2

Extract:

• File key: :fileKey (the segment after /design/)
• Node ID: 1-2 (the value of the node-id query parameter)

Example:

• URL: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15
• File key: kL9xQn2VwM8pYrTb4ZcHjF
• Node ID: 42-15

Step 2: Fetch Design Context

Run get_design_context with the extracted file key and node ID.

get_design_context(fileKey=":fileKey", nodeId="1-2")

This provides the structured data including:

• Layout properties (Auto Layout, constraints, sizing)
• Typography specifications
• Color values and design tokens
• Component structure and variants
• Spacing and padding values

If the response is too large or truncated:

1. Run get_metadata(fileKey=":fileKey", nodeId="1-2") to get the high-level node map
2. Identify the specific child nodes needed from the metadata
3. Fetch individual child nodes with get_design_context(fileKey=":fileKey", nodeId=":childNodeId")

Step 3: Capture Visual Reference

Run get_screenshot with the same file key and node ID for a visual reference.

get_screenshot(fileKey=":fileKey", nodeId="1-2")

This screenshot serves as the source of truth for visual validation. Keep it accessible throughout implementation.

Step 4: Download Required Assets

Download any assets (images, icons, SVGs) returned by the Figma MCP server.

IMPORTANT: Follow these asset rules:

• If the Figma MCP server returns a localhost source for an image or SVG, use that source directly
• DO NOT import or add new icon packages - all assets should come from the Figma payload
• DO NOT use or create placeholders if a localhost source is provided
• Assets are served through the Figma MCP server's built-in assets endpoint

Step 5: Translate to Project Conventions

Translate the Figma output into this project's framework, styles, and conventions.

Key principles:

• Treat the Figma MCP output (typically React + Tailwind) as a representation of design and behavior, not as final code style
• Replace Tailwind utility classes with the project's preferred utilities or design system tokens
• Reuse existing components (buttons, inputs, typography, icon wrappers) instead of duplicating functionality
• Use the project's color system, typography scale, and spacing tokens consistently
• Respect existing routing, state management, and data-fetch patterns

Step 6: Achieve 1:1 Visual Parity

Strive for pixel-perfect visual parity with the Figma design.

Guidelines:

• Prioritize Figma fidelity to match designs exactly
• Avoid hardcoded values - use design tokens from Figma where available
• When conflicts arise between design system tokens and Figma specs, prefer design system tokens but adjust spacing or sizes minimally to match visuals
• Follow WCAG requirements for accessibility
• Add component documentation as needed

Step 7: Validate Against Figma

Before marking complete, validate the final UI against the Figma screenshot.

Validation checklist:

• Layout matches (spacing, alignment, sizing)
• Typography matches (font, size, weight, line height)
• Colors match exactly
• Interactive states work as designed (hover, active, disabled)
• Responsive behavior follows Figma constraints
• Assets render correctly
• Accessibility standards met

Implementation Rules

Component Organization

• Place UI components in the project's designated design system directory
• Follow the project's component naming conventions
• Avoid inline styles unless truly necessary for dynamic values

Design System Integration

• ALWAYS use components from the project's design system when possible
• Map Figma design tokens to project design tokens
• When a matching component exists, extend it rather than creating a new one
• Document any new components added to the design system

Code Quality

• Avoid hardcoded values - extract to constants or design tokens
• Keep components composable and reusable
• Add TypeScript types for component props
• Include JSDoc comments for exported components

Examples

Example 1: Implementing a Button Component

User says: "Implement this Figma button component: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15"

Actions:

1. Parse URL to extract fileKey=kL9xQn2VwM8pYrTb4ZcHjF and nodeId=42-15
2. Run get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")
3. Run get_screenshot(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15") for visual reference
4. Download any button icons from the assets endpoint
5. Check if project has existing button component
6. If yes, extend it with new variant; if no, create new component using project conventions
7. Map Figma colors to project design tokens (e.g., primary-500, primary-hover)
8. Validate against screenshot for padding, border radius, typography

Result: Button component matching Figma design, integrated with project design system.

Example 2: Building a Dashboard Layout

User says: "Build this dashboard: https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5"

Actions:

1. Parse URL to extract fileKey=pR8mNv5KqXzGwY2JtCfL4D and nodeId=10-5
2. Run get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") to understand the page structure
3. Identify main sections from metadata (header, sidebar, content area, cards) and their child node IDs
4. Run get_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":childNodeId") for each major section
5. Run get_screenshot(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") for the full page
6. Download all assets (logos, icons, charts)
7. Build layout using project's layout primitives
8. Implement each section using existing components where possible
9. Validate responsive behavior against Figma constraints

Result: Complete dashboard matching Figma design with responsive layout.

Best Practices

Always Start with Context

Never implement based on assumptions. Always fetch get_design_context and get_screenshot first.

Incremental Validation

Validate frequently during implementation, not just at the end. This catches issues early.

Document Deviations

If you must deviate from the Figma design (e.g., for accessibility or technical constraints), document why in code comments.

Reuse Over Recreation

Always check for existing components before creating new ones. Consistency across the codebase is more important than exact Figma replication.

Design System First

When in doubt, prefer the project's design system patterns over literal Figma translation.

Common Issues and Solutions

Issue: Figma output is truncated

Cause: The design is too complex or has too many nested layers to return in a single response. Solution: Use get_metadata to get the node structure, then fetch specific nodes individually with get_design_context.

Issue: Design doesn't match after implementation

Cause: Visual discrepancies between the implemented code and the original Figma design. Solution: Compare side-by-side with the screenshot from Step 3. Check spacing, colors, and typography values in the design context data.

Issue: Assets not loading

Cause: The Figma MCP server's assets endpoint is not accessible or the URLs are being modified. Solution: Verify the Figma MCP server's assets endpoint is accessible. The server serves assets at localhost URLs. Use these directly without modification.

Issue: Design token values differ from Figma

Cause: The project's design system tokens have different values than those specified in the Figma design. Solution: When project tokens differ from Figma values, prefer project tokens for consistency but adjust spacing/sizing to maintain visual fidelity.

Understanding Design Implementation

The Figma implementation workflow establishes a reliable process for translating designs to code:

For designers: Confidence that implementations will match their designs with pixel-perfect accuracy. For developers: A structured approach that eliminates guesswork and reduces back-and-forth revisions. For teams: Consistent, high-quality implementations that maintain design system integrity.

By following this workflow, you ensure that every Figma design is implemented with the same level of care and attention to detail.

Additional Resources

• Figma MCP Server Documentation
• Figma MCP Server Tools and Prompts
• Figma Variables and Design Tokens