ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Bubble の Figma からのインポート機能の使い方

f:id:toka-xel:20200719173723p:plain

本記事は タツヤ@ノーコードデザイナー さんからご寄稿いただきました。
タツヤ@ノーコードデザイナー さん、ありがとうございました!

はじめに

2020年6月20日にBubbleから発表されたβ版機能「Figmaインポート」の使い方についての特集記事です。
URL: https://forum.bubble.io/t/beta-announcement-import-from-figma/97997

Figmaとは

FigmaはWebサービスのUIデザインやプロトタイピングを行うためのツールです。この手のツールにはAdobe XDやSketchなど他にも優秀なツールがありますが、FigmaはWebブラウザ上で使えて無料枠でも機能が充実しているので、誰にでも手軽に使えるという点で優れています。
まだデザインツールに触れたことがない、これからデザインにチャレンジしたい、という方には最高のツールです。

参考記事:デザインコラボプラットフォームのFigmaが約53億円調達、新型コロナ禍でも需要増 | TechCrunch Japan

f:id:toka-xel:20200719165356p:plain

Figmaでできること

  • UIデザイン
  • プロトタイピング
  • チーム内やクライアントとの共有
  • データのエクスポート
  • Bubbleとの連携 ←NEW!

など、この手のツールで必要な機能は揃っていますが、特にチームで何かを作る際は手軽さの面で圧倒的にFigmaですね。
しかもノーコードツールとの連携までできるようになったので無双化が進んでる印象です。
ちなみにAdobe XDは今のところ表のクリエイティブに特化しているようで、実装側に踏み込む予定は無いようです。
ノーコーダーのデザインツールはFigma一択ですね。

実用例

Webに制作例が載っていたりするので、他の人の制作物を見ながら学ぶと早く上達できます。

制作例:https://www.figma.com/proto/jnVOYln5pumAQOkpL2nBT7/Untitled?node-id=351%3A174&scaling=scale-down

このワイヤーフレーム(以下、見本)は約1時間ほどで作成しました。Figmaはこのようなワイヤーフレームや、UIを構成する画面・部品を作成することができます。

f:id:toka-xel:20200719165401p:plain

出典:【Figma】を使ってチームでUI/UX設計するといいこと | フューチャー技術ブログ

また、クックパッドさんではデザイナーに限らずFigmaを使ってディスカッションと開発を並行して行っているそうです。グラフィックレコーディングという分野がありますが、Figma上だと視覚的に議論が行えるのも便利ですね。

f:id:toka-xel:20200719165409p:plain

参考記事:クックパッドデザイナーが語る、新規サービス開発を加速させるためにやったこと––技術を使ってエンジニアをサポートする - ログミーTech

参考記事:SketchからFigmaに移行してチーム間でのコミュニケーションがしやすくなりました - クックパッド開発者ブログ

例えば他のノーコーダーさんと一緒に開発するとき、Figma上で作りながらワイワイ議論をするのも楽しいかも。今度そういうイベントやってみたいですね。

Bubbleにインポートする

それでは、Figmaインポート機能を使ってみましょう。

使い方

Figma側での準備

まずFigmaのサイトにアクセスします。

www.figma.com

会員登録をしましょう。

f:id:toka-xel:20200719165415p:plain f:id:toka-xel:20200719165421p:plain f:id:toka-xel:20200719165426p:plain f:id:toka-xel:20200719165432p:plain f:id:toka-xel:20200719165439p:plain

このチーム名は「Do this later」でスキップして大丈夫です。
右上のアイコンマークを押しましょう。

f:id:toka-xel:20200719165447p:plain

今回はPrototyping in Figmaを選んでみましょう。

f:id:toka-xel:20200719165451p:plain

こんな画面が出てきます。Figmaを使うとこういうものが作れちゃいます。

f:id:toka-xel:20200719165457p:plain

この時点で、URLを見てみてください。一部ボカしてあるところがありますが、ここにある数字とアルファベットの羅列が「Figma File ID」です。コピーしてメモなどに貼り付けておきましょう。後でBubbleに貼って使います。

f:id:toka-xel:20200719165502p:plain

次に、左上のハンバーガーメニューをクリックしましょう。
下の方にあるHelp and Accountから、Account Settingを選びます。

f:id:toka-xel:20200719165506p:plain

Account画面が出てくるので、Personal Access Tokensのところにある「+Create a new personal access token」をクリック

f:id:toka-xel:20200719165511p:plain

トークンの説明を打ち込みましょう。例えば「For testing Bubble」などを入力してエンターを押せばOKです。

f:id:toka-xel:20200719165522p:plain

すると、このような黄色い表示が出てきます。この画面でボカしてあるところにある数字とアルファベットの羅列が「API Key」です。必ずこの時点でコピーしてメモなどに貼り付けておきましょう。後でBubbleに貼って使います。

f:id:toka-xel:20200719165532p:plain

これでFigma側での準備は完了です。

Bubble側での準備

次はBubble側での準備をしましょう。
新しく作成したアプリで「Setteings」→「General」を選び、一番下までスクロールします。すると、「Design Import [Beta]」という新しい欄が増えています!

f:id:toka-xel:20200719165538p:plain

ここのAPI KeyとFigma File IDに、先ほどメモしておいた数字とアルファベットの羅列をそのままペーストします。

f:id:toka-xel:20200719165544p:plain

Bubble側での準備はこれだけです。

インポートの実行

それではいよいよインポートです。
先ほどの画面のAPI KeyとFigma File IDの右側に「Import」というボタンがあります。
これをクリックしてみましょう。

f:id:toka-xel:20200719165549p:plain

しばらく時間が掛かります。
できました!Figmaで見ていたデザインが、そのままBubbleに反映されていますね。

f:id:toka-xel:20200719165557p:plain

このように、FigmaのデザインデータをBubble側へ簡単にインポートできるようになりました。
これが新機能「Figmaインポート」です。

この機能は何が革新的なのか

ノーコードツール界でのBubbleの立ち位置

今やノーコード戦国時代のような状況ですが、そもそもBubbleはどういった立ち位置なのでしょうか?

Bubbleはできることの幅が非常に広いのが特徴です。
一方で他のノーコードツールは特定の分野に特化することで、 開発スピードを速くしてくれたり、テンプレートが豊富だったりするのが特徴です。

Bubbleの意外な弱点

この「できることの幅が広い」というのがそのままBubbleの弱点となります。
長所と短所が表裏一体なわけですね。

Figmaの活用方法

こう考えるとFigmaと連携できるようになったことの新しい意味が見えてきますね。
ノーコードデザイナーの私としてはFigmaをデザインツールとして使ってそのままBubbleに取り入れるにはまだ機能不十分です。それよりも、Figmaを「Bubbleに制約を与えられるツール」として使うと非常に強力にワークします。

f:id:toka-xel:20200719165553p:plain

ここからはその視点での「Figmaインポート」の応用方法をご紹介します。

Step1 Figmaテンプレートを入手

www.flying-h.co.jp

webdesign-trends.net

www.pinterest.jp

Figmaには既にUIのテンプレートや参考事例が大量に存在します。現在作っているサービスに取り入れられそうなデザインデータを入手しましょう。

Step2 インポートの実施

これは前半で説明した作業内容通りです。
この際、入手したデータをそのままBubbleにインポートするのではなく、一旦Figmaで自分の作りたいサービスのイメージを完成させた上でインポートすることをお勧めします。何故ならいきなりBubbleで作ると実装のしやすさが第一優先になってしまい、ユーザーはどんな使い方をするかなということを想像しながら手を動かすハードルが高くなってしまうからです。
UI/UXデザインで有名な会社に、2020年6月30日に上場したGoodpatchという会社がありますが、そこの記事が参考になるので是非お読みください。

goodpatch.com

Step3 Bubbleに適応させる

さて、ここからFigmaインポート後のBubble適応について説明します。
Figmaインポートでは現状いくつかの機能が使えない状態です。
例えば繰り返しの要素があっても、Bubble側で自動的にRepeating Groupとして認識してくれたりはしません。ですのでインポート後のデータの中身を分解しながら置き換えをしていく必要があります。

分解のやり方

分解はページの構造を見ることで可能です。
まず左側のメニューにあるElements Treeを見てみましょう。初期状態ではここのOnly Show Hidebleにチェックが入っています。これは、表示を消しているものだけElements Tree上に並べておきますという意味です。このチェックを外すことで、ページ内の全ての要素をTree状に把握することができるようになります。

f:id:toka-xel:20200719165605p:plain f:id:toka-xel:20200719165611p:plainf:id:toka-xel:20200719165557p:plain

Figmaからデータをインポートすると、要素がグループ化されているのに要素よりもグループの縦横サイズが小さいためサイズ変更できないなどの不具合があるため、Treeを見ながら分解していく必要があります。

補足事項

Figmaインポートの方法はここまでの説明で充分かと思いますが、進めていくうちに細かく拘りたいけれど何故かできないという部分が出てくるかと思います。 Bubbleから発信されている補足事項をドキュメント から引っ張ってきましたので、併せて参考にしてください。

インポートはどのように機能するか

  • Figma ファイルの全ページの最上位フレームが、Bubbleアプリの新しいページとしてインポートされます。
  • Figma の不可視項目(レイヤーサイドバーで不可視にしたもの)はインポートされません。
  • Bubble は、Figma 要素を最も近い種類の Bubble 要素にマッピングして、できるだけ多くのものを Figma からインポートしようとします。
  • Bubbleは、Figma でグループ化された要素からグループを作成します。
  • Figma の要素の名前は Bubble にも引き継がれます(インポートされた名前には文字数制限があり、Bubble は重複した名前を避けます)。
  • Bubble は、Figma のスタイルに合わせてスタイルを作成しようとしますが、より複雑な状況(例えば、1 つのテキストに複数のスタイルが含まれている)では、適用するスタイルを仮定したり、リッチ・テキスト・マークアップ(bbcode)を使用してテキストを作成したりすることがあります。
  • Figmaのベクターは、アプリ内で画像としてインポートされます。
  • ベクターのみを含むFigmaのグループは、画像全体としてインポートされます(サブグループを持っている場合は、それらがベクターのみの場合でもこのルールは適用されません)。
  • 画像はFigmaのサーバーにアップロードされた画像をソースにします。つまり、画像は自動的にBubbleアプリにアップロードされません。
  • 対象のオブジェクトがRepeating Groupか否かは認識されません。
  • シェイプやフレームに不可視の塗りつぶしがある場合は、透明な塗りつぶしとして扱われます。

現行仕様での制約に関して

  • これは一方通行の一回限りのインポートであり、BubbleページとFigmaフレームの間のリンクは維持されません。再度インポートを開始すると、最上位のFigmaフレームごとに新しいBubbleページが作成されます。
  • インポートしようとしたときに「ネットワークエラー」が発生した場合は、まず、お使いの広告ブロッカーやアンチトラッキングソフトを確認してください。それらがFigmaのAPIをブロックすることがあります。もし、このような現象が常に発生している場合は、バグとして報告してください。
  • Figma ではテキスト・ボックスの周りの制約が厳しくなるため、Bubbleではテキスト要素の高さと幅を追加して Figmaのデザインに近づけています。
  • Figmaでは可能でもBubbleで不可能なスタイリングはインポートされません。複雑なスタイリングを実装するための回避策は通常存在しますが、これらが含まれています。(テキストの垂直方向下側への配置はできません 。要素ごとに持てる影は1つだけです。グラデーションは最大3色までです。同時に複数の塗りつぶしを行うのはサポートしていません。バブルはオブジェクトの最初の塗りつぶしだけを取ります。0px の丸みを帯びたボーダーは上書きされます。)
  • 他にも、まだ引き継いでいないスタイリングプロパティがいくつかありますが、これは将来のリリースで実現する可能性があります。(要素の両側で異なる境界線のスタイリングを持つ、上または左に向かってフレームから外れる要素…)

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

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

おわりに

ここまでFigmaインポートを体験して頂き、Bubbleの更なる可能性を感じることができたのではないでしょうか。
ノーコード界隈では日々様々なツールが出ていますが、ここで私の好きな言葉を載せておきます。

“I fear not the man who has practiced 10.000 kicks once, but I fear the man who has practiced one kick 10,000 times.” -Bruce Lee
「1万回のキックを1度だけ練習したものを恐れないが、ひとつのキックを1万回練習したものを恐れる」(ブルース・リー)

f:id:toka-xel:20200719165616j:plain

様々なツールに学習コストを分散させてバランスを取るという方法もありますが、まずは1つツールに注力し、ノーコードの中に自分の軸を作るという手もあります。

もし今のノーコード業界の中で1つに絞るとしたら間違いなくBubbleでしょう。
そして、日本のノーコード業界でBubbleと言えば間違いなくノーコードラボさんです。今後もブログで様々な情報が発信されていきますので、お見逃しなく。

あと宣伝ですが、ノーコードに加えてデザインにも力を入れたい人向けにはタツヤ@ノーコードデザイナーから情報発信しています。デザインに興味ある方は是非フォローよろしくお願いします笑

またねー!