Figma Design Extract

Extract exact design values from a Figma node into a build-ready spec table, instead of eyeballing a screenshot. Use when the user shares a figma.com node URL, or says "implement this Figma design", "build this component from Figma", "extract the Figma values", or "match the Figma". This is design-to-code only - to push code into Figma, use figma-generate-design instead.

5 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add jeltehomminga/figma-design-skills --skill figma-design-extract

Manual install

git clone --depth 1 https://github.com/jeltehomminga/figma-design-skills.git /tmp/figma-design-skills
mkdir -p ~/.claude/skills
cp -r /tmp/figma-design-skills/skills/figma-design-extract ~/.claude/skills/figma-design-extract

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Figma Design Extract — get the real design out of Figma

Read a Figma node into a **design-spec table** of exact values mapped to your codebase, *before* writing any component code. The table is both your build contract and the input to the companion **`design-fidelity-verify`** skill, which proves the running app matches it.

This skill is the design→code direction (read Figma, produce a spec). It is **not** a code→Figma generator — that's Figma's own `figma-generate-design` skill.

## Why this exists (the failure mode it fixes)

**Screenshot-as-truth.** A model reads a Figma screenshot as "button, top-right" but cannot see that the radius is 8 not 12, the weight is 500 not 600, or the gap is 12 not 8. A screenshot is a *visual reference only*. Exact values come from Figma's structured data — variables and metadata — not from pixels. The bar is fidelity to the design's *decisions* — the right **token** — not literal pixel coordinates. Skip this and the design drifts the moment you start typing.

## When to use

Trigger phrases: "implement this Figma screen/component", "build this design", "extract the Figma values", "get the tokens/spacing/colors from Figma", "match the Figma", or a `figma.com/design/...node-id=...` URL shared to build from.

Scope: any frontend repo (web or mobile). Backend/API repos have no UI to build.

Read the full skill on GitHub

Details

Skill name: figma-design-extract
Repository: jeltehomminga/figma-design-skills
Path: skills/figma-design-extract/SKILL.md
License: MIT
Repo updated: 9 July 2026
Listed in: karanb192/awesome-claude-skills

FAQ

What does the Figma Design Extract skill do?

How do I install the Figma Design Extract skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add jeltehomminga/figma-design-skills --skill figma-design-extract. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Figma Design Extract popular?

It lives in jeltehomminga/figma-design-skills, which has 5 GitHub stars and 1 forks, and is included in 1 curated skill list.

Related skills

Design Fidelity Verify

jeltehomminga/figma-design-skills

Prove a running app matches its design spec by measuring rendered values, not eyeballing a screenshot. Use when the user says "verify the design", "is this pixel-perfect", "check against Figma", "does the app match the design", or "design QA this screen". Runs a bounded vision+numeric loop over web or mobile, classifying every spec row rather than reporting a bare pixel delta. Consumes the figma-design-extract spec table.

Frontend & DesignIn 1 list

Telegram Premium Emojis

abbosahmad/telegram-premium-emojis

Comprehensive guide, design system, and code generator for Telegram Bot Premium Custom Emojis, Aiogram 3 card UI, icon_custom_emoji_id inline buttons, and sticker pack discovery.

Frontend & Design

Apple Design

XOVIET-GAME/apple-design-skill

Complete Apple Human Interface Guidelines (HIG) and Apple Design System standard. Use when designing, building, or auditing UI/UX for iOS, iPadOS, macOS, watchOS, visionOS, or Apple-styled web and mobile applications.

Frontend & Design

UI UX Fixer

nerdstalker/ui-ux-fixer

Advise on and critique UI/UX design work through the lens of Luke Wroblewski's published principles, using his MCP archive to retrieve relevant writings, presentations, videos, and other source material for each task. Use this skill whenever the user asks for a design review, UX critique, or feedback on a screen, page, form, sign-up flow, checkout, mobile layout, navigation scheme, or AI/agent interface — or asks "what would LukeW say," mentions Luke Wroblewski, or wants design advice grounded in established best practices rather than taste. Also use it when the user asks to fix or improve a U

Frontend & Design

Build Your Own Component

ethankongee/build-your-own-component

Generate a complete UI component library with 24 components (Accordion through Tooltip). Supports React or Vanilla JS. Can produce 1-3 design variations for side-by-side comparison. Use when the user wants to create a component library, design system, UI kit, or build reusable UI components.

Frontend & Design

Russian Text Quality

Anic888/russian-text-quality

Use when reviewing or writing code that contains Russian-language UI strings, i18n locale files (ru.json, ru.yml, ru.po), Russian comments, or transliterated identifiers (polzovatel, tovar, kolichestvo). Triggers on mixed English-code + Russian-content projects. Does not cover typography, spelling, or ё/е.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.