Funnel Draw / Integrations / Figma

Funnel Draw + Figma

Connect Funnel Draw and Figma's MCP server to the same AI, and it can lay out wireframes for a step's page (landing, sales, checkout) in a Figma file from the step's copy. Writing designs works from coding agents (Claude Code, Codex, Cursor, VS Code); in Claude's chat app, Figma's connector makes FigJam diagrams.

Start free Figma docs

Tools your AI runs · Through your AI

How it works

Wireframes from real copy Headline, sections and call to action come from the step, so the layout is built around the words the funnel plans.
Uses your design system Figma's remote server creates native frames, components, variables and auto layout in your files.
Diagrams for the team In Claude's app, the Figma connector turns the funnel's flow into a FigJam diagram to discuss.

Set it up

Connect Funnel Draw to your coding agent
Copy https://app.funneldraw.com/mcp from Workspace → Integrations → Claude and ChatGPT in Funnel Draw. In Claude Code run `claude mcp add --transport http funneldraw https://app.funneldraw.com/mcp`, then `/mcp` → Authenticate; in Codex run `codex mcp add funneldraw --url https://app.funneldraw.com/mcp`; in Cursor add the address as a remote server in mcp.json. Sign in to Funnel Draw and pick the workspace.
Connect Figma to the same agent
In Claude Code run `claude plugin install figma@claude-plugins-official` (or `claude mcp add --transport http figma https://mcp.figma.com/mcp`, then `/mcp` → figma → Authenticate → Allow access). In Codex run `codex mcp add figma --url https://mcp.figma.com/mcp`; in Cursor run `/add-plugin figma`.
Ask for the wireframes
For example: "Read the Sales page step in my Watercolor course funnel and wireframe it in a new Figma file: hero, three outcomes, curriculum, price, FAQ, using my library's components."
Review the file in Figma
Open the file, adjust the layout and hand it to your designer. For a FigJam diagram instead, connect Figma in Claude via Settings → Connectors → Browse connectors.
Note the result on the step
Ask the AI to add the Figma file link and what it made (which frames are approved) to the step's notes with update_funnel, or paste it on the step yourself in the canvas. The next time the AI reads the funnel with get_funnel, it sees what is already done.

Ideas to try

When the sales page step is written, Figma gets the wireframe
A watercolor course's coding agent lays out the page's sections from the step's copy in a new Figma file.
When a B2B SaaS plans a demo funnel, Figma gets each page
The agent wireframes the landing, booking and thank-you pages from their three steps, one frame each.
When the team reviews the funnel, FigJam shows the flow
In Claude's app, the AI reads the funnel and draws its steps and exits as a FigJam flowchart.

Questions

Does Funnel Draw connect to Figma directly?

No. Funnel Draw has no direct Figma integration. Your AI holds two connections, Funnel Draw's MCP and Figma's own, reads the step from one and works in the other. Funnel Draw never sees your Figma login.

Can Claude's chat app design in Figma?

Figma's help center says the Claude integration currently supports FigJam only. For Figma Design files, use a client from Figma's MCP catalog, such as Claude Code, Codex, Cursor or VS Code.

Which Figma plan do I need?

Figma says the FigJam connector works on any Figma plan. For the remote server's limits per seat, check Figma's MCP rate limits page.