skills.rest
milespossing
milespossingCOMMUNITY
Explore all skills by this author →
GitHub

figma-to-spec

Converts Figma design frames into structured component specs with mermaid diagrams and mock DOM.

Updated Jul 4, 2025
Search Tags:#frontend architecture#mermaid#browser automation#figma#playwright#design to code#component spec
One-click install
npx skills add https://github.com/milespossing/nixdots --skill figma-to-spec-milespossing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-spec
Source: https://github.com/milespossing/nixdots/tree/main/modules/agents/_skills/figma-to-spec
Command: npx skills add https://github.com/milespossing/nixdots --skill figma-to-spec-milespossing

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning a Figma design into an implementable component architecture normally requires manual inspection and ad-hoc notes. This Skill drives a signed-in browser to capture Figma frames, decomposes the visuals into presenter and container components, and emits a consistent multi-file technical spec an engineer can build against. ## Core Features & Use Cases - Browser-driven capture: Uses the browser-control skill to open Figma URLs in Microsoft Edge and screenshot frames, since Figma's canvas cannot be scraped as HTML. - Presenter/container decomposition: Identifies visual regions, classifies each as a leaf presenter or orchestrating container, and records explicit extract-vs-draw-inline decisions. - Structured spec output: Generates a fixed directory layout with per-component markdown pages, TypeScript-style prop interfaces, mermaid nesting and data-contract diagrams, and a whole-screen mock DOM. - Use Case: Paste a Figma frame URL and receive a spec/ directory containing a component tree, typed prop contracts, and open questions, ready for iterative review before implementation. ## Quick Start Spec this Figma frame and break it into components: https://www.figma.com/file/abc123/?node-id=42-17

Frequently Asked Questions about figma-to-spec

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

FAQPage Schema
How do I turn a Figma design into a component spec?▼

Provide a Figma file or frame URL and the skill opens it in your signed-in Edge browser, captures screenshots of each frame, identifies visual components, and writes a spec directory with per-component markdown pages, prop interfaces, and mermaid diagrams.

How to extract components from a Figma frame automatically?▼

The skill screenshots the frame via browser-control, lists every distinct visual region, classifies each as a presenter or container, and asks you to confirm extract-vs-draw-inline decisions before generating one markdown page per extracted component.

Can this skill read Figma layer names or design tokens?▼

No. Figma renders to a canvas element, so only screenshots are accessible, not layer names, dimensions, or fills. Structured design data would require the Figma REST API with a personal access token, which this skill does not use.

Why does Figma capture show a login page or blank canvas?▼

A login page means the Edge browser session is not signed into Figma; sign in and retry. A cropped or blurry capture means the frame exceeds the viewport; press Shift+1 in Figma to fit the frame, then recapture.

What are the limitations of Figma-to-spec conversion?▼

The skill targets component decomposition, not pixel-perfect CSS extraction, and does not handle public design system docs or FigJam boards. Output quality depends on screenshot clarity and user iteration on which regions to extract.

Related Skills

Explore More Software Engineering Skills→
cfcostacfcosta

chrome-cdp

Interact with live Chromium browsers via CDP using a Bun CLI.

Community
Advanced
f-campanaf-campana

frontend/component

Translate a Design Contract into a static Astro component with typed props and token-based styling.

Community
Intermediate
double-coding-labdouble-coding-lab
4

pp-d2c

Generates React and React Native page code from Figma design URLs via REST API.

Official
Advanced
adobecomadobecom
1

figma-to-studio-view

Convert Figma designs into pixel-accurate M@S Studio views.

Official
Advanced