Table of Contents
はじめに
これは Fusic Advent Calendar 2025 の19日目の記事です。前日はレオナくんによる「衛星画像データはアルファになるか SatDINO: A Deep Dive into Self-Supervised Pretraining」でした。
本記事では私が現時点で辿り着いたCursorとFigma Slidesを組み合わせたスライド作成ワークフローを紹介します！
背景
まずスライド作成ワークフローについて話す前に、このワークフローに至るまでの背景を説明します。
私は最近になって社内勉強会や外部登壇の機会が増え、スライドを作る機会も増えてきました。 そして社内でAI活用を推進する身として、やはりAIで効率的にスライドを作る手法を模索している状況でもありました。 世の中にはすでにスライドを生成してくれるAIツールがたくさんありますが、どうも私に合ったものが見つかりませんでした。
その理由はいくつかあります。
- ドラフト作成までは良いが、そこからのレビューや調整に手間がかかる
- スライドの調整もAIにお願いしても、ガチャ要素があり逆に時間がかかる（こともある）
Figma SlidesのAI機能
Figmaで図を作成してそのままスライド内に埋め込めるのが便利で、普段Figma Slidesを使っています。
Figma SlidesでもAI機能があり、スライドや画像の生成/編集を自然言語で指示できて便利ではあります。 ただ、個人的には文章は補完してくれるだけでよかったり、エディタ横にチャット画面があってAIに相談やレビューをしてもらいながら進めるぐらいが丁度いいなと思っています。 そのため、正直いうとあまり活用できていませんでした...
Markdown to Slidesツール
次に試したのがMarkdownからスライドへ変換できるツールとAIエディタを組み合わせるスライド作成方法です。 Markdownファイルでスライドが作れるので、文章補完やMCP、参考資料なども一緒に配置できて便利です。 有名なところで言うとSlidevやMarpでしょうか。 これらをCursorなどのAIエディタと組み合わせて使います。
それだけでなくPresentation as CodeとしてGitでバージョン管理できたり、背景色やフォントサイズのレイアウト設定もMarkdownファイルで管理できるというメリットもあります。
ただ、これらのツールにも課題点があって、デザインの適用が難しいというのがありました。 会社のロゴやブランドカラーが使われた社内のスライドテンプレートがあり、できればそれを使いたいです。
こんな感じのテンプレをMarkdownだけで表現しようとするとかなり難易度が高くなります。
良い感じにAIの力も借りつつ、スライドの構成やデザインは自分でコントロールできるようにならないかと考えていました。
文章はMarkdown、デザインはFigma Slides
そんな中、SNSで話題になっていた deck というツールを知りました。
ツールの使い方や詳細は作者のk1LoWさんのブログを参考にしていただければと思います。
簡単に言うとこのツールはMarkdownファイルをGoogle Slidesに変換してくれるツールです。 「文章はMarkdownで、デザインはGoogle Slides」というコンセプトを持っています。
これを見つけた時は「これだ！」と思った一方で、私は普段Figmaで図を作ったり、Figma Slidesを愛用していたので、Google SlidesではなくFigma Slidesに変換してくれるツールがあれば良いなと思いました。
それなら同じようなことをFigma Slidesでもできないかと調べていくと、Figma Pluginを使えばできそうだということがわかったので、早速作ってみることにしました！
figdeck
そして試行錯誤して開発したのがfigdeckになります。
詳しい仕組みはこちらを参照していただければと思いますが、簡単なMarkdown→Figma Slidesへの変換の流れとしては以下のようになります。
Markdown ファイル
↓
CLI がパースして変換
↓
WebSocket 接続 (localhost:4141)
↓
Figma プラグインがデータを受信
↓
Figma でスライドを作成
特徴としては以下になります。
- Markdown to Figma Slides: MarkdownファイルをFigma Slidesに変換
- ライブプレビュー: Markdownファイルを変更するとリアルタイムでFigma Slidesを更新
- Figma統合: FigmaノードをMarkdownに埋め込み、スライド上に直接表示
これでスライド文章はCursorなどのAIエディタで書きつつ、デザインはFigma Slidesで調整できるようになりました。 スライド内の図に関してもFigma上で作成して、そのFigmaノードのリンクをMarkdownに埋め込むことで、スライド内で直接表示できるようになりました。 さらにFigmaのAI機能で画像生成/編集もできるので、図形、画像、デザイン周りは全てFigmaで完結できるということです。
AIアシストなPresentation as Codeの実現
ここから本題のAIアシストなPresentation as Codeの実現についての話になります。 私の中でのスライド作成ワークフローは以下のようになります。
1. スライドの構成案またはドラフト作成
CursorのAgentに作りたいスライドの内容を伝えて、スライドの構成案またはドラフトをMarkdownで生成してもらいます。 Agentに伝える際には、参考となる資料やURLを添付すると、より良い構成案やドラフトを生成してくれるとはずです。
Cursorの場合Planモードで聞くと、Agentが深ぼって聞いてくれてより精度の高いプランが出力されます。
また、Cursor RulesなどAIエージェント向けの指示ファイルを準備しておくと、より自分の文章に近い形で生成してくれると思います。 例えば「カジュアルな感じの文章で」だったり、「箇条書きで簡潔に」などの指示を書いておくと良いかもしれません。
2. 文章の補完・リライト
自分で文章をCursor内で書き始めて、AIに文章の補完をしてもらいます。 書き進めていると良い感じに補完してくれることがあり、「そうそう、それが言いたかったんだよね！」みたいなことがよくあります。
必要に応じて表現を変えたい部分などを範囲選択して、でAgentにリライトを依頼してもらいます。
3. スライドのレビュー
流れの不自然さや抜け漏れ、技術的な間違いの指摘などをCursorのAgentにレビュー依頼してもらいます。 内容が技術的な内容だったり、コードが絡む場合は、必要に応じてContext7やDeepWikiなどのMCPサーバーを使うと、最新の情報やベストプラクティスをAgentが参考にしてくれるのでおすすめです。
以下スクショの例ではFigJamの機能について公式情報をWeb検索してレビューしてくれているのがわかります。
さらにここでコミットして保存しておくことで、Gitによるバージョン管理もできます（一応Figma Slidesにも履歴機能はあります）。 GitHubを利用してPR作成、他の人にレビューしてもらうというフローも取り入れることができます。
4. figdeckを使ってFigma Slidesに変換
figdeckを使ってMarkdownファイルをFigma Slidesに変換します。 使い方については次の章で紹介します。
5. 図の作成、デザインの調整をFigma Slidesで行う
ここはほぼ人間の作業になりますが、Figma Slides上で出来上がったスライドを見ながら、デザインの調整を行います。 figdeckでは背景色、フォントサイズ、位置などある程度の調整はできますが、スライド内に埋め込む図に関してはFigma SlidesのDesign Modeで作成して埋め込んでいきます。
AIが使えるところとしてはFigmaのAI画像生成/編集機能が使えることでしょうか。 写真の背景削除や消しゴムマジックみたいな機能があるので、それらは大変便利です。
figdeckの始め方
最後にfigdeckの使い方だけ少し紹介して終わりにしたいと思います。
まず、ターミナルを開いてfigdeckコマンドでスライドのテンプレートを生成します。
Note
コマンド実行にはNode.js環境が必要です。
# スライドのテンプレートを生成
npx figdeck@latest init slides.md
# Cursor Rulesを同時に生成
npx figdeck@latest init --ai-rules cursor
実行後はslides.mdファイルが生成されます。
--ai-rules cursorオプションを指定すると、figdeckについてのCursor Rulesも同時に生成されるので、CursorのAgentがfigdeck記法を理解してくれるようになるのでおすすめです。
他にもAGENTS.md/CLAUDE.md/copilot-instructions.mdにも対応しています。
Figma Slidesへの変換
変換にはfigdeckコマンドでサーバーを起動します。
npx figdeck@latest slides.md
次にFigma Desktopアプリを開いて、Figma Slidesのファイルを新しく作成します。 下にあるメニューバーのActionsボタンをクリック、「Plugins」タブを開き、検索フィールドで「figdeck」と検索、プラグインを実行します。
Caution
FigmaはDesktop版を必ず使用してください。Web版では動きません！
プラグインの実行後は、先ほどターミナルで実行したfigdeckサーバーと接続されスライドが生成されるはずです。
接続後はMarkdownファイルを編集するとリアルタイムでFigma Slidesに反映されます。
書き方
詳しい書き方はドキュメントを参照して欲しいのですが、簡単な例を挙げると以下のような書き方ができます。
書き方Marpライクな書き方で、スライドは --- 区切りでスライドを作成します。
---
# スライド1
## スライド1のサブタイトル
スライド1の内容
---
# スライド2
## スライド2のサブタイトル
スライド2の内容
figdeckを使ったスライド作成例を載せておきますので、参考にしてください。
課題としてあったテンプレート素材を利用したスライドも対応可能です。 以下のようなFigmaノードを用意して、動的に差し替えたい部分に変数名として書いておきます。 その後ノードを選択、右クリックから「Copy link to selection」を選択して、リンクをコピーします。
Markdownファイルでは以下のように書くことで、Figmaノードをスライド上に表示させることができます。
linkには先ほどコピーしたリンクを貼り付けます。
:::figma
link=https://www.figma.com/slides/xxxx?node-id=1234
x=60
y=300
text.title=Figma Slidesの良さ
text.title1=Figmaノードが使える
text.title2=ライブインタラクション
text.title3=エクスポート機能
text.body1=Figmaのデザイン要素を直接スライドに取り込めるため、デザインとプレゼンテーションの一貫性が保たれます。
text.body2=Figmaのインタラクティブな要素をスライドに取り込むことで、動的なプレゼンテーションが可能になります。
text.body3=スライドをPDFや画像形式でエクスポートする機能を提供し、オフラインでの共有や印刷が容易です。
:::
これでMarkdownだけでは表現しきれないリッチなスライドを作成できます。 また、作成したFigmaノードも別のスライドでテキストの内容を変えて再利用できます。
最近ではfigdeckのVS Code拡張を公開しました。 シンタックスハイライト、スニペットが効くようにするなど、さらに書きやすくなりました。
まとめ
私のスライド作成ワークフローとしてはCursor + figdeck + Figma Slidesの組み合わせで、今は落ち着いています。
やはり、AIが生成したものをそのままスライドとして使うと、どうしてもただ読み上げるだけになったり、感情も入ってこないです。 多少時間はかかってしまいますが、スライドはあくまで人間主導の方が話す時を想像しながら作成、調整していく方が自然です。
AIはあくまでアシスタントとして扱うことで、自分の伝えたいことを、より効率的に形にすることが実現できたのではないでしょうか。
この記事とfigdeckがスライド作成に悩んでいる人の助けになれば幸いです。
Daiki Urata
フロントエンド/モバイルアプリなどを主に開発しています。