@bilalba/fig-mcp

MCP server for parsing .fig files. Enables AI assistants to understand and extract design information from the .fig file format for implementation guidance.

Installation

npm install -g @bilalba/fig-mcp

Or use directly with npx:

npx @bilalba/fig-mcp --help

Quick Start

Add to Claude

claude mcp add fig-mcp -- npx @bilalba/fig-mcp

Then ask Claude to parse your .fig files:

"Parse my design.fig file and show me the document structure"

Web Viewer

Browse and preview .fig files in your browser:

fig-mcp viewer design.fig
# Opens http://localhost:3000

Features:

• Tree navigation with collapsible nodes
• SVG preview with zoom/pan
• Node details panel
• Copy node IDs for MCP tool calls

CLI Inspector

Inspect .fig files from the command line:

fig-mcp inspect design.fig summary  # Show document structure
fig-mcp inspect design.fig stats    # Show node type counts
fig-mcp inspect design.fig list     # List archive contents
fig-mcp inspect design.fig json     # Output simplified JSON

CLI Commands

Command	Description
fig-mcp	Start MCP server (for AI assistants)
fig-mcp viewer <file> [port]	Open web viewer
fig-mcp inspect <file> [cmd]	Inspect file
fig-mcp --help	Show help
fig-mcp --version	Show version

MCP Tools

The MCP server exposes the following tools for AI assistants:

Document Structure

Tool	Description
parse_fig_file	Parse and return simplified document structure
get_document_summary	Text tree of document structure with pagination
get_tree_summary	Hierarchical summary for drill-down navigation
list_pages	List all pages (canvases) in the document
get_page_contents	Get contents of a specific page

Node Queries

Tool	Description
find_nodes	Find nodes by type or name
get_node_details	Get details for a node by path
get_node_by_id	Get details for a node by GUID
get_layout_info	Get inferred layout properties

Content Extraction

Tool	Description
get_text_content	Extract all text content
get_colors	Extract unique color palette
list_nodes_with_fills	List nodes with fill paints

Image & Rendering

Tool	Description
list_images	List all images with metadata
get_image	Get image by hash (base64)
get_thumbnail	Get document thumbnail
render_screen	Render node subtree as PNG
get_vector	Export vector as SVG, PDF, PNG, or WebP

Debugging

Tool	Description
get_schema_info	Kiwi schema information
get_raw_message	Raw decoded message
list_archive_contents	List files in the archive
clear_cache	Clear file cache

How It Works

1. .fig files are ZIP archives containing:

   • canvas.fig - Main document data (kiwi binary format)
   • meta.json - File metadata
   • thumbnail.png - Preview image
   • images/ - Image assets

2. The canvas.fig uses Evan Wallace's kiwi binary format

3. The kiwi schema is embedded in each file and extracted at parse time

4. Document data is decoded and transformed into structured information

5. Layout properties are inferred from node positions and auto-layout settings

Features

• Parse .fig files locally without API access
• Extract document structure, nodes, and hierarchy
• Infer layout properties (flexbox-like direction, gap, padding, alignment)
• Extract colors, text content, and styling information
• Render nodes to PNG screenshots
• Export vectors as SVG, PDF, PNG, or WebP
• Full effect support (shadows, blurs)

Requirements

• Node.js 18 or higher

Limitations

• The .fig format is undocumented and may change
• This is for local .fig files only (use a cloud API for hosted files)
• Some complex properties may not be fully parsed

License

MIT

Credits

• Kiwi by Evan Wallace - Binary format library
• MCP SDK - Protocol implementation