mcp-figma

nguyennamkkb's avatarfrom nguyennamkkb

Figma integration for design specs. Use when getting colors, typography, spacing from Figma, exporting component specs, syncing design tokens, implementing UI from Figma design.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 9, 2026
[Developer Tools]

When & Why to Use This Skill

This Claude skill bridges the gap between design and development by providing direct access to Figma files. It enables developers to extract design tokens, inspect UI components, and export assets directly within their coding environment, significantly accelerating the 'design-to-code' process and ensuring high-fidelity implementation of UI/UX specifications.

Use Cases

  • Automated Design Token Extraction: Fetching color palettes, typography, and spacing directly from Figma to generate CSS variables, Tailwind configs, or SwiftUI/Compose themes.
  • UI Component Implementation: Inspecting specific Figma nodes to retrieve precise layout properties like padding, margins, and constraints for pixel-perfect frontend development.
  • Asset Management: Programmatically exporting icons, illustrations, and images from Figma files in various formats (SVG, PNG, JPG) and scales without leaving the IDE.
  • Design-to-Code Synchronization: Keeping the codebase in sync with design updates by re-fetching the latest specs and styles from the Figma source of truth to maintain visual consistency.
namemcp-figma
descriptionFigma integration for design specs. Use when getting colors, typography, spacing from Figma, exporting component specs, syncing design tokens, implementing UI from Figma design.
allowed-toolsRead, Write, MCP

Figma MCP Integration

Table of Contents

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

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

  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

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

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