アーキテクチャ

figdeck の仕組み

figdeck は、Markdown を Figma Slides に変換するために連携する2つの主要コンポーネントで構成されています：

┌─────────────────────┐         ┌─────────────────────┐
│   CLI ツール        │         │   Figma プラグイン  │
│                     │         │                     │
│  - Markdown を読む  │         │  - Figma 内で動作  │
│  - 内容をパース     │         │  - データを受信     │
│  - データに変換     │         │  - スライドを作成   │
└─────────────────────┘         └─────────────────────┘

2つの使用方法

1. WebSocket モード（推奨）

最も一般的な使用方法で、ライブプレビューが可能です：

1. CLI を起動: ターミナルで figdeck serve slides.md を実行
2. プラグインを開く: Figma で figdeck プラグインを起動
3. 自動接続: プラグインが自動的に CLI に接続
4. ライブ更新: Markdown ファイルを編集すると、変更が即座に Figma に反映されます

メリット:

• 編集しながらリアルタイムでプレビュー
• ファイル変更時に自動更新
• 手動でのエクスポート/インポートが不要

2. JSON インポートモード

一度限りの生成や、WebSocket が使えない場合に使用：

1. JSON を生成: figdeck build slides.md -o slides.json を実行
2. プラグインを開く: Figma で figdeck プラグインを起動
3. JSON をインポート: 「Import JSON」タブで JSON をペーストまたはファイル選択
4. 生成: クリックしてスライドを作成

ヒント

JSON インポートモードはブラウザ版 Figma でも動作し、オフラインや CI/CD シナリオで便利です。

メリット:

• CLI を実行しなくても動作
• JSON ファイルを他の人と共有可能
• CI/CD パイプラインで有用

データフロー

WebSocket モード

Markdown ファイル
    ↓
CLI がパースして変換
    ↓
WebSocket 接続 (localhost:4141)
    ↓
Figma プラグインがデータを受信
    ↓
Figma でスライドを作成

JSON インポートモード

Markdown ファイル
    ↓
CLI がパースして変換
    ↓
JSON ファイルを生成
    ↓
Figma プラグインが JSON をインポート
    ↓
Figma でスライドを作成

コンポーネント

CLI ツール

CLI はコマンドラインツールで、以下を行います：

• Markdown ファイルを読み込む
• 内容をパースして構造化データに変換
• serve（WebSocket）と build（JSON エクスポート）の2つのモードを提供

Figma プラグイン

プラグインは Figma 内で動作し、以下を行います：

• WebSocket 経由で CLI に接続（serve モード）
• JSON インポートを受け付ける（build モード）
• Figma のネイティブスライド作成 API を使用してスライドを作成
• スタイリング、フォント、画像、すべてのスライドコンテンツを処理

セキュリティ

figdeck には、システムを保護するためのセキュリティ機能が含まれています：

• ローカルがデフォルト: WebSocket 接続はデフォルトで localhost のみ
• リモートアクセス: ネットワーク接続には明示的な --allow-remote フラグが必要
• 認証: リモート接続用に自動生成されるシークレット
• 入力検証: すべてのデータは処理前に検証されます