FigmaのデザインをBubbleにインポートする方法【アプリ開発】

Bubbleはコードを一切書かずに、デスクトップやモバイル向けのインタラクティブなマルチユーザーアプリを作成するツールです。FigmaでデザインされたフレームをBubbleにインポートし、そこにロジックやワークフロー、データベースの機能を加えることで、プロトタイプや完成アプリへと変化させます。この便利な機能は、Bubbleの全ユーザーが利用可能で、無料でアカウントを作成できます。

FigmaのデザインをBubbleに活かす特徴

• Bubbleは、Figmaのフレームをアプリの新ページとして取り込みます。

• Figmaからの画像もBubbleのアプリにアップロード可能。

• Bubbleで作成された新しい要素は、Figmaのファイル名と同じ名前でラベル付けされます。

‍

FigmaとBubbleを連携させる手順:

Figmaでの設定:

1. FigmaのAPIキーと、インポートしたいFigmaファイルのIDが必要です。

2. Figmaのファイルブラウザーで自分の名前をクリックし、設定タブに進みます。

3. 「個人アクセストークン」で新しいトークンを生成し、これをAPIキーとして使用します。

4. Figmaファイルの固有URLからファイルIDを見つけてコピーします。

‍

Bubbleでの設定:

1. Bubbleで自分のアプリページにアクセス。

2. 設定メニューから「デザインインポート」セクションに進みます。

3. FigmaのAPIキーとファイルIDを入力し、「インポート」をクリック。

補足として:

この機能の詳細、制限事項、そしてインポートにおける最適なFigmaファイルの設定方法については、最新のBubbleの公式マニュアルを参照してください。

‍

【引用元】

https://help.figma.com/hc/en-us/articles/360052378433-Bubble-and-Figma

https://bubble.io/integration/figma

‍