Markdown を Figma Slides に変換する CLI + Plugin システム
figdeck は Markdown ファイルから Figma Slides を自動生成するツールです。CLI で Markdown をパースし、Figma Plugin と WebSocket で連携してスライドを作成します。
Figma Community から figdeck プラグインをインストール：
# グローバルインストール
npm install -g figdeck
# または npx で直接実行
npx figdeck your-slides.mdNote
WebSocket 接続には Figma デスクトップアプリ が必要です。Web ブラウザ版はセキュリティ制約により localhost に接続できません。
# CLI で WebSocket サーバーを起動（ウォッチモードがデフォルトで有効）
npx figdeck your-slides.md
# serve コマンドを明示的に指定することも可能
npx figdeck serve your-slides.md
# ウォッチモードを無効にする場合
npx figdeck your-slides.md --no-watch- Figma デスクトップアプリで figdeck プラグインを開く
- Plugin の「WebSocket」タブで CLI に接続
- スライドが自動生成される
# Markdown から JSON を出力
npx figdeck build your-slides.md -o slides.json- Figma で figdeck プラグインを開く
- Plugin の「Import JSON」タブを選択
- JSON をペーストするか、ファイルを選択して読み込み
- 「Generate Slides」でスライドを生成
---
# タイトルスライド
サブタイトルやメッセージ
---
## コンテンツスライド
本文テキスト
- 箇条書き1
- 箇条書き2
- 箇条書き3
---
# まとめ
ご清聴ありがとうございました---（水平線）でスライドを区切る
# H1→ タイトルスライド（大きいフォント）## H2→ コンテンツスライド
- 段落 → 本文テキストとして追加
- リスト → 箇条書きとして追加
YAML フロントマターで背景色とテキスト色を設定できます。
---
background: "#1a1a2e"
color: "#ffffff"
---
# 全スライドにダーク背景＆白テキスト各スライドの先頭にフロントマターを追加して上書き：
---
---
background: "#3b82f6"
color: "#ffffff"
---
# このスライドだけ青背景| オプション | 説明 | 例 |
|---|---|---|
background |
背景色 | "#1a1a2e" |
gradient |
グラデーション | "#000:0%,#fff:100%@90" |
template |
Figma ペイントスタイル | "Background/Dark" |
color |
テキスト色 | "#ffffff" |
#color1:position1%,#color2:position2%,...@angle
color: 色（hex または rgb/rgba）position: 位置（0-100%）angle: 角度（度）、省略時は 0
個別スライドのフロントマター > グローバルフロントマター
figdeck init [options]
Options:
-o, --out <path> 出力ファイルパス (default: "slides.md")
-f, --force 既存ファイルを上書き
--ai-rules [targets] AI エージェントルールを生成 (agents,claude,cursor,copilot または all)
--no-slides slides.md の生成をスキップ
-h, --help ヘルプ表示サポートされている全ての Markdown 記法の例を含む slides.md テンプレートを作成します。
オプションで AI エージェントルールファイルを生成できます：
# 全ての AI エージェントルールを生成
figdeck init --ai-rules all
# 特定のルールのみ生成
figdeck init --ai-rules claude,cursor
# 既存プロジェクトにルールを追加（slides.md はそのまま）
figdeck init --ai-rules all --no-slides生成されるファイル：
| ターゲット | ファイル | 対象ツール |
|---|---|---|
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> 出力ファイルパス（省略時は stdout）
-h, --help ヘルプ表示figdeck serve <file> [options]
Options:
--host <host> WebSocket ホスト (default: "localhost")
-p, --port <port> WebSocket ポート (default: "4141")
--no-watch ファイル変更の監視を無効化（デフォルトは有効）
--allow-remote 非ローカルホストからの接続を許可
--secret <secret> リモート接続の認証シークレット
-h, --help ヘルプ表示Warning
--allow-remote を使用すると、ポート 4141 がネットワークに公開されます。--secret を使用して認証を有効にしてください。
figdeck/
├── packages/
│ ├── cli/ # CLI パッケージ
│ ├── plugin/ # Figma Plugin
│ └── docs/ # ドキュメントサイト
├── examples/ # サンプル Markdown
└── README.md
- Markdown 仕様 - 対応する Markdown 記法
- API リファレンス - CLI コマンドと型定義
- アーキテクチャ - システム構成とデータフロー
- Plugin セットアップ - Figma Plugin のインストール手順
# CLI のウォッチモード
cd packages/cli && bun run dev
# Plugin のウォッチモード
cd packages/plugin && bun run watchMIT