Convert Markdown to Figma Slides with CLI + Plugin
figdeck is a tool that automatically generates Figma Slides from Markdown files. The CLI parses Markdown and communicates with the Figma Plugin via WebSocket to create slides.
Install the figdeck plugin from Figma Community:
# Install globally
npm install -g figdeck
# Or use directly with npx/bunx
npx figdeck@latest your-slides.md
bunx figdeck@latest your-slides.md# Create a template slides.md with all syntax examples
npx figdeck@latest init
# Start the server
npx figdeck@latest slides.mdNote
WebSocket connection requires Figma Desktop app. The web browser version cannot connect to localhost due to security restrictions.
# Start WebSocket server with CLI (watch mode enabled by default)
npx figdeck@latest your-slides.md
# Or explicitly use serve command
npx figdeck@latest serve your-slides.md
# Disable watch mode
npx figdeck@latest your-slides.md --no-watch- Open the figdeck plugin in Figma Desktop
- Connect to CLI from the "WebSocket" tab in the Plugin
- Slides are automatically generated
# Output JSON from Markdown
npx figdeck@latest build your-slides.md -o slides.json- Open the figdeck plugin in Figma
- Select the "Import JSON" tab in the Plugin
- Paste JSON or select a file to load
- Click "Generate Slides" to create slides
---
# Title Slide
Subtitle or message
---
## Content Slide
Body text
- Bullet point 1
- Bullet point 2
- Bullet point 3
---
# Summary
Thank you for your attention---(horizontal rule) separates slides
# H1→ Title slide (large font)## H2→ Content slide
- Paragraphs → Added as body text
- Lists → Added as bullet points
You can set background color and text color using YAML frontmatter.
---
background: "#1a1a2e"
color: "#ffffff"
---
# Dark background & white text for all slidesAdd frontmatter at the beginning of each slide to override:
---
---
background: "#3b82f6"
color: "#ffffff"
---
# Only this slide has blue background| Option | Description | Example |
|---|---|---|
background |
Background color | "#1a1a2e" |
gradient |
Gradient | "#000:0%,#fff:100%@90" |
template |
Figma paint style | "Background/Dark" |
color |
Text color | "#ffffff" |
#color1:position1%,#color2:position2%,...@angle
color: Color (hex or rgb/rgba)position: Position (0-100%)angle: Angle (degrees), defaults to 0 if omitted
Per-slide frontmatter > Global frontmatter
figdeck init [options]
Options:
-o, --out <path> Output file path (default: "slides.md")
-f, --force Overwrite existing files
--ai-rules [targets] Generate AI agent rules (agents,claude,cursor,copilot or all)
--no-slides Skip generating slides.md
-h, --help Show helpCreates a template slides.md with examples of all supported Markdown syntax.
Optionally generate AI agent rule files with --ai-rules:
# Generate all AI agent rules
figdeck init --ai-rules all
# Generate specific rules only
figdeck init --ai-rules claude,cursor
# Add rules to existing project (keep existing slides.md)
figdeck init --ai-rules all --no-slidesGenerated files:
| Target | File | Tool |
|---|---|---|
agents |
AGENTS.md |
Codex CLI, Cursor (AGENTS.md) |
claude |
.claude/rules/figdeck.md |
Claude Code |
cursor |
.cursor/rules/figdeck.mdc |
Cursor |
copilot |
.github/instructions/figdeck.instructions.md |
GitHub Copilot |
figdeck build <file> [options]
Options:
-o, --out <path> Output file path (stdout if omitted)
-h, --help Show helpfigdeck serve <file> [options]
Options:
--host <host> WebSocket host (default: "localhost")
-p, --port <port> WebSocket port (default: "4141")
--no-watch Disable file watching (enabled by default)
--allow-remote Allow connections from non-loopback hosts
--secret <secret> Authentication secret for remote connections
-h, --help Show helpWarning
When using --allow-remote, port 4141 is exposed to your network. Use --secret to require authentication.
figdeck/
├── packages/
│ ├── cli/ # CLI package
│ ├── plugin/ # Figma Plugin
│ └── docs/ # Documentation site
├── examples/ # Sample Markdown files
└── README.md
- Markdown Specification - Supported Markdown syntax
- API Reference - CLI commands and type definitions
- Architecture - System architecture and data flow
- Plugin Setup - Figma Plugin installation guide
# CLI watch mode
cd packages/cli && bun run dev
# Plugin watch mode
cd packages/plugin && bun run watchMIT