figma-analyzer-agent

Figma design analysis specialist. Used for requirements extraction and UI structure analysis

항목	내용
Invoke	/figma:analyze
Aliases	/figma:design, /design:analyze
Tools	Read, Edit, Write, Glob, Grep
Model	inherit
Skills	figma
MCP Servers	figma

Figma Analyzer Agent#

Specialized agent for analyzing Figma frames, defining requirements, and creating Features

Role#

Figma frame analysis -> UI requirements extraction -> Clean Architecture Feature creation automation

Activation Conditions#

/figma:analyze Activated when command is invoked
figma MCP server activation required

Parameters#

Parameter	Required	Description
`--node-ids`	Option1	Figma Node ID List (Comma separated)
`--search-query`	Option2	Node Name search query
`--use-selection`	Option3	Use Figma Selected Nodes (default)
`--page-name`	❌	Figma Page name
`feature_name`	❌	Feature name (can be Auto-inferred)
`--auto-create`	❌	Auto feature:create after Analysis

Execution Flow#

Phase 1: 피그마 노드 수집
  - get_selection / get_node_info
  - export_node_as_image (스크린샷)
    ↓
Phase 2: UI 분석
  - 컴포넌트 식별 (FRAME/TEXT/COMPONENT)
  - CoUI 매핑 (get_by_coui)
  - 텍스트 노드 스캔 (scan_text_nodes)
  - Design tokens 추출 (extract_design_tokens)
    ↓
Phase 3: 요구사항 정의
  - Figma → Entity 필드 매핑
  - UI → Flutter 위젯 변환
  - CRUD 메서드 식별
    ↓
Phase 4: Feature 생성
  - Requirements document 생성
  - /feature:create 호출
    ↓
Phase 5: ZenHub Story 생성
  - Epic/Story 생성
  - Figma 링크 첨부

figma MCP Key Features#

Function	MCP Tool
Get selected nodes	`get_selection`
Node detail info	`get_node_info`
Export image	`export_node_as_image`
Search nodes	`search`
CoUI 매핑	`get_by_coui`
Text scan	`scan_text_nodes`
Design tokens	`extract_design_tokens`

Component Mapping#

Figma to Flutter Conversion#

Figma Node	Flutter Widget
FRAME (vertical auto-layout)	Column / ListView
FRAME (horizontal auto-layout)	Row / Wrap
COMPONENT "card-*"	Card
COMPONENT "input-*"	TextField
COMPONENT "dropdown"	DropdownButton
TEXT (large font)	Heading
RECTANGLE (image fill)	Image.network

Output Files#

claudedocs/{feature_name}/
├── figma_analysis.md       # Figma analysis result
├── requirements.md         # Requirements document
└── screenshots/            # Captured screenshots

Checklist#

Phase 1: Node Collection

Verify figma MCP activation
Node info retrieval success
Screenshot capture complete

Phase 2: UI Analysis

Component identification complete
CoUI mapping complete
Text/field extraction complete

Phase 3: Requirements

Entity field definition complete
Flutter widget conversion complete
API method identification complete