DEV Community

Daniel Ainoko
Daniel Ainoko

Posted on

From Notion Page to Figma Screens in Seconds

#devchallenge #notionchallenge #mcp #ai

Notion MCP Challenge Submission 🧠

I Turned Notion Into a UI Design Tool — Claude Reads Your Page and Draws the Screens in Figma

This is a submission for the Notion MCP Challenge

What I Built

NotionCanvas MCP — a Model Context Protocol server that creates a live pipeline from your Notion workspace directly into Figma.

You write your app idea, feature spec, or product requirements in Notion — the way you normally would. Then you tell Claude:

"Read my Notion page and generate a mobile UI design in Figma"

And it does. Fully. Screens appear in Figma.

No Figma experience required. No prompt engineering. No copy-pasting. No manually describing your idea to an AI. Your Notion page is the brief — and NotionCanvas turns it into a real, editable UI in seconds.

The Problem It Solves

Every product builder knows this moment: you have a clear idea written up in Notion — user flows, feature descriptions, screen names, content — and then you spend the next hour either:

  • Trying to describe that same idea to an AI image generator with mixed results
  • Opening Figma and building frames manually from scratch
  • Hiring a designer and waiting days for a first draft

The idea is already written. Why describe it again?

NotionCanvas closes that gap entirely. Your Notion page is the single source of truth — and Claude bridges it to Figma automatically.

How It Works

The system has three parts working together:

Your Notion Page
      │
      ▼
  notioncanvas-mcp  (Node.js MCP Server)
      │
      ├── Notion API  →  reads your page content
      ├── Claude API  →  interprets it, generates a Design IR (structured JSON)
      └── WebSocket   →  sends commands to the Figma Bridge Plugin
                                  │
                           Figma Desktop
                      (NotionCanvas Bridge Plugin)
                          draws frames on canvas
Enter fullscreen mode Exit fullscreen mode

Step 1 — Notion Reader: Reads your page recursively — headings, paragraphs, lists, callouts, properties — and builds a clean structured content object.

Step 2 — Claude Interpreter: Claude receives the Notion content + your design preferences (mobile/web, theme, color, design system) and outputs a Design Intermediate Representation (DIR) — a validated JSON schema describing every screen, every component, every coordinate, every color.

Step 3 — DIR Validator: Zod validates every component before anything touches Figma. Malformed AI output never reaches the canvas. Claude gets up to 2 automatic retries with targeted error feedback.

Step 4 — Figma Writer: The MCP server sends each screen to the Figma Bridge Plugin over a local WebSocket. The plugin executes Figma Plugin API calls — createFrame(), createText(), createRectangle() — and your screens appear live on the canvas.

What It Can Generate

From a single Notion page, NotionCanvas produces:

  • Full mobile screens (390×844) or web layouts (1440×900)
  • Text components with font weight, size, alignment
  • Input fields with placeholder text
  • Buttons with variants (primary, secondary, ghost, destructive)
  • Frames with Auto Layout support (vertical/horizontal, padding, spacing)
  • Rectangles with stroke, fill, corner radius
  • Every component positioned absolutely with proper coordinates
  • Background colors derived from your brand description

All components land in Figma as native, editable nodes — not images, not embeds. You can grab any element and keep designing from there.

The 6 MCP Tools

Tool What it does
generate_ui_design Full pipeline: reads your Notion page → Claude → Figma screens
generate_screen Single screen from a plain-text description (no Notion needed)
notion_read_page Read and return structured content of any Notion page
notion_read_db Query a Notion database and return all entries
list_figma_frames List all existing frames in a Figma file
get_design_status Check if the Figma Bridge Plugin is connected and ready

Real Example

I wrote this in Notion:

"I want a simple ride hailing application. Main color theme is red. Use Inter font."

That's it. Two sentences.

NotionCanvas read that page, sent it to Claude, generated a full DesignIR with an onboarding screen, a home screen with a map layout, a booking screen with input fields and a confirm button — and sent all of it to Figma as native frames.

The whole pipeline ran in under 90 seconds.

Video Demo

Watch on YouTube

Show us the code

GitHub: github.com/TheCodeDaniel/notion_canvas

Project structure 

notioncanvas-mcp/
├── src/
│   ├── index.ts                    ← MCP server entry point (stdio transport)
│   ├── clients/
│   │   ├── notion.ts               ← Notion API + p-queue rate limiter (2.8 req/s)
│   │   ├── claude.ts               ← Claude API + JSON retry logic (3 attempts)
│   │   ├── figma-ws.ts             ← WebSocket bridge server (localhost:9223)
│   │   └── figma-rest.ts           ← Figma REST API (read-only frame listing)
│   ├── interpreter/
│   │   ├── schema.ts               ← Zod DesignIR schema (5 component types)
│   │   └── prompt.ts               ← Claude system/user prompt builders
│   ├── tools/                      ← 6 MCP tools
│   ├── types/                      ← TypeScript interfaces
│   └── utils/                      ← logger, retry, PAT expiry checker
└── plugin/
    ├── manifest.json               ← Figma plugin manifest
    ├── plugin.js                   ← Figma Plugin API (main thread)
    └── ui.html                     ← WebSocket iframe (relay bridge)
Enter fullscreen mode Exit fullscreen mode

Setup is one command after filling your .env 

npm install
npm run build
npm run setup   # auto-detects Claude Desktop config path, merges entry, resolves absolute paths
Enter fullscreen mode Exit fullscreen mode

The setup command handles everything:

  • Reads credentials from your .env
  • Detects claude_desktop_config.json path for macOS or Windows
  • Creates the file if it doesn't exist
  • Merges the notioncanvas entry without touching your other MCP servers
  • Auto-resolves the absolute path to dist/index.js — nothing to edit manually

Stack

  • TypeScript / Node.js — ESM, strict mode
  • @modelcontextprotocol/sdk — MCP server with stdio transport
  • @notionhq/client — Notion API with p-queue rate limiting
  • @anthropic-ai/sdk — Claude API (claude-sonnet-4-6)
  • ws — WebSocket server for the Figma bridge
  • zod — DesignIR schema validation before any Figma writes
  • Figma Plugin API — native canvas writes via the bridge plugin

How I Used Notion MCP

Notion MCP is the foundation that makes this whole idea possible — and not in a trivial way.

Why Notion as the input source is actually powerful

Most AI design tools start with a blank text box. You describe your idea to the AI. The AI designs something. But that description lives nowhere — it's not connected to your roadmap, your feature specs, your user stories. It's a one-off prompt.

Notion changes that. Your product thinking already lives there. Feature specs, screen flows, content requirements, user personas — structured, searchable, shareable with your team. With Notion MCP as the reader, that existing knowledge becomes the direct input to the design pipeline.

You're not describing your idea to an AI. You're pointing an AI at your idea. That's a fundamentally different workflow.

The specific integration

I used the Notion internal integration token (via @notionhq/client) to:

  1. Read pages recursively — the client traverses the full block tree, handling pagination (100 blocks per request), nested toggles, callouts, lists, and all block types. Pages with hundreds of blocks are handled cleanly.

  2. Query databases — the notion_read_db tool lets you pull structured data from Notion databases and feed it into screen generation. Imagine a database of app screens with properties like "screen type", "primary action", "user role" — and generating each one automatically.

  3. Handle the page-sharing security model correctly — Notion's integration tokens only work on pages explicitly shared with the integration. The server returns a helpful, specific error message when a 404 is returned, rather than a generic failure.

What Notion MCP unlocks that nothing else does

The pipeline means your Notion page becomes a living design brief. Update the page — run the tool again — get updated screens. It's not a one-time export. It's a repeatable process driven by the content you're already maintaining.

For solo founders, indie developers, and small product teams who live in Notion: this means going from written idea to visual screen without leaving your workflow or learning Figma from scratch.

That's the unlock. Notion stops being a notes app and starts being a design input system.

Built with Claude Code, @modelcontextprotocol/sdk, @notionhq/client, and the Figma Plugin API.
Stack: TypeScript · Node.js · WebSockets · Zod · claude-sonnet-4-6

Top comments (0)