Figma MCP

List all pages in a Figma file.

HOW IT WORKS:

• Returns compact JSON with page names, IDs, and frame counts

• Large files (>50 pages) are automatically chunked

• Use 'continue: true' to get next batch

TYPICAL WORKFLOW:

1. list_pages → see all pages

2. list_frames(page_name) → see frames in a page

3. get_frame_info(frame_name) → detail one frame

List frames/screens in a specific page.

HOW IT WORKS:

• Search by page name (partial match supported)

• Large pages (>50 frames) are automatically chunked

• Returns compact list with frame names, sizes, and IDs

• Session remembers what was sent

TYPICAL WORKFLOW:

1. list_pages → find page name

2. list_frames(page_name) → see frames

3. get_frame_info(frame_name) → detail one frame

4. extract_assets(frame_name) → get assets

Get detailed info about a specific frame.

IMPORTANT: This should be your FIRST call for any implementation task. Always call get_frame_info BEFORE taking screenshots to understand the structure.

HOW IT WORKS:

• Returns all components, text, colors, and styles

• Large frames (>1000 elements) trigger warning with strategy

• Use depth parameter to control detail level

• Automatically chunks if response too large

The tree includes special markers:

• isCompositeAsset: true = Export this GROUP as a single image (contains image + shapes)

• isSmallElement: true = Small UI element that may be easily missed

TYPICAL WORKFLOW:

1. list_frames → find frame name

2. get_frame_info(frame_name) → structure

3. extract_styles → design tokens

4. extract_assets → icons/images

Capture screenshot of a frame.

WARNING: Do NOT use screenshots as the first step! Always call get_frame_info first to understand the structure. Screenshots are for visual reference AFTER you understand the tree.

HOW IT WORKS:

• For large frames, automatically segments into tiles

• Returns base64 image(s)

• Scale 1-4 controls resolution

TYPICAL WORKFLOW:

1. list_frames → find frame

2. get_frame_info → structure details

3. get_screenshot → visual reference

Extract all design tokens from a frame.

HOW IT WORKS:

• Collects colors, fonts, spacing, border radius, shadows

• Returns organized JSON ready for CSS/theme generation

• No chunking needed (compact output)

TYPICAL WORKFLOW:

1. get_frame_info → understand structure

2. extract_styles → design tokens

3. Use tokens to build theme/CSS

Extract all assets from a frame with progress tracking.

HOW IT WORKS:

• Detects "composite groups" (image + decorative shapes) and exports them as single PNG

• For composite groups, the ENTIRE group is exported as one image, preserving layout

• Automatically categorizes into icons/, images/, and images/composites/

• Uses smart naming based on component hierarchy

• Shows progress: "Processing batch 1/5 - found 8 icons, 3 images, 2 composites"

• Final summary with all file paths

• Look for "isCompositeAsset: true" in the frame tree to identify composite groups

TYPICAL WORKFLOW:

1. get_frame_info → see what assets exist and identify composite groups

2. extract_assets → download all

3. Check summary for file paths

Search for components by name across the file.

HOW IT WORKS:

• Searches entire file or specific page

• Returns top 20 results with total count

• If >20 results, suggests refinement options

• Use 'continue: true' to get more results

TYPICAL WORKFLOW:

1. search_components(query) → find matches

2. If too many: refine with page_name or type filter

3. get_frame_info on specific result

Get all published styles defined in the file.

HOW IT WORKS:

• Returns design system tokens: colors, text styles, effects

• These are the official styles defined in Figma

• Compact output, no chunking needed

TYPICAL WORKFLOW:

1. get_file_styles → global design tokens

2. extract_styles(frame) → frame-specific tokens

3. Combine for complete design system

Repeat the last response without making new API calls.

HOW IT WORKS:

• Returns exact same response from session state

• No Figma API call needed

• Useful for context recovery

WHEN TO USE:

• Lost context and need to see previous data

• Want to reference last response again

Get current session state for debugging.

RETURNS:

• Current file being explored

• Pages and frames already sent

• Pending continuation operations

• Last update timestamp

Clear all session state for fresh start.

USE WHEN:

• Switching to different Figma file

• Want to re-explore from scratch

• Session state seems corrupted

Analyze page structure BEFORE any implementation.

MUST BE CALLED FIRST for any large page/frame.

HOW IT WORKS:

• Identifies sections by background color changes

• Detects transition elements spanning multiple sections

• Groups icons by section

• Estimates token usage

• Recommends agent count for parallel work

RETURNS:

• sections: List with id, name, bgColor, bounds, complexity

• transition_elements: Elements spanning multiple sections

• icons_by_section: Icons organized by section

• total_estimated_tokens: Token estimate for full frame

• recommended_division: 'single' or 'multiple'

• recommended_agent_count: How many agents to use

TYPICAL WORKFLOW:

1. analyze_page_structure → understand structure

2. If recommended_division='multiple': use get_section_screenshot

3. Each agent uses get_agent_context for its section

Capture screenshot of a specific section within a frame.

HOW IT WORKS:

• First call analyze_page_structure to identify sections

• Makes other sections transparent (shows only target section)

• Optionally includes transition elements context

• Returns cropped image focused on section

• Useful for parallel analysis of large frames

TYPICAL WORKFLOW:

1. analyze_page_structure → identify sections

2. get_section_screenshot(sectionId) → capture isolated section

3. get_frame_info with section context → implementation details

Prepare agent context for parallel implementation of a section.

HOW IT WORKS:

• Call after analyze_page_structure to identify sections

• Returns complete context for a single agent to implement one section

• Handles responsibilities: what to implement vs coordinate

• Includes icons, styles, and transition element info

• Generates agent-specific instructions with coordination rules

RETURNS:

• section: Details (id, name, background color, bounds)

• responsibilities: what agent implements, coordinates, or skips

• assets: icons and images in this section

• styles: colors, fonts, spacing specific to section

• agent_info: index, total agents, is_first, is_last

• instructions: detailed markdown instructions for this agent

TYPICAL WORKFLOW:

1. analyze_page_structure → identify sections

2. For each section: get_section_screenshot → visual reference

3. get_agent_context(sectionId, agentIndex) → agent-specific context

4. Each agent implements using provided context

Get complete page context in ONE call with all sections, assets, screenshots, and styles.

WHAT YOU GET IN ONE CALL:

• Complete page structure with all sections identified

• Screenshots for each section (base64 encoded)

• All assets organized by section with unique names

• Design tokens per section

• Asset map for quick lookup

• Agent instructions ready for parallel implementation

• Transition elements that span multiple sections

PERFECT FOR:

• Getting full context before implementation

• Preparing data for parallel multi-agent work

• Quick assessment of page complexity

• One-call solution for complete page understanding

RETURNS:

• overview: Frame metadata and recommendations

• sections: Array with all section details including screenshots

• assetMap: Quick lookup table for assets by unique name

• agentInstructions: Pre-written instructions for each agent

• transitionElements: Elements spanning multiple sections

TYPICAL WORKFLOW:

1. get_full_page_context → get everything at once

2. Distribute sections to multiple agents using agentInstructions

3. Each agent implements their section with all necessary context