GensparkのAIスライドをFigmaで編集したいけれど、直接連携できるのか気になっていませんか。
2026年9月時点で、GensparkのAIスライドとFigmaを自動連携させる機能はありません。PPTX書き出しかhtml.to.design経由のいずれかで取り込む必要があります。
本記事では連携方法の選び方からFigma DesignとFigma Slidesの使い分け、取り込み後の崩れ・エラー対処までを紹介します。GensparkのAIスライドで作成した資料をFigmaで発表用に仕上げるまでの流れがわかるようになるでしょう。
＼ 無料プランからお試し ／
GensparkとFigmaはAIスライドで連携できる？
GensparkのAI Slidesは、Figmaへワンクリックで同期するわけではなく、PPTX書き出しかhtml.to.design経由のいずれかで取り込みます。
Figmaへの直接書き出しには対応していない
Gensparkの編集画面を探しても、作成したAIスライドをそのままFigmaへ送信するボタンは見つかりません。
「連携」という言葉から、クラウド上で自動的にファイルが同期する機能を想像しがちですが、実際はPPTX形式で書き出してFigma Slidesにインポートするか、html.to.designでFigma上にレイヤーとして取り込むか、どちらかの手作業が必要です。なお、どちらの方法も基本的には数クリックかつ数分程度で完了します。
PPTX経由とhtml.to.design経由の2パターンの連携方法
GensparkのAIスライドをFigmaへ取り込む方法は2つあります。
一つはGensparkでPPTX形式に書き出し、Figma Slidesの「インポート」でそのまま読み込む方法です。Gensparkで書き出したものをFigma Slidesへインポートするだけで完結するため、操作がシンプルで初めてFigmaを使う人でも迷いにくいでしょう。
もう一つはhtml.to.designのChrome拡張機能とFigmaプラグインでスライドをキャプチャし、Figma DesignまたはFigma Slidesへレイヤー単位で取り込む方法です。ウェブサイトの画面を読み込むため、AIスライド以外で作成したデザインや、Figma Designにも取り込めて編集の自由度が高くなります。
二つの連携方法の違いを、料金・連携先・必要なツール・編集の自由度・手順の難易度・プレゼン機能・崩れやすさの7軸で整理しました。
| 比較項目 | PPTX経由 | html.to.design経由 |
|---|---|---|
| Gensparkの料金 | PPTX書き出しに有料プランが必要 | 無料プランでも可 |
| Figmaの料金 | インポートは無料プランで利用可 | 10回/30日までは無料 超える場合はProプランが必要 |
| 連携先 | Figma Slides | Figma Design／Figma Slides （プラグインを実行したプロジェクト側に取り込まれる） |
| 必要なツール | ・GensparkのPPTX書き出し機能 ・Figma Slidesのインポート機能 | ・html.to.designのChrome拡張機能 ・Figmaプラグイン |
| 目的 | 発表用にスライドを編集 | レイヤー単位で細部まで調整 |
| 手順の難易度 | 書き出しとインポートのみで完了 | 拡張機能の準備とキャプチャの手順が加わる |
| プレゼン機能 | Figma Slidesの発表モードをそのまま使える | Figma Designの場合は仕上げ後にコピーする工程が必要 |
| 崩れやすさ | フォントやレイアウトが変換時にずれるほか、表やアニメーションはインポートされない | 表や画像、アニメーションが欠落することがある |
Gensparkの有料プランを契約している場合、あるいはFigma Slidesへそのまま取り込めれば十分な場合はPPTX経由を選んでください。
Genspark側の有料プランを使わずに取り込みたい場合や、AIスライドに限らずGensparkで作成したデザインをFigma Design上で作り込みたい場合はhtml.to.design経由を選んでください。
連携先のFigma DesignとFigma Slidesの違い
Figma Designは、図形やレイヤーを自由に配置してデザインを作り込む通常の編集画面です。ロゴ作成やアプリのUIデザインなど、Figmaと聞いてまず思い浮かぶのはこちらの画面といえます。
一方のFigma Slidesは、発表者ノートの追加やスライドショー形式での再生に対応した、プレゼン専用の画面です。
両者の役割は次のように分かれます。
| 項目 | Figma Design | Figma Slides |
|---|---|---|
| 主な用途 | 図形・レイヤーを使った自由なデザイン編集 | プレゼン発表用のスライド運用 |
| PPTX経由 | ||
| html.to.design経由 | ||
| 発表機能 | 発表者ノート・スライドショー再生は非対応 | 発表者ノート・スライドショー再生も可 |
基本的には発表用のスライドとして活用したい場合はFigma Slideを、ポスターやよりグラフィックなデザインとして仕上げたい場合はFigma Designを選ぶといいでしょう。
＼ 無料プランからお試し ／
GensparkのAIスライドをPPTX経由でFigma Slidesへ取り込む
PPTX経由なら、Gensparkの書き出しボタンからFigma Slidesの「インポート」までは数クリックで完了します。フォントやレイアウトはそのまま反映されるとは限らず、変換後の確認が必須です。
Gensparkでスライドを整える
Figmaへ取り込む前に、Gensparkの編集画面でスライドの内容を見直しておくと、取り込み後の手戻りを減らせます。確認しておきたいのは次の3点です。
- 誤字脱字：文章そのものの誤りは、Figmaへ取り込んだ後よりGenspark側で直したほうが手早く終わる
- はみ出した文字：意図しない位置で折り返されたり、枠の外にはみ出して見切れたりしていないかを確認
- 重なった図形：図形が重なって隠れている箇所がないかを確認
Figmaへ取り込んだ後もレイアウトの修正はできますが、文章そのものの直しはGenspark側で済ませておいたほうが手早く終わります。
特に文字数が多いスライドやページ数が多い資料は、ファイルサイズが大きくなるため、取り込みに数秒程度時間がかかる場合があります。発表に不要なページ、参考として残していただけのページは、取り込み前に削除し、必要な枚数まで絞り込んでおきましょう。
スライドをPPTXで書き出す
Gensparkの編集画面から、次の3ステップでPPTXファイルを書き出します。PPTX形式への書き出しはGensparkの有料プランが必要です。
Gensparkでスライドの編集画面を開きます。キャンバス右上の「エクスポート」ボタンをクリックします。
エクスポート形式選択が表示されるので「PPTX」を選択し「エクスポート」をクリックします。
ダウンロードの実行ウィンドウが表示されるので「ダウンロード」をクリックします。デフォルトのダウンロードフォルダに保存されます。
これで書き出しが完了したので、次にFigmaへインポートします。
Figma SlidesへPPTXをインポートする
書き出したPPTXファイルは、次の3ステップでFigma Slidesへ読み込みます。PPTXのインポートはFigma Slidesのみで可能です。
Figmaのホーム画面右上に「さらに表示」のメニューがあります。中に「インポート」があるのでクリックします。
ダウンロードしたPPTXファイルを指定します。ドラッグアンドドロップもしくは「コンピュータからインポート」を選択してエクスプローラーから指定も可能です。
インポートが開始されます。完了するとホーム画面にスライドのプロジェクトとして表示されるのでダブルクリックします。スライドの枚数と順序が元の資料と一致しているか確認します。
＼ 無料プランからお試し ／
GensparkのAIスライドをhtml.to.designでFigmaへ取り込む
html.to.designは、Chrome拡張機能とFigmaプラグインの2つで構成されており、両方を組み合わせることでより少ないエラーで取り込めます。役割の違いは次の通りです。
- Chrome拡張機能：Gensparkのプレビュー画面を開いた状態でキャプチャする役割
- Figmaプラグイン：Chrome拡張機能で取得したデータをレイヤーとして読み込む役割
Genspark側では無料プランでも制限なく使用できます。Figmaでは、無料プランは30日間に10回までのインポートに対応しており、それ以上はFigmaのProプランへの切り替えが必要です。
ここではプラグインの準備から実際にFigmaへ取り込むまでの手順を紹介します。
html.to.designの拡張機能を用意する
まずはChrome拡張機能の追加方法を解説します。
ポップアップが出るので「拡張機能を追加」をクリックします。
追加されると右上のパズルマークをクリックするとhtml.to.designが表示されます。
これでGensparkをはじめ、あらゆるウェブサイト画面をキャプチャしFigmaに取り込めるようになりました。
Figmaでhtml.to.designのプラグインを追加する
次に、Chrome拡張機能で取得したデータをレイヤーとして読み込めるように、Figmaでhtml.to.designのプラグインを追加しましょう。
ホーム画面の右上のボタンから追加したいプロジェクトをクリックします。Designで取り込みたい場合は青い「Design」を、Slidesで取り込みたい場合はオレンジ色の「Slides」をクリックしてください。
今回はSlidesを選択します。
任意のテンプレートを選択可能ですが、Gensparkでデザインができているため空のスライドを選択します。
スライド編集画面左上のアイコンをクリックし、「プラグイン」メニューから「プラグインを管理」をクリックします。
検索ボックスに「html」と入力すると絞り込まれて「html.to.design」が表示されるのでクリックします。
プラグインの説明画面が表示されるので実行を押しましょう。
heml.to.designが起動された状態になります。
Figma Designで取り込みたい場合も流れは同じです。
html.to.designでキャプチャしてFigmaへ取り込む
html.to.designのChrome拡張とプラグインが準備できたら、実際にGenspark AIスライドで作成したデザインをFigmaに取り込んでみましょう。
GensparkのAIスライド編集画面で、画面右上の「…」ボタンにカーソルを合わせるとメニューが表示されます。「プレゼンテーションビュー」をクリックします。
ブラウザで新しいタブが立ち上がり、大きくスライドが表示されます。スクロールして確認できます。
開いたプレビュー画面で、右上のパズルマークから拡張機能を開き、「html.to.design」をクリックします。
拡張機能の欄に「html.to.design」のアイコンが表示され、キャプチャのサイズなどを設定する画面が表示されます。任意のサイズを選択し、「Capture Current Page」をクリックしてキャプチャを実行します。
完了するとFigmaのプラグインへ転送された旨のメッセージが表示されます。
Figmaを開くと「html.to.design」の設定画面がポップアップで表示されます。左から2つ目の「Extension」タブを選択するとインポートが可能です。
Figma側でプラグインをあらかじめ起動した状態で、「Auto-import new captures」をオンにしておくとChromeでキャプチャ完了と同時に自動的にインポートが始まります。
インポートが完了すると完了メッセージが表示されます。「OK」をクリックするとボックスが閉じるので、取り込まれたデータを確認しましょう。
これでhtml.to.figma経由での取り込みが完了しました。
＼ 無料プランからお試し ／
Figmaでスライドを仕上げて発表の準備をする
取り込んだだけのスライドは、レイアウトが崩れている場合もあります。16:9へのサイズ統一、レイヤー配置の確認と、ブランドカラーの反映、発表者ノートの追加まで行い、仕上げの工程を進めましょう。
サイズ調整
Figma上でのフレームサイズが揃わない場合があるため、まずはサイズから確認しましょう。サイズがばらばらのまま編集を進めると、画面の一部が欠けて表示されたり、スライドごとに余白の広さが変わって見た目が不揃いになったりします。
Figmaで左側のサムネイルですべてのスライドを選択し、画面下のメニューで一番右のデザインモードに切り替えます。左から2番目のアイコンをクリックするとフレーム設定が可能になります。
右側のメニューから「プレゼンテーション」設定から16:9のプリセットを選びます。
統一する際は、既存のテキストや図形の配置がフレームからはみ出していないかもあわせて確認してください。
レイヤーとレイアウト
取り込み後は、レイヤーパネルでテキストや図形が個別のレイヤーに分解されているか確認します。文字や図形をクリックしたときに、要素ごとに個別で選択できれば、正しくレイヤーとして取り込めています。
万が一、1枚の画像として取り込まれている場合は、キャプチャ全体が1つのオブジェクトとして扱われている状態です。この状態では、Figma上で文字だけを直接編集することができません。
プレビュー画面の表示が完全に開いたのを確認してから再度キャプチャし、レイヤーパネルで分解状況を確認し直してください。
フォント・カラーの調整
社内テンプレートやブランドカラーがある場合は、取り込んだスライドのフォントと配色をそのルールに合わせます。フォントは見出し・本文ともに社内規定のものに統一し、カラーはブランドカラーを意識しましょう。
図形・表についても同様に、図形の配置がずれたり、表の枠線が崩れたりすることがあります。特に表やグラフを含むスライドは、セルの幅や罫線の位置が変わりやすいため、1枚ずつ元のスライドと見比べながら優先して確認してください。
PPTX経由では、Gensparkで指定していた和文フォントがFigma Slides側にインストールされておらず、初期設定フォントの「Inter」や他の代替フォントに置き換わります。
Once imported, all text layers will be updated to use the default Figma Slides font, Inter. You can use the text settings in the right sidebar to select a new font and change the font properties.
和訳:インポート後、すべてのテキストレイヤーはFigma SlidesのデフォルトフォントであるInterを使用するように更新されます。右側のサイドバーにあるテキスト設定を使用して、新しいフォントを選択したり、フォントのプロパティを変更したりできます。
引用:Figmaヘルプ
フォントとカラーを複数スライドで統一する場合は、スタイルを登録しておくと、スライドごとにフォント名やカラーコードを再指定する手間を省けます。
画面右側の「デザイン」パネルから、カラーは「ローカルスタイル」、テキストは「テキストスタイル」でそれぞれ登録してください。
Figma DesignからFigma Slidesへコピーする
Figma Designで編集作業をしてから、DesignをFigma Slidesへ移動することもできます。Figma公式の「Copy to Figma Slides」機能を使いましょう。
Figma Design上で、コピーしたいトップレベルのフレームを選択します。右側サイドバーのメニューを「Frame」に変更すると「Copy to Figma Slides」が表示されるのでクリックします。
Figma Slidesの画面が立ち上がりコピーされます。レイアウトなどを確認します。
html.to.designの実行時点でFigma Slidesのプロジェクトを直接開いていた場合は、このコピー作業は不要です。
発表者ノート追加
編集したスライドは、次の4ステップで発表・共有できる形式に書き出します。Figma Slidesの画面で解説します。
スライドをクリックすると画面下部に発表者ノートを入力することができます。
アニメーションを設定したい場合は任意のオブジェクトをクリックすると右側のサイドバーに「アニメーション」メニューが表示されるので設定が可能です。
スライドが完成したら左上のFigmaのアイコンをクリックします。「ファイル」の「スライドをエクスポート」をクリックします。
PDFかPPTXか選んで「エクスポート」をクリックします。デフォルトのダウンロードフォルダに保存されます。
＼ 無料プランからお試し ／
GensparkとFigma連携で起こりやすいトラブル
GensparkのURLがFigmaで開けない、共有範囲が意図せず広がっているなど、取り込み作業ではいくつかの決まったパターンのトラブルが起こります。対処法はエラーの種類によって異なります。
インポートできない・権限エラー
ファイルのインポートでエラーが出る場合は、まずファイルの破損の有無とFigma側の編集権限を確認します。
次の表を参考に原因の特定と対処をしてみてください。
| エラー内容 | 原因 | 対処法 |
|---|---|---|
| インポートが途中で止まり完了しない | ダウンロードが途中で止まっている、またはファイルサイズが極端に小さい | PPTXファイルを書き出し直し、正常にダウンロードされているか確認 |
| html.to.designで取り込んだ内容がFigmaへ反映されない | プラグインを実行しているFigmaプロジェクトで、閲覧権限のみである | プロジェクトの編集権限を確認し、管理者に編集権限の付与を依頼 |
| Figma Slidesの「デザインモード」で自由に編集できない | Figmaアカウントが「コラボレーションシート（Collab seat）」のため、デザインモードの利用が制限 | Figma Design側の個人用ドラフト領域へいったんコピーして編集するか、管理者に有料の「フルシート（Full seat）」プランへの変更を依頼 |
いずれの原因でも解決しない場合は、組織アカウントでFigmaを利用している際に管理者側でインポート機能やプラグインの利用そのものが制限されていることもあるため、管理者への確認を検討してください。
画像や表、アニメーションの欠落
表やグラフ、アニメーションを含むスライドは、変換過程で次のように反映されないことがあります。
| 区分 | 要素 | 詳細 |
|---|---|---|
| 欠落する | 動画 | PPTX経由でFigma Slidesへ取り込む場合、動画は変換時に失われる。 |
| 自動で取り込まれない | 表・グラフ・SmartArt | 表形式のままでは自動でインポートされない。該当箇所はスクリーンショットを撮って画像として貼り付けるか、Figmaの図形・表ツールで作り直す。 |
| 自動で引き継がれない | 既存のアニメーション・トランジション | Gensparkで設定していたアニメーションなどは、PPTX経由・html.to.design経由のいずれでも引き継がれにくい。 |
発表でアニメーションを使用したい場合は、取り込み後にFigma Slides側で新たに設定し直してください。ページ数が多い資料はファイルサイズが大きくなり、読み込みに数秒程度時間がかかる場合があるため、崩れやエラーが続く場合はスライドを分割して取り込む方法も検討してください。
共有範囲の設定ミスによる情報漏えい
Figmaへ取り込む作業では、閲覧用のリンク発行や外部ツールへのアクセス許可が新たに発生します。GensparkからFigmaへ移すだけのつもりでも、共有範囲が広がっていることに気づきにくいため、取り込み前に確認に以下の2点を確認しましょう。
- Figmaのファイル共有設定：閲覧・編集できる相手を、必要なメンバーだけに限定。
- html.to.designのChrome拡張機能の権限範囲：キャプチャ対象のページやデータへのアクセス範囲を確認。
Figmaのファイル共有設定でプロジェクト全体に公開したリンクをそのまま使い回していると、社内限定のはずの資料が意図しない相手に渡ってしまうことがあります。
また、html.to.designのChrome拡張機能でも、インストール時に表示されるアクセス権限の範囲やキャプチャ対象に機密情報が含まれていないかを見落としてしまうケースがあります。
取り込み作業に入る前の数分で確認できる内容のため、Gensparkでの下準備と合わせて確認しておくと、取り込み後にあらためて共有範囲を見直す手間を減らせます。
＼ 無料プランからお試し ／
GensparkとFigma連携のよくある質問
スライド更新時の再取り込みの要否や、後から手直しする際のルート選びなど、実務で気になる4つの疑問に個別に答えます。
GensparkのAIスライドを更新したらFigmaへ取り込み直す必要があるか
必要です。
GensparkとFigmaは自動で同期しないため、Genspark側の修正後はPPTXの再書き出しかhtml.to.designでの再キャプチャを行い、Figmaへ取り込み直します。
PPTX経由とhtml.to.design経由は後から手直しする場合どちらが向いているか
html.to.design経由です。
レイヤー単位で取り込まれるため、テキストや図形を個別に選択して修正できます。PPTX経由はフォントや図形が崩れる場合がありますが、スライドを最短で仕上げたいときに便利です。
無料プランで発表用の書き出しまで完了できるか
html.to.design経由なら無料プランで完結できます。
html.to.designは30日10回までなら無料プランで使えます。一方PPTX経由は、Gensparkの書き出しに有料プランが必要になります。
社外配布用の資料としてそのまま使ってよいか
配布前に確認が必要です。
Gensparkで生成した画像やレイアウトの利用条件、社内テンプレートの利用ルールを確認し、社外に出せる情報の範囲を精査してから配布してください。
＼ 無料プランからお試し ／
まとめ
GensparkのAIスライドは、Figmaへワンクリックで同期しません。PPTX経由でFigma Slidesへ取り込む方法と、html.to.design経由でFigma DesignまたはFigma Slidesへ取り込む方法の2ルートがあります。
Gensparkの有料プランを契約している場合や最短でAIスライドを仕上げたい時はPPTX経由、GensparkとFigmaともに無料プランで進めたい場合やスライドに限らずFigma Designでデザイン全般を仕上げたい時は、html.to.design経由を選んでください。
取り込み後はサイズとレイヤー配置を整えて、発表・共有できる資料に仕上がります。フォントや表の崩れは変換時に起こりやすいため、書き出す前に1枚ずつ見比べて確認しましょう。
＼ 無料プランからお試し ／