Use the Figma plugin for a conversational workflow inside the canvas, or connect genable-mcp to a STDIO-capable client for typed Figma operations from your editor or terminal.
The plugin asks you to connect a provider ↓. On the MCP path, your client supplies its already-configured model; no model API key is required inside the Genable plugin.
Install the plugin from Figma Community, connect a provider in Settings, and start with a detailed brief. The agent can plan, build, inspect, and refine native layers in the current session.
Open in Figma Community →genable-mcp exposes Genable's typed design operations to STDIO MCP clients. Your client supplies the model; the local server relays tool calls over WebSocket to the Genable plugin running inside Figma Desktop.
Open the current Community plugin in Figma Desktop, then let your MCP client start npx -y genable-mcp. The live MCP schema shown by your client is the source of truth for available tools.
Install the current build from Figma Community and open it in the file you want to work on. The plugin connects to the local relay at localhost:3458.
genable-mcp to your MCP clientConfigure a STDIO server that runs npx -y genable-mcp. The example below works for Claude Code in .mcp.json (project) or ~/.claude.json (global); use your client's documented config location and wrapper shape elsewhere.
{
"mcpServers": {
"genable": {
"command": "npx",
"args": ["-y", "genable-mcp"]
}
}
} In your MCP client, ask: "List the pages in my current Figma file." If the plugin is open and the relay is connected, the client should return the page roster.
Figma's official remote MCP server and genable-mcp can both read and write through different tool surfaces. Official write-to-canvas is a remote-server capability. You can configure either one or both; when both are available, name the intended server in ambiguous requests.
In the plugin, add a provider connection, choose a model ID, and enter that provider's API key. Provider configurations are stored through Figma clientStorage. Requests go to the endpoint you configure; some presets can use a relay when browser-network constraints require it. The endpoint's data practices and billing apply.
You can also add a custom endpoint using an OpenAI-compatible, Anthropic-compatible, or Gemini connection. The MCP path does not use these plugin provider settings; its model and billing stay with the MCP client.
Include the audience, content, visual direction, hierarchy, and structural constraints that matter. Specific input gives the agent a clearer basis for planning and checking its work.
A primary button with a disabled state, using our existing brand variable.
A primary button system: solid, outline, and ghost × small, medium, and large × default, hover, and disabled. Use Auto Layout, a restrained radius, and our existing brand/primary variable. Wire the matrix as named Variant, Size, and State properties.
A launch page for operations leads comparing field tools. Calm, editorial, high information clarity. One clear hero, evidence, workflow, pricing, FAQ, and footer. Use native Auto Layout sections and existing semantic variables. Inspect the hierarchy and capture a screenshot before refining.
Iterate by chatting. "Add a sparkline to the NAV card. Bind the line color to brand/primary." Follow-ups continue from the current session and edit the existing Figma structure.