# Implement Figma Designs as Production UI

Design handoff often loses spacing, assets, and component intent. This skill gives Claude, Codex, and Claude Code a repeatable Figma MCP workflow for accurate UI implementation.

## Install

```bash
npx skillstore add figma/implement-design
```

## Metadata

- Status: approved
- Slug: figma-implement-design
- Skillstore revision: r1
- Version status: missing
- Tree hash: 6d32a73e561beeeed6b32c86a64bfed2e85d839ef6d8e244fe39cff1a159ddeb
- Author: figma
- GitHub username: figma
- License: MIT
- Repository: https://github.com/figma/mcp-server-guide/tree/main/skills/implement-design/
- Ref: a06681402992ceae98ba04d54cfd4ab004862696
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/figma-implement-design
- Manifest: https://skillstore.pages.dev/api/skills/figma-implement-design/manifest

## Capabilities

- Parses Figma design URLs to identify file keys and node IDs.
- Fetches structured design context through the Figma MCP server.
- Captures Figma screenshots for visual comparison during implementation.
- Uses Figma-provided assets, including icons, images, and SVG files.
- Maps Figma tokens and layout data to existing project conventions.
- Guides final validation for spacing, typography, color, assets, and accessibility.

## Use Cases

- Build Product Components: Implement buttons, forms, cards, and other Figma components using existing project patterns.
- Review Design Handoff: Help developers preserve spacing, typography, colors, assets, and responsive behavior from the source design.
- Create Consistent UI Pages: Turn dashboard or workflow frames into reusable sections that fit the current application.

## Prompt Templates

### Implement a Component

```
Implement this Figma component in the current project: [Figma URL]. Use existing components and match the screenshot.
```

### Use Desktop Selection

```
Use the selected Figma desktop node to build the UI. Fetch design context and screenshot before editing files.
```

### Build a Full Page

```
Build this Figma page: [Figma URL]. Break it into sections, reuse project components, and validate responsive behavior.
```

### Integrate a Complex Flow

```
Convert this complex Figma flow into reusable project components: [Figma URL]. Map tokens, document deviations, and verify accessibility.
```

## Limitations

- Requires a connected Figma MCP server or selected Figma desktop node.
- Requires user access to the target Figma file and selected frame.
- Cannot guarantee pixel parity when project design tokens intentionally differ.
- Does not replace product review, designer approval, or accessibility testing.

## Best Practices

- Fetch design context and a screenshot before making implementation decisions.
- Reuse existing project components before creating new UI primitives.
- Document any visual deviation caused by accessibility or technical constraints.

## Anti Patterns

- Implementing from memory without reading the Figma MCP design context.
- Adding new icon packages when Figma already provides the required assets.
- Copying raw generated styles without mapping them to project tokens.

## Security Audit

- Audited at: 2026-07-06T14:31:33.016\+00:00
- Summary: All static command findings are false positives from Markdown inline code and examples that name Figma MCP tools. The URL findings are documented Figma examples or resource links, and no prompt injection or malicious intent was found in SKILL.md.

## Stats

- Views: 156
- Downloads: 31
- Favorites: 0
- Popularity score: 0