Skip to content
Docs
Download

Figma integration

Ssscript supports Figma Dev Mode MCP, which gives the AI agent read access to your Figma designs. When connected, the agent can reference design specs, component properties, and layout details from your Figma files while writing code.

Prerequisites

Section titled “Prerequisites”
  • The Figma desktop app must be installed and running.
  • You need to set up the Figma MCP server locally. Follow the official Figma guide: Set up the desktop MCP server.

Enabling Figma MCP for a project

Section titled “Enabling Figma MCP for a project”
  1. Click the Figma icon in the header (or the connectivity bar in the mini dock).
  2. In the setup modal, click Enable for this project.
    • This writes mcpServers.figma.enabled: true into your project’s .ssscript/agent.json configuration.
  3. The agent runtime picks up the configuration and connects to the local Figma MCP server.

When connected, the Figma icon in the header turns green. You can click it again to manage or refresh the setup.

What the AI can do with Figma MCP

Section titled “What the AI can do with Figma MCP”

With Figma Dev Mode MCP connected, the agent can use design context from your Figma files:

  • Reference component properties, dimensions, spacing, and typography from Dev Mode.
  • Use design specs to inform code generation — the agent can match your Figma layout when building components.
  • Read selected element details to understand the intended structure.

Figma MCP is read-only — the agent reads your designs but does not modify them.

Working with Figma in the AI panel

Section titled “Working with Figma in the AI panel”

There is no dedicated Figma agent mode. Once Figma MCP is enabled for the project, the agent automatically gains the Figma tools and reads design context when relevant. Keep using /build (or /general) and reference what you want — for example, “build the pricing card matching the selected Figma frame.” Make sure the relevant file is open in Figma Dev Mode so the MCP server exposes it. See AI edits — Agent modes.

Troubleshooting

Section titled “Troubleshooting”
  • Figma icon stays grey — Ensure the Figma desktop app is running with the MCP server set up. Click the Figma icon and try Enable for this project again.
  • Token expired — If the MCP server was configured with a personal access token that has expired, regenerate it in Figma and update your local MCP server configuration.
  • Agent can’t see designs — Make sure you have the relevant Figma file open in Dev Mode. The MCP server exposes the currently active file/selection.