skills.rest
thomasttvo
thomasttvoCOMMUNITY
Explore all skills by this author →
GitHub

figma-dev

Convert Figma designs into React components and verify visual parity via MCP.

Updated Aug 27, 2026
Search Tags:#figma#mcp#svg#pixel-perfect#design-to-code#visual-qa#asset-mapping
One-click install
npx skills add https://github.com/thomasttvo/claude-skills --skill figma-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-dev
Source: https://github.com/thomasttvo/claude-skills/tree/main/skills/figma-dev
Command: npx skills add https://github.com/thomasttvo/claude-skills --skill figma-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translates Figma designs into production-ready UI implementations and verifies visual parity so engineers do not guess asset placement, icon shapes, colors, or layer structure.

Core Features & Use Cases

  • Figma parsing & context retrieval: extract file key and node id, call get_design_context and get_screenshot to obtain layout, tokens, and a reference image for validation.
  • Asset mapping & SVG verification: enumerate every asset variable, fetch SVGs, compare path data and viewBox to find exact codebase matches or create new assets.
  • Design-to-code translation & visual QA: convert MCP output into project conventions, replace Tailwind with design tokens, ensure layer-by-layer fidelity, and run device comparisons via ask_screen for targeted discrepancies.

Quick Start

Provide a Figma URL and ask the skill to fetch design context, build the complete asset mapping table, and run visual QA against the Figma screenshot.

Frequently Asked Questions about figma-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Figma designs to pixel-perfect React components?▼

Figma MCP server access is required to fetch design context, retrieve screenshots, and access asset endpoints. You must provide a valid Figma URL containing the file key and node ID so the skill can extract layout, tokens, and reference images for validation.

What is the best way to verify visual parity between Figma and code?▼

Yes, you can match exact icons from Figma by enumerating every asset variable and fetching SVGs. The skill compares SVG path data and viewBox dimensions to find exact codebase matches or flags the need to create new assets for your design-to-code workflow.

How do I map Figma design tokens to replace Tailwind classes in React?▼

Mapping Figma design tokens to replace Tailwind classes involves extracting color and spacing tokens from the MCP design context output. The skill translates these tokens into your project conventions, ensuring the generated React or React Native components maintain design system fidelity.

Does the Figma to React Native workflow support visual QA on different devices?▼

The Figma to React Native workflow supports visual QA by utilizing the ask_screen endpoint for targeted device comparisons. It validates UI fidelity by comparing the implemented component screenshot against the original Figma reference image across different device dimensions.

Related Skills

Explore More Design & Creative Skills→
MatheusrlrMatheusrlr
1

figma-implement-design

Translate Figma designs into production-ready code with visual fidelity.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

figma-to-react-workflow

Convert Figma designs into tested React components with design tokens.

Official
Advanced
markky21markky21

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 and design tokens.

Community
Advanced
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate