この機能は、FigmaのデザインをBubbleアプリにインポートするものです。2つのプラットフォームの違いのため、インポートは100％忠実ではありませんが、Bubbleアプリの開発を大きく前進させることができます。
Figmaファイルのインポート方法
・[設定] > [一般] を選択し、[デザインのインポート] セクションまでスクロールします。
・FigmaのAPIキーは、Figmaのアカウント設定から確認することができます。
・Figmaのダッシュボードページで、左上の自分の名前をクリックし、まだ持っていない場合は「新しいパーソナルアクセストークンを作成」します – これがあなたのAPIキーです。
・FigmaのファイルIDは、Figmaでファイルを開いているときのURLから確認できます
・URL は figma.com/file/{random letters and characters} または figma.com/file/{random letters and characters}/[slightly more readable name] の形式で、ファイル ID は {random letters and characters} になります。
・インポート “をクリックするとインポートが始まりますが、大きなFigmaファイルの場合は数分かかります
インポートの仕組み
・Figmaファイルの各ページのトップレベルフレームは、Bubbleアプリの新しいページとしてインポートされます。
・Figma の不可視項目（レイヤーのサイドバーで不可視にしたもの）はインポートされない
・Bubble は、Figma の要素を最も近い種類の Bubble の要素にマッピングして、Figma から可能な限り多くのものをインポートしようとします。
・Bubbleは、Figmaでグループ化された要素からグループを作成します。
・Figmaでの要素名はBubbleにも引き継がれます（インポートされた名前には文字数制限があり、Bubbleは重複した名前を避けることに注意してください）。
・Bubble は、Figma のスタイルと一致するスタイルを作成しようとしますが、より複雑な状況 (たとえば、1 つのテキストに複数のスタイル) では、Bubble が適用するスタイルについて推測したり、テキストにリッチテキストマークアップ (bbcode) を使用したりすることがあります。
・Figmaで作成したあらゆる種類のベクターが、アプリでは画像としてインポートされます
・Figma のベクトルだけを含むグループは、画像全体としてインポートされます（たとえベクトルだけを含むサブグループを持っていても、このルールは発動しません）。
・画像はFigmaのサーバーにアップロードされたものを使用します。
・バブルは、何がリピーター集団なのか、一切推測することはありません
・図形やフレームが不可視の塗りつぶしを持つ場合、透明な塗りつぶしとして扱われる
インポート中、Bubbleは2つの画像が技術的に互いにコピーされている場合でも、各画像を別々の画像として扱います。また、Figmaファイルに大きな画像（例：大きなPNGが埋め込まれたSVG）がある場合でも、Bubbleはそれらの（非常に大きな）画像を忠実にインポートしようとします。
既知の制限事項
・これは一方向の1回限りのインポートで、BubbleページとFigmaフレームの間のリンクは維持されません。再度インポートを実行すると、各トップレベルのFigmaフレームに対して新しいBubbleページが再び作成されるだけです
・インポートしようとすると「ネットワークエラー」が発生する場合。
・まず、広告ブロック／トラッキング防止ソフトウェアが、FigmaのAPIへの呼び出しをブロックすることがあるので、それを確認してください。
・少し時間をおいてからもう一度試してみてください。もし常にこの問題が発生するようであれば、バグとして報告してください。
・Figmaでは、テキストボックス周辺の制約が厳しいため、Bubbleはテキスト要素の高さと幅を追加して、Figmaのデザインに近づけるようにします。
・Figmaでは可能だが、Bubbleでは現在不可能なスタイリングはインポートされません。ただし、複雑なスタイリングを実装するための回避策は通常存在します。
・テキストの下端垂直アライメントがない
・影は1つの要素に1つだけ付けることができます。
・グラデーションは最大3色まで可能
・複数の塗りつぶしを同時にサポートしない – Bubbleはオブジェクトの最初の塗りつぶしのみを取得する
・0pxの丸みを帯びたボーダーは上書きされます。
・この他にも、まだ引き継がれないが、将来のリリースで登場するかもしれないスタイリングプロパティがいくつかあります。
・要素の左右で異なるボーダースタイルを設定する
・フレームから上部または左側にはみ出した要素
また、非常に大きく複雑なFigmaファイルをインポートしようとすると、インポートがタイムアウトすることがあります（これもコンピュータのリソースに依存します）。この制限にぶつかる場合は、Figmaファイルを小さなファイルに分割して、それらを個別にインポートしてみてください。
Figma ファイルのセットアップのヒント
・この機能はFigmaファイル内のすべてのフレームをインポートするので、あるページの多くのバリエーションがある非常に大きなFigmaファイルがある場合、フレームのサブセットを新しいファイルにコピーしてインポートに使用するとよいでしょう。
・トップレベルのフレームはすべて新しいページとしてインポートされ、インポートは一回限りであることを忘れないでください。FigmaでBubbleページを分割してデザインし、定期的にインポートして新しい分割をBubbleに取り込むことを検討するとよいでしょう。
・モバイルページを作成し、アプリケーションに直接追加する素晴らしい方法です。
・Figmaファイルからコンポーネントをフレームにまとめてインポートし、Bubbleアプリケーションを構築する際に簡単にコピー＆ペーストできるようにする実験。
・ストロークとしてアウトライン化しても問題なく、正常に引き継がれます。
・マスクされた要素を取り込む場合は、マスクされた要素だけでグループ（フレームではない）を作成します。グループ内の要素にマスクされているものがあるかどうかを調べ、マスクされている要素が見つかった場合は、グループ全体を画像として取り込みます。
・画像の取り込みに問題がある場合。フレーム上の画像フィルではなく、画像オブジェクトを使用していることを確認してください。現在、イメージ・オブジェクトのみをサポートしており（つまり、Figma上で「イメージを配置」をクリックした場合）、必要に応じて他のオブジェクトでマスクすることができます。
・背景塗りつぶしのインポートに問題がある場合：フレームがページとしてインポートされた場合、現在そのページに対する塗りつぶしをサポートしていません。オブジェクトやインナーフレームなどで塗りつぶしが表示されない場合は、複数の塗りつぶしがないかを確認してください。Bubbleはどの要素に対しても1つの塗りつぶししかサポートしていないため、1つしか選択しません。
トラブルシューティング
ネットワーク・エラーが発生した場合、またはBubbleがAPIキーとファイルIDを有効でないと判断した場合、まずFigmaアカウントで新しいAPIキーを再生成してみてください。
それでもうまくいかない場合は、広告/トラッキングブロッカーをオフにしてみてください。
参考英語サイト
https://manual.bubble.io/help-guides/building-a-user-interface/importing-from-figma
