mcp-figma

与 Figma 集成，实现设计规范的无缝对接。当您需要从 Figma 中获取配色方案、字体样式、间距设置，导出组件规范，同步设计令牌，或基于 Figma 设计实现 UI 时，可使用此工具。

SKILL.md

--- frontmatter

name: mcp-figma
description: Figma integration for design specs. Use when getting colors, typography, spacing from Figma, exporting component specs, syncing design tokens, implementing UI from Figma design.
allowed-tools: Read, Write, MCP

Figma MCP Integration

Table of Contents

•1. MCP Tools
•2. Setup Design System
•3. Implement Screen
•4. Export Assets
•5. Checklist

1. MCP Tools

figma_get_file

Get Figma file information.

•Input: fileKey (from URL)
•Output: File metadata, document structure, pages/frames
•Use: Explore design file, get screen list

figma_get_node

Get specific node details (frame, component, screen).

•Input: fileKey, nodeId
•Output: Layout, colors, typography, effects, children
•Use: Implement specific screen, get component specs

figma_get_styles

Get design tokens.

•Input: fileKey
•Output: Color styles, text styles, effect styles
•Use: Setup design system, create .claude/shared/Styles/ files

figma_export_image

Export image from node.

•Input: fileKey, nodeId, format (png/jpg/svg/pdf), scale
•Output: Image URL
•Use: Export icons, illustrations, assets

2. Setup Design System

Workflow (First Time)

•Run figma_get_styles with fileKey
•Create .claude/shared/Styles/AppColors.swift
•Create .claude/shared/Styles/AppFonts.swift
•Create .claude/shared/Styles/AppSpacing.swift
•Update .claude/shared/COMPONENT_FORMAT.md

Figma to SwiftUI Mapping

Figma	SwiftUI
Frame	VStack/HStack/ZStack
Auto Layout (vertical)	VStack(spacing: X)
Auto Layout (horizontal)	HStack(spacing: X)
Padding	.padding()
Fill	.background(Color)
Stroke	.border()
Corner Radius	.cornerRadius()
Shadow	.shadow()

3. Implement Screen

Workflow

•Get file structure: figma_get_file
•Find nodeId of target screen
•Get screen details: figma_get_node
•Map Figma layout → SwiftUI
•Use design tokens from .claude/shared/Styles/

4. Export Assets

Asset Type	Format	Scale
Icons	PDF	1x
Illustrations	PNG	3x
Photos	JPG	2x/3x

Figma URL Parsing

•File: figma.com/file/{fileKey}/{name}
•Node: figma.com/file/{fileKey}/{name}?node-id={nodeId}

5. Checklist

Setup Project

• Get design tokens with figma_get_styles
• Create AppColors.swift
• Create AppFonts.swift
• Create AppSpacing.swift

Implement Screen