Hub Figma Extension

Connect Claude Code to Figma for accessing design files, extracting component specs, and translating design tokens into code through the Model Context Protocol.

When to Use This MCP Server

Connect this server when you need to:

• Access Figma design files and extract component dimensions, colors, typography, and spacing values while implementing UI code
• Convert Figma design tokens into CSS custom properties, Tailwind configurations, or styled-component themes directly in your development workflow
• Compare your implementation against Figma designs by retrieving frame images and specification details without switching between Figma and your editor

Consider alternatives when:

• You need to edit Figma designs, add comments, or collaborate with designers, which requires the full Figma application interface
• Your design system is maintained in code-first tools like Storybook or Style Dictionary that do not originate from Figma files

Quick Start

Configuration

Copy
name: hub-figma-extension
type: mcp
category: devtools

Example Connection

Copy
claude mcp:connect hub-figma-extension

Available Tools

get-file:           Retrieve a Figma file's structure including pages, frames, and layers
get-component:      Extract detailed specifications for a specific component or frame
export-image:       Export frames or components as PNG, SVG, or PDF for visual reference
get-styles:         Retrieve shared styles including colors, text styles, and effects
get-tokens:         Extract design tokens (spacing, colors, typography) in structured format

Core Concepts

Figma MCP Integration Overview

Aspect	Details
Transport	stdio-based MCP server communicating with the Figma REST API
Authentication	Figma personal access token or OAuth2 for team-level file access
File Access	Read-only access to files, components, styles, and design tokens
Export Formats	PNG, SVG, PDF, and JPG with configurable scale factors for assets
Token Extraction	Design tokens output as CSS, JSON, or framework-specific formats

Figma MCP Architecture

Claude Code IDE
    |
    v
[MCP Client] --stdio--> [Figma MCP Server]
                              |
                              v
                     [Figma REST API]
                              |
                    +---------+---------+
                    |         |         |
                    v         v         v
              [Files &   [Shared    [Image
              Components] Styles]   Export]
                    \         |         /
                     [Figma Platform]
                   Design Files & Libraries

Configuration

Parameter	Type	Default	Description
FIGMA_ACCESS_TOKEN	string	required	Personal access token from Figma account settings page
default_file_key	string	none	Default Figma file key to use when not explicitly specified
export_scale	float	2.0	Default scale factor for image exports (1x, 2x, 3x, 4x)
token_format	string	css	Output format for design tokens: css, json, tailwind, or scss
include_hidden	boolean	false	Include hidden layers and components in file structure results

Best Practices

1. Extract Tokens Early in Development - Use get-tokens at the start of a project to establish your design token foundation. Converting Figma tokens to CSS custom properties or Tailwind config early ensures consistent design implementation.

2. Reference Components by Node ID - When working with specific components, note the node ID from get-file responses. Querying by node ID is faster and more precise than navigating the file hierarchy for repeated lookups.

3. Use SVG Exports for Icons - When extracting icons from Figma, use SVG format for scalable, resolution-independent assets. PNG exports are better for complex illustrations or photographs that do not translate well to vector format.

4. Keep Access Tokens Secure - Figma personal access tokens grant read access to all files you can view. Store the token in an environment variable and never commit it to version control, especially in shared repository configurations.

5. Validate Token Format Against Your Stack - Set token_format to match your project's styling approach. Tailwind projects benefit from direct tailwind config output, while vanilla CSS projects should use css format for custom properties.

Common Issues

1. File Not Found with Given Key - Figma file keys are found in the file URL between /file/ and the file name. Ensure you are using the correct key and that your access token has permission to view the file.

2. Export Returns Low Resolution Image - Adjust export_scale to produce higher resolution images. The default 2x scale is suitable for retina displays, but you may need 3x or 4x for print or large-format design references.

3. Styles Not Appearing in Results - Shared styles must be published to the team library in Figma before they appear in API responses. Local styles that have not been published are only accessible through the full file structure.