Figma Extract

Name: Figma Extract
Author: duc01226

duc01226/easyplatform

9 installs
7 repo stars
Updated June 18, 2026
duc01226/easyplatform

Extracts design specifications and tokens (colors, typography) from Figma files via MCP.

About

Extracts design specifications and tokens such as colors and typography from Figma files via MCP. A developer uses it when converting a Figma design into structured tokens or specs.

Pulls colors, typography, and tokens
Figma-to-spec via MCP

Figma Extract by the numbers

9 all-time installs (skills.sh)
Ranked #1,468 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
Data as of Jul 24, 2026 (Skillselion catalog sync)

npx skills add https://github.com/duc01226/easyplatform --skill figma-extract

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/duc01226/easyplatform/figma-extract.svg)](https://skillselion.com/skills/duc01226/easyplatform/figma-extract)

Installs	9
repo stars	★ 7
Last updated	June 18, 2026
Repository	duc01226/easyplatform ↗

What it does

Extracts design specifications and tokens (colors, typography) from Figma files via MCP.

Files

SKILL.mdMarkdownGitHub ↗

Figma Extraction

Extract design specifications from Figma files using MCP integration.

When to Use

Figma URL provided for design extraction
Need design tokens from Figma
Converting Figma to implementation spec

Pre-Workflow

Activate Skills

Activate design-spec skill for design extraction best practices

Arguments

Arg	Required	Default	Description
url	Yes	-	Figma design URL
output	No	markdown	markdown \
depth	No	5	Hierarchy depth 1-10
timeout	No	30	Seconds

Workflow

1. Parse URL

Extract file key from URL
Extract node ID if present (?node-id=X:Y)
Pattern: figma.com/(design|file)/([a-zA-Z0-9]+)

2. Validate MCP

Check if Figma MCP tools available
If not: return error with setup instructions

3. Extract via MCP

Call Figma MCP with file key
If node ID: filter to specific node
Apply timeout (default 30s) - abort if exceeded
Limit component depth (default 5 levels)
Handle rate limit errors gracefully

4. Transform Response Extract and structure:

Colors: fills, strokes -> hex/rgba table
Typography: text nodes -> font/size/weight table
Spacing: auto-layout -> padding/gap table
Components: node tree -> hierarchy text

5. Format Output

markdown: Tables matching design-spec template Section 7
json: Structured object for programmatic use

6. Return Result

Save extraction output to team-artifacts/designs/{YYMMDD}-figma-extract-{feature}.md
Success: formatted specs
Partial: specs with warnings about missing data
Failed: error message with fallback suggestion

URL Format

https://www.figma.com/design/{fileKey}/{fileName}?node-id={nodeId}

Output Format (markdown)

Colors

Name	Hex	Usage
Primary	#3B82F6	Buttons, links

Typography

Element	Font	Size	Weight
Heading	Inter	24px	600

Spacing

Element	Padding	Gap
Card	16px	12px

Component Hierarchy

Frame "Card"
+-- Image "avatar"
+-- Text "name"
+-- Frame "actions"
    +-- Button "edit"
    +-- Button "delete"

Error Handling

Error	Message
No MCP	"Figma MCP not configured. See .claude/docs/figma-setup.md"
Invalid URL	"Could not parse Figma URL. Expected: figma.com/design/{key}"
Timeout	"Figma extraction timed out after {timeout}s. Try with specific node-id or reduce depth."
Rate limited	"Figma API rate limit reached. Try again later."
Not found	"Figma file not found or not accessible with current token"
Too deep	"Component hierarchy exceeds max depth ({depth}). Results truncated."

Configuration Defaults

Setting	Value	Rationale
Max Component Depth	5 levels	Prevents token bloat
Extraction Timeout	30 seconds	Prevents blocking
Max Colors	20	Focus on primary palette
Max Typography	10	Focus on main text styles

Example

/figma-extract https://www.figma.com/design/ABC123/MyDesign?node-id=1:2

Role Skill: ux-designer
Used by: /design-spec
MCP: Requires figma MCP tools

IMPORTANT Task Planning Notes

Always plan and break many small todo tasks
Always add a final review todo task to review the works done at the end to find any fix or enhancement needed