slide2figma

Visual slide builder. Write Markdown, pull design tokens from Figma, generate HTML slides with AI, export back to Figma as real frames.

npx slide2figma

Opens a local web app at http://localhost:4000.

What it does

1. Canvas — drag to pan, click to select, double-click to fullscreen preview
2. Cook — AI reads your Markdown + Figma design tokens → generates styled HTML/CSS slide
3. Figma export — rendered HTML captured by headless Chrome → written into Figma as vector frames
4. PDF export — all slides rendered via Puppeteer → assembled PDF download

Prerequisites

| Requirement | Why | |---|---| | Node ≥ 18 | Runtime | | Google Chrome / Chromium | PDF render + Figma capture | | Claude CLI | AI slide generation + Figma MCP write-back | | Figma Personal Access Token | Read design tokens and frame thumbnails |

Chrome is auto-detected from common OS paths. Override with CHROME_PATH env var if needed.

Quick start

npx slide2figma

On first launch, a setup guide walks you through connecting Claude and Figma.

Setup

1. Figma Personal Access Token

In Figma: profile menu (top-left logo) → Help and account → Account settings → Security → Personal access tokens → Generate new token

Required scope: file_content:read

Paste the token into the app: toolbar → ⚙ → Figma Token.

Or set via environment:

export FIGMA_TOKEN=figd_...

Token is saved to ~/.slide2figma.json for future sessions.

2. Figma MCP (for write-back to Figma)

Required only for exporting slides into Figma as frames.

In Claude Desktop or Claude Code: Settings → Integrations → Figma → connect your account.

The app auto-detects the MCP connection. Check status: toolbar → ⚙ → Figma MCP section.

Workflow

Load design tokens

From Figma:

1. Paste a Figma file URL in the toolbar
2. Click Load Figma → AI extracts color palette, typography, slide dimensions, and all frame thumbnails

From a website:

1. Paste any URL in Load Web
2. App extracts CSS design tokens → generates 4 styled slide templates automatically

Build slides

Add slides via the + button or import from Markdown. Each slide has:

• Name — appears as the frame name in Figma
• Layout — 9 options: title, section, content, image-left, image-right, comparison, quote, summary, blank
• Content — Markdown (headings, bullets, bold, blockquotes, code blocks)

Assign Figma frames (optional)

Load a Figma file → left panel shows all frames with thumbnails. Select a slide, click a frame to assign it. Cook will then reference that frame's specific colors and layout as a visual target.

Cook

Click ✦ Cook Slide to generate HTML/CSS for the selected slide.
Click ✦ Cook All in the toolbar to process all slides in sequence.

AI uses:

• Your Markdown content
• Global design tokens (colors, fonts, dimensions)
• Assigned frame image + per-frame token overrides (if a frame is assigned)
• Unsplash images if UNSPLASH_ACCESS_KEY is set

Export to Figma

Requires Claude CLI with Figma MCP connected.

Single slide: select slide → sidebar → → Figma書き出し
All slides: toolbar → → Figma panel → set target file/page → 🚀 Figmaに書き出し

Each slide is:

1. Rendered by headless Chrome
2. Captured via Figma's HTML-to-design API
3. Written into your Figma file as a named frame

Cancel anytime with ✕ — kills subprocesses and browser immediately.

PDF export

Toolbar → 📄 PDF — renders all slides individually via Puppeteer, assembles a multi-page PDF, downloads automatically.

Environment variables

| Variable | Description | |---|---| | FIGMA_TOKEN | Figma Personal Access Token | | CHROME_PATH | Path to Chrome/Chromium binary | | PUPPETEER_EXECUTABLE_PATH | Alternative Chrome path for Puppeteer | | UNSPLASH_ACCESS_KEY | Enables stock photo search during Cook | | PORT | Server port (default: 4000) |

Data storage

Projects and config are stored locally in ~/.slide2figma/:

~/.slide2figma/
  projects/          # one JSON file per project
  current.json       # active project pointer
  figma-export-queue.json
~/.slide2figma.json  # Figma token + saved Figma URL

Nothing is sent to any server other than Anthropic (for AI generation) and Figma (for token/frame reads and write-back).

Security

• Server binds to 127.0.0.1 only — not accessible from local network
• CORS restricted to http://localhost:PORT — browser tabs from other origins cannot call the API

License

MIT