FigCraft MCP: a design tool your agent can drive

Two ways to run it

The server speaks MCP over stdio. Text is laid out with FigCraft’s built-in fonts plus your installed fonts; add --no-system-fonts for renders that come out the same on every machine.

Set up with Claude Code

Get figcraft-cli: on macOS it is the separate figcraft-cli-0.5.1-macos-universal.zip release download; the Linux .deb and .rpm install it as /usr/bin/figcraft-cli; the Windows installer and portable zip include figcraft-cli.exe. Then register it:

# headless
claude mcp add figcraft -- /path/to/figcraft-cli mcp
# drive the running app (start it with: figcraft --control 7979)
claude mcp add figcraft-app -- /path/to/figcraft-cli mcp --attach 7979

Or add it to .mcp.json in your project (Claude Desktop takes the same block in claude_desktop_config.json):

{
  "mcpServers": {
    "figcraft": { "command": "/path/to/figcraft-cli", "args": ["mcp"] },
    "figcraft-app": { "command": "/path/to/figcraft-cli", "args": ["mcp", "--attach", "7979"] }
  }
}

What the agent gets

• Building: create_node (frame, rectangle, ellipse, polygon, star, line, arrow, text, vector, section, component or slice), set_properties (geometry, fills, strokes, effects, corner radius, auto layout, sizing, constraints), pointer and key for gestures and shortcuts, type_text.
• Every command: list_commands and run_command reach everything in the menus, such as layout.add, component.create, variable.bind, proto.interaction.add and inspect.code; batch runs several as one undo step.
• Looking: inspect_document and get_node return the layer tree as JSON, screenshot a PNG the model can see.
• Files: open_file (.figcraft, .fig best effort, REST API JSON, SVG, images), save_file, and export to PNG, JPG, WebP, SVG, PDF or experimental .fig.
• Ready-made prompts: mobile_screen, design_system, landing_page and prototype_flow, each a step-by-step plan naming the tools to use.

Prompts to try

• “Design a mobile sign-up screen for a running app with auto layout, using a primary colour variable, and show me a screenshot.”
• “Build a button component set with Primary, Secondary and Ghost styles in Default, Hover and Disabled states.”
• “Open app.figcraft, give me the React code for the Trip card component, and export every top-level frame as PNG at 2x.”

Without MCP: the CLI on its own

# Render and export headless
figcraft-cli render landing.figcraft -o landing.png --scale 2
figcraft-cli export app.figcraft -o hero.svg --node "Hero"

# Run a script of commands without a window
figcraft-cli run build-card.json --out card.figcraft

# Every command, with its parameters
figcraft-cli commands --filter autoLayout

FAQ

Source: FigCraft’s MCP server documentation and CLI reference. Flags can change between releases; check figcraft-cli mcp --help.