Figma Resource Extractor

Figma Resource Extractor

Extract Figma design resources and generate structured Markdown documentation for AI-assisted frontend development.

Output Structure

specs/design/figma/
├── README.md              # Overview with resource index
├── icons.md               # Icon components list
├── components.md          # UI components list
├── layouts.md             # Responsive layout specs
├── assets.md              # Page-specific shared assets (切图区)
└── pages/                 # Page designs grouped by prefix
    ├── explore.md         # 探索-* pages
    ├── auth.md            # 登陆/注册/找回密码
    ├── team.md            # 团队 pages
    ├── profile.md         # 个人信息/他人主页
    ├── settings.md        # 设置 pages
    ├── message.md         # 消息/通知 pages
    ├── content.md         # 贴子/提案/评论
    ├── camp.md            # 营地 pages
    ├── planet.md          # 星球 pages
    ├── asset.md           # 资产 pages
    └── misc.md            # Other pages

Workflow

1. Get Figma File Structure

mcp__figma__get_figma_data(fileKey, depth=1)

List all pages (CANVAS nodes) in the Figma file.

2. Get Target Page Children

mcp__figma__get_figma_data(fileKey, nodeId, depth=2)

For the target page (e.g., 🟧大赛-PC翻新), get top-level children.

3. Classify Resources

Parse YAML response and classify by name/type:

4. Generate Link Format

Figma link format:

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

Node ID format conversion: 1234:5678 → 1234-5678 (replace : with -)

5. Group Pages by Prefix

6. Write Documentation

Generate each file with this structure:

README.md

# Figma Design Resources

Source: [Figma File Name](figma-link)
Generated: {timestamp}

## Resource Index

| Category | Count | File |
|----------|-------|------|
| Icons | {n} | [icons.md](icons.md) |
| Components | {n} | [components.md](components.md) |
| Layouts | {n} | [layouts.md](layouts.md) |
| Assets | {n} | [assets.md](assets.md) |

## Pages

| Category | Count | File |
|----------|-------|------|
| Explore | {n} | [pages/explore.md](pages/explore.md) |
...

Resource List Files (icons.md, components.md, etc.)

# {Category Name}

Source: [{Section Name}](figma-link-to-section)

## Items

| Name | Type | Figma Link |
|------|------|------------|
| {name} | {type} | [Open]({link}) |
...

Page Files (pages/*.md)

# {Category Name} Pages

## {Page Name}

- **ID**: {nodeId}
- **Type**: {type}
- **Link**: [Open in Figma]({link})

### Children (if available)
| Name | Type | Link |
|------|------|------|
...

Figma Structure Reference

For SYN系列设计系统, target page 🟧大赛-PC翻新 (11166:6711):

Usage Example

User: "提取 Figma 资源 https://www.figma.com/design/QUQsM2qOSwdYVoHVB1JpAw/SYN系列设计系统?node-id=11166-6711"

1. Parse fileKey: QUQsM2qOSwdYVoHVB1JpAw
2. Parse nodeId: 11166-6711 → 11166:6711
3. Fetch data with mcp__figma__get_figma_data
4. Classify and generate docs to specs/design/figma/
5. Report summary with file counts