FigmaとBubbleの連携とは？
Bubbleはノーコードでアプリケーション開発を可能にするプラットフォームです。FigmaでデザインしたフレームをBubbleにインポートし、ロジックやワークフロー、データベース機能を追加することで、プロトタイプから完成アプリへと発展させることができます。
デザイナーがFigmaで作成した美しいUIを、そのままアプリケーションのフロントエンドとして活用できるため、デザインと開発のギャップを埋めることが可能です。
連携のメリット
- Figmaのフレームをアプリの新ページとして取り込み可能 — デザインを一からコーディングし直す必要がない
- Figmaからの画像もアップロード対応 — デザインアセットの移行がスムーズ
- Bubbleで作成される要素はFigmaのファイル名でラベル付け — レイヤー構造が維持される
連携手順
Figmaでの準備
- APIキーの取得 — Figmaの設定タブから「個人アクセストークン」を生成
- ファイルIDの取得 — FigmaファイルのURLからファイルIDをコピー
FigmaのURLは以下のような構造になっています。
```
https://www.figma.com/file/[ファイルID]/[ファイル名]
```
この `[ファイルID]` の部分が必要です。
Bubbleでの設定
- Bubbleのアプリページの設定メニューにアクセス
- 「デザインインポート」セクションを選択
- FigmaのAPIキーとファイルIDを入力
- インポートを実行
推奨事項
インポート前の整理
不要なデザインデータを削除してからインポートすることで、余分なページ生成を防ぐことができます。Bubbleに取り込む必要のないフレーム（ワイヤーフレームの下書きや参考資料など）は、事前に整理しておきましょう。
レイヤーの命名規則
Figmaのレイヤー名がそのままBubbleの要素名になるため、分かりやすい命名規則を事前に決めておくと、Bubble側での作業が効率化されます。
レスポンシブ対応
Figmaで作成したデザインは固定サイズのため、Bubble側でレスポンシブ設定を別途行う必要があります。
まとめ
FigmaとBubbleの連携により、デザインからアプリ開発へのスムーズな移行が実現できます。デザイナーとエンジニアの協業を効率化し、ノーコードでプロ品質のアプリケーションを構築できるこの手法は、今後さらに注目を集めるでしょう。