skills.rest
daangn
daangnOFFICIAL
Explore all skills by this author →
Website𝕏@daangnteamGitHub

seed-migrate-component-docs-from-figma

Extracts Figma documentation layers and generates SEED Design component guideline MDX files.

1.1k|89|Updated Mar 11, 2021
Search Tags:#mdx#Figma#Documentation#Design system#component guidelines#Migration#seed design
One-click install
npx skills add https://github.com/daangn/seed-design --skill seed-migrate-component-docs-from-figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: seed-migrate-component-docs-from-figma
Source: https://github.com/daangn/seed-design/tree/main/skills/seed-migrate-component-docs-from-figma
Command: npx skills add https://github.com/daangn/seed-design --skill seed-migrate-component-docs-from-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Manually rewriting component guideline documentation from Figma into MDX is slow and error-prone. This Skill automates the migration by extracting text and images from Figma documentation layers and producing properly formatted MDX files for the SEED Design docs site.

Core Features & Use Cases

  • Figma Content Extraction: Retrieves structured text from Figma node URLs using get_node_info, with parallel subagent dispatch for multiple URLs.
  • MDX Generation with Established Patterns: Writes guideline docs following standard heading order (Anatomy, Properties, Guidelines, Comparison, V3 Changes, Specification) using components like PlatformStatusTable, FigmaImage, DoImage/DontImage, Grid, Card, and ComponentSpecBlock.
  • Image ID Mapping: Locates Document / Image child nodes via find_nodes and maps them into placeholder fields, flagging mismatches to the user.
  • Use Case: A designer provides a Figma URL for the Radio component documentation and asks for the guideline page; the Skill produces docs/content/components/radio.mdx with extracted Korean text, mapped images, and spec blocks.

Quick Start

Provide a Figma node URL and a file name, then ask to migrate the component documentation into an MDX guideline page.

Frequently Asked Questions about seed-migrate-component-docs-from-figma

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

FAQPage Schema
How do I migrate Figma component documentation to MDX?▼

Provide the Figma node URL and a target file name. The Skill calls get_node_info to extract text content, converts it into MDX following the patterns in references/patterns.md, and writes the result to docs/content/components/{file-name}.mdx.

How are Figma images embedded in the generated MDX docs?▼

The Skill first writes the MDX with empty image placeholders, then uses find_nodes to locate Document / Image child nodes and inserts their IDs into FigmaImage, DoImage, and DontImage components. If the ID count does not match the placeholders, it asks the user before proceeding.

What MDX components are available for SEED Design guideline docs?▼

Available components include PlatformStatusTable, ComponentSpecBlock, FigmaImage, DoImage/DontImage, Grid, Card, and TokenReference. Usage rules and examples for each are documented in references/patterns.md.

Does the Skill add content not present in the Figma source?▼

No. All body text must come directly from the extracted Figma content without paraphrasing or supplementary explanation. The Skill only restructures and formats the source material into MDX.

What language and tone are the generated docs written in?▼

Docs are written in Korean using polite form (~합니다, ~해 주세요), while component names and technical terms stay in official English, such as Bottom Sheet instead of a Korean transliteration.

Related Skills

Explore More Design & Creative Skills→
wlfmnstrwlfmnstr

mdx-content

Design Zod frontmatter schemas and MDX processing pipelines for documentation sites.

Community
Basic
c15tc15t
1.9k

leadtype

Guides MDX component rendering, markdown conversion, llms.txt generation, and docs linting with leadtype.

Official
Basic
youssefKadaouiAbbassiyoussefKadaouiAbbassi

pre-review-checklist

Run tests, type checks, and lint checks on a codebase before submission.

Community
Intermediate
BangjjackBangjjack

figma-to-component

Convert Figma frames into React and TypeScript components using CVA and Radix patterns.

Official
Intermediate