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 @@figma agent mode uses 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.

Using the @@figma agent mode

Section titled “Using the @@figma agent mode”

Type @@figma in the AI prompt to activate the Figma-focused mode. This tells the agent to use Figma MCP context alongside code edits. See AI edits — Agent modes for all available 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.