implement-design

Translates Figma designs into production-ready code with pixel-perfect visual fidelity. Requires Figma MCP server connection and a Figma URL with file key and node ID to extract design context, screenshots, and assets Seven-step structured workflow: parse URL, fetch design context, capture visual reference, download assets, translate to project conventions, achieve 1:1 parity, and validate against Figma Prioritizes design system reuse over duplication; maps Figma tokens to project design...

npx skills add https://github.com/figma/mcp-server-guide --skill implement-design

Download ZIP GitHub

More skills from figma

video-interaction-mapper

This skill should be used when the user asks to analyze a UI screen recording and map interaction states into Figma. Trigger for requests such as "put video…

figma-code-connect

Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component…

create-design-system-rules

Custom design system rules for consistent Figma-to-code implementation across your project. Generates project-specific conventions for component organization, styling, design tokens, and asset handling that guide AI agents to produce consistent code Supports three rule file formats: CLAUDE.md for Claude Code, AGENTS.md for Codex CLI, and .cursor/rules/figma-design-system.mdc for Cursor Requires Figma MCP server connection and codebase analysis to discover existing patterns before rule...

figma-implement-motion

Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions…

SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into…

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the…

figma-use-figjam

This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the…