---

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 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)

1. Run figma_get_styles with fileKey
2. Create Shared/Styles/AppColors.swift
3. Create Shared/Styles/AppFonts.swift
4. Create Shared/Styles/AppSpacing.swift
5. Update Shared/COMPONENT_FORMAT.md

Figma to SwiftUI Mapping

---

3. Implement Screen

Workflow

1. Get file structure: figma_get_file
2. Find nodeId of target screen
3. Get screen details: figma_get_node
4. Map Figma layout → SwiftUI
5. Use design tokens from Shared/Styles/

---

4. Export Assets

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

• Get nodeId from Figma URL
• Run figma_get_node for specs
• Map layout to SwiftUI
• Use design tokens
• Export assets if needed