Bubbleのテンプレートの使い方&(ベータ版)Figmaからのインポート(取り込み)

ノーコードでWebアプリ作成 ~Bubble編~|濱口 まさみつ|note

みなさんこんにちは。外は寒空が続いていますが、いかがお過ごしでしょうか。本日はノーコードツールbubbleのテンプレートの使い方と(ベータ版)Figmaからのインポートを解説します。テンプレートの使い方を前半で、(ベータ版)Figmaからのインポートを後半で説明します。早速天応レートの使い方からレッツゴー!

テンプレートを使う

テンプレートを使ってアプリを作成する

テンプレートを購入またはアカウントに追加すると、新規アプリのポップアップにドロップダウンが表示され、新規アプリのベースとなるテンプレートを選択することができます。これは、新しいアプリを作成するときにのみ実行できます。テンプレートはアプリのテーマではなく、あらかじめ構築された要素とワークフローのセットです。他のアプリを修正するのと同じように、テンプレートを修正することができます。

テンプレートを見直す

テンプレートを使ってアプリを作成すると、編集(またはテンプレートページ内)でテンプレートを確認することができます。また、テンプレートの所有者に自分のメールを公開することができるようになるので、質問と回答が必要な場合に便利です。

レビューを残すには、テンプレートタブに移動します。

規則とライセンス

規則とライセンスに関わるドキュメントはこちらをご確認ください。

https://bubble.io/marketplace-policies

 

以上、ここまでがノーコードツールbubble内でのテンプレートの使い方の説明でした。テンプレート自体はレターや年賀状を作る際にも使用することが多いので、馴染みがあったかもしれませんね。もちろんご自身でテンプレートを編集することも可能です。ここからは(ベータ版)Figmaからのインポートを説明します。

Figmaからのインポート

現在オープンベータ中の機能

この機能は、Figma デザインを bubble アプリにインポートします。2 つのプラットフォームの違いにより、インポートは 100% 完璧に行うことができるわけではありませんが、bubbleでアプリを開発する上で大きな前進を得ることができるはずです。

Figmaファイルのインポート方法

[設定] > [全般] に移動し、[デザインのインポート] セクションにスクロールダウンします。Figma API キーは、Figma アカウントの設定で見つけることができます。Figma ダッシュボード・ページで、左上の自分の名前をクリックし、「新しいパーソナル・アクセストークンを作成する」をクリックします。Figma でファイルを開いたときの URL を見れば、Figma のファイル ID がわかります。 URL は、figma.com/file/{ランダムな文字と文字}、または figma.com/file/{ランダムな文字と文字}/[もう少し読みやすい名前] という形式になっている必要があります; ファイル ID は {ランダムな文字と文字} です。 インポートをクリックするとインポートが開始されますが、大きなFigmaファイルの場合は数分かかる場合があります。

インポートの仕組み

Figma ファイルのすべてのページのトップレベルのフレームは、bubbleアプリの新しいページとしてインポートされます。Figma の不可視項目(レイヤーサイドバーで不可視にしたもの)はインポートされません。bubble は、できるだけ多くの要素を Figma からインポートし、Figma の要素を最も近い種類の bubble 要素にマッピングします。bubble は、Figma でグループ化された要素からグループを作成します。Figma の要素の名前は bubble にも引き継がれます(インポートされた名前には文字数制限があり、bubble は名前の重複を避けます)。 bubble は、Figma のスタイルに合わせてスタイルを作成しようとしますが、より複雑な状況(例えば、1 つのテキストに複数のスタイルが含まれている)においては、適用するスタイルを仮定したり、リッチ・テキスト・マークアップ(bbcode)を使用してテキストを作成したりすることがあります。 Figma 内の任意の種類のベクトルは、アプリ内の画像としてインポートされます。 Figma 内のベクトルのみを含むグループは、全体の画像としてインポートされます(サブグループを持っていても、それ自体がベクトルのみを持っていても、このルールは適用されません)。画像はFigmaのサーバーにアップロードされた画像をソースにしています。つまり画像が自動的にBubbleアプリにアップロードされることはありません。bubbleは、Figma内において繰り返し実行されているグループについての推測を行いません。形やフレームに不可視の塗りつぶしがある場合、それはBubble内においては透明な塗りつぶしとして表現されます。また、非常に大きく複雑な Figma ファイルをインポートしようとすると、インポートがタイムアウトする場合があることにも注意してください(これもコンピュータのリソースに依存します)。この制限にぶつかった場合は、 Figma ファイルをより小さなファイルに分割して、個別にインポートしてみてください。  

既知の制限事項

Figmaからbubbleへインポートすることは一方通行の一回限りのインポートであり、bubbleページとFigmaフレームの間のリンクは維持されません。再度インポートを開始すると、トップレベルのFigmaフレームごとに新しいbubbleページが作成されます。Figma ではテキスト・ボックスの周りの制約が厳しくなるため、bubble はテキスト要素の高さと幅を追加して Figma デザインに近づけます。

インポートしようとしたときに「ネットワークエラー」が発生した場合。

・まず、お使いの広告ブロック/アンチトラッキング・ソフトウェアを確認してください。

・少し時間をおいてからトライし直してください。もし、このような現象が常に発生している場合は、バグとして報告してください。

Figma では可能、bubble では不可能なスタイリングはインポートされません。

しかし、複雑なスタイリングを実装するための回避策は通常存在します。

・テキストの下の垂直方向の配置がありません。

・要素ごとに1つの影を持つことができます。

・グラデーションの最大3色まで可能です。

・同時に複数の塗りつぶしをサポートしていません。bubbleは物体の最初の塗りつぶしだけをとります。

・0px の丸みを帯びたボーダーは上書きされます。

他のまだ引き継いでいないスタイリングプロパティは将来のリリースで実現する可能性アリ。

・要素の両側で異なる境界線のスタイリングを持っている状態。

・上または左に向かってフレームから外れていく要素。

Figmaファイルを設定するためのヒント

この機能は、Figma ファイル内のすべてのフレームをインポートするので、指定したページのバリエーションが多数ある非常に大きな Figma ファイルがある場合は、フレームのサブセットを新しいファイルにコピーしてインポートで使用することができます。トップレベルのフレームはすべて新しいページとしてインポートされ、インポートは 1 回限りであることを覚えておいてください。Figma でbubbleページをいくつかの塊でデザインし、定期的にインポートして新しい塊をbubbleに取り込むことを検討してみてはいかがでしょうか。bubbleアプリケーションを構築している間に、簡単にコピー/ペーストできるように、フレームに一括りにされているすべてのFigmaファイルからコンポーネントをインポートして実験してみてください。 マスクした(変装要素を加えた)要素をインポートしたい場合は、マスクされた要素のみを含むグループ(フレームではなく)を作成します。グループ内の要素がマスクされているかどうかを確認するために、グループを見てみます。画像のインポートで問題が発生した場合は、フレーム上の画像の塗りつぶしではなく、画像オブジェクトを使用していることを確認してください。現在のところ、bubbleがサポートしているのは画像オブジェクトのみです(つまり、Figma上で「画像を配置」をクリックしたときに表示されるモノのみ)で、必要に応じて他のオブジェクトでマスクする(変装を加えてインポート)ことができます。背景の塗りつぶしのインポートで問題が発生している場合: フレームがページとしてインポートされている場合、現在、そのページの塗りつぶしはサポートされていません。 オブジェクトや内側のフレームなどで塗りつぶしが表示されない場合は、 複数の塗りつぶしがないか確認してください。bubbleはどの要素に対しても1つの塗りつぶししかサポートしていないので、1つの塗りつぶししか選択できません。 

トラブル解決

ネットワーク・エラーが発生したり、Bubbleがあなたの API キーとファイル ID を有効と認めない場合は、まず Figma アカウントで新しい API キーを再生成してみてください。それでもうまくいかない場合は、アクティブになっている広告/トラッキング・ブロッカーをオフにしてみてください。

まとめ

いかがだったでしょうか。今回の記事では、ノーコードツールbubble内のテンプレートの使い方と(ベータ版)Figmaからのインポート(取り込み)を解説しました。特にFigmaからのインポート(取り込み)には多くのルールが存在しており、複雑です。画像の取り込みや複数の塗りつぶしには注意してください。bubbleでは一つの塗りつぶしにのみサポートがききます。Figmaからインポートする際には細心の注意を払って、じっくりと時間をかけて行うと良さげですね。

 

 

 

 

 

 

 

Katsu

Katsu

高校まで日本で育ち、大学からアメリカ・ニューヨークへ。マスメディア、ジャーナリズム、インターネットメディア戦略を専門に修学。コロナ禍でオンライン主体になりつつある世の中で、記事が何かの手助けになれば幸いです。







関連記事

  1. tribe

    Tribe

  2. 記事作成

    Bubble・OneSignalでウェブに通知をつける、AirTable(エアテーブル)

  3. 記事作成

    Bubbleの重要なコンセプト

  4. 記事作成

    Bubbleのデータ読み込みとプラグインの公開・バージョニングを解説!

  5. 記事作成

    BubbleのSlugと再利用可能な要素について解明してみた!!

  6. topimage

    bubbleとAdalo徹底比較!Webサービスやネイティブアプリを簡単に作れるおすすめノーコードツ…

  7. 記事作成

    【マーケティング会社必見】LP制作ツール「Unbounce」を徹底解説!

  8. 記事作成

    Bubbleのパスワードポリシーとビジュアル設定を深堀りしてみた!!

  9. 記事作成

    Bubble・API使用ケース&APIを使う

人気記事

  1. topimage
  2. 記事画像
  3. top_image
  4. 特集記事

おすすめ記事一覧

  1. 記事画像
  2. 記事画像
  3. top_image
  4. 記事画像
  5. Productivity
PAGE TOP