Figma/figma-implement-design — Agent Skills | officialskills.sh
officialskills.sh
...
Back to skills

figma-implement-design

officialdesign

Translates Figma designs into production-ready code with pixel-perfect accuracy.

FigmaFigma
View all Figma skills →

Setup & Installation

npx skills add https://github.com/figma/mcp-server-guide --skill figma-implement-design
or paste the link and ask your coding assistant to install it
https://github.com/figma/mcp-server-guide/tree/main/skills/figma-implement-design
View on GitHub

What This Skill Does

Translates Figma designs into production-ready code with pixel-perfect accuracy. It parses Figma URLs, fetches design context via the Figma MCP server, and outputs framework-appropriate components that match the original design 1:1.

Instead of manually measuring spacing, sampling colors, and cross-referencing a Figma file, this skill automates the full design-to-code translation and validates the output against a screenshot from the same file.

When to use it

  • Converting a Figma component URL into a typed React component
  • Pulling design tokens from a Figma file to replace hardcoded style values
  • Rebuilding a multi-state button from a Figma spec without guessing spacing or color
  • Generating a full page layout from a Figma frame URL
  • Syncing an existing component to a revised Figma design after a design update

Similar Skills

gif-sticker-maker

Takes a photo of a person, pet, object, or logo and generates 4 animated GIF stickers in Funko Pop / Pop Mart figurine style.

wpds

Assists with building UI components and interfaces using the WordPress Design System (WPDS).

accessibility

Audits and improves web accessibility against WCAG 2.

algorithmic-art

Generates algorithmic and generative art using p5.