関連のツールの紹介、使い方などをやさしく説明しています。さんからご寄稿いただきました。補足事項インポートはどのように機能するか現行仕様での制約に関してFigmaファイルを設定するためのヒントおわりにはじめに2020年6月20日にBubbleから発表されたβ版機能「Figmaインポート」の使い方についての特集記事です。https://forum.bubble.io/t/beta-announcement-import-from-figma/97997FigmaとはFigmaはWebサービスのUIデザインやプロトタイピングを行うためのツールです。XDやSketchなど他にも優秀なツールがありますが、FigmaはWebブラウザ上で使えて無料枠でも機能が充実しているので、誰にでも手軽に使えるという点で優れています。デザインツールに触れたことがない、これからデザインにチャレンジしたい、という方には最高のツールです。←NEW!など、この手のツールで必要な機能は揃っていますが、特にチームで何かを作る際は手軽さの面で圧倒的にFigmaですね。ノーコードツールとの連携までできるようになったので無双化が進んでる印象です。XDは今のところ表のクリエイティブに特化しているようで、実装側に踏み込む予定は無いようです。ノーコーダーのデザインツールはFigma一択ですね。実用例Webに制作例が載っていたりするので、他の人の制作物を見ながら学ぶと早く上達できます。制作例:https://www.figma.com/proto/jnVOYln5pumAQOkpL2nBT7/Untitled?node-id=351%3A174&scaling=scale-downこのワイヤーフレーム(以下、見本)は約1時間ほどで作成しました。Figmaはこのようなワイヤーフレームや、UIを構成する画面・部品を作成することができます。フューチャー技術ブログまた、クックパッドさんではデザイナーに限らずFigmaを使ってディスカッションと開発を並行して行っているそうです。グラフィックレコーディングという分野がありますが、Figma上だと視覚的に議論が行えるのも便利ですね。クックパッド開発者ブログ例えば他のノーコーダーさんと一緒に開発するとき、Figma上で作りながらワイワイ議論をするのも楽しいかも。今度そういうイベントやってみたいですね。Bubbleにインポートするそれでは、Figmaインポート機能を使ってみましょう。使い方Figma側での準備まずFigmaのサイトにアクセスします。www.figma.com会員登録をしましょう。later」でスキップして大丈夫です。右上のアイコンマークを押しましょう。Figmaを選んでみましょう。こんな画面が出てきます。Figmaを使うとこういうものが作れちゃいます。この時点で、URLを見てみてください。コピーしてメモなどに貼り付けておきましょう。後でBubbleに貼って使います。次に、左上のハンバーガーメニューをクリックしましょう。Settingを選びます。token」をクリックトークンの説明を打ち込みましょう。Bubble」などを入力してエンターを押せばOKです。すると、このような黄色い表示が出てきます。この時点でコピーしてメモなどに貼り付けておきましょう。後でBubbleに貼って使います。これでFigma側での準備は完了です。次はBubble側での準備をしましょう。新しく作成したアプリで「Setteings」→「General」を選び、一番下までスクロールします。IDに、先ほどメモしておいた数字とアルファベットの羅列をそのままペーストします。Bubble側での準備はこれだけです。インポートの実行それではいよいよインポートです。IDの右側に「Import」というボタンがあります。これをクリックしてみましょう。できました!Figmaで見ていたデザインが、そのままBubbleに反映されていますね。このように、FigmaのデザインデータをBubble側へ簡単にインポートできるようになりました。これが新機能「Figmaインポート」です。2020年6月23日Bubbleはできることの幅が非常に広いのが特徴です。開発スピードを速くしてくれたり、テンプレートが豊富だったりするのが特徴です。Bubbleの意外な弱点この「できることの幅が広い」というのがそのままBubbleの弱点となります。長所と短所が表裏一体なわけですね。なんかムカつくんでノーコードツールのbubbleでWEBアプリ作ろうとしたら、ディスプレイに広がる白紙の海に何を描けばいいかわからず結果なにもできなかった。事前に作っておかないと何もできないんだなということがわかってよかった。2020年6月24日Figmaの活用方法こう考えるとFigmaと連携できるようになったことの新しい意味が見えてきますね。ノーコードデザイナーの私としてはFigmaをデザインツールとして使ってそのままBubbleに取り入れるにはまだ機能不十分です。それよりも、Figmaを「Bubbleに制約を与えられるツール」として使うと非常に強力にワークします。ここからはその視点での「Figmaインポート」の応用方法をご紹介します。Figmaテンプレートを入手www.flying-h.co.jpwebdesign-trends.netwww.pinterest.jpFigmaには既にUIのテンプレートや参考事例が大量に存在します。現在作っているサービスに取り入れられそうなデザインデータを入手しましょう。インポートの実施これは前半で説明した作業内容通りです。この際、入手したデータをそのままBubbleにインポートするのではなく、一旦Figmaで自分の作りたいサービスのイメージを完成させた上でインポートすることをお勧めします。Bubbleで作ると実装のしやすさが第一優先になってしまい、ユーザーはどんな使い方をするかなということを想像しながら手を動かすハードルが高くなってしまうからです。UI/UXデザインで有名な会社に、2020年6月30日に上場したGoodpatchという会社がありますが、そこの記事が参考になるので是非お読みください。Bubbleに適応させるさて、ここからFigmaインポート後のBubble適応について説明します。Figmaインポートでは現状いくつかの機能が使えない状態です。Groupとして認識してくれたりはしません。インポート後のデータの中身を分解しながら置き換えをしていく必要があります。分解はページの構造を見ることで可能です。Treeを見てみましょう。Hidebleにチェックが入っています。Tree上に並べておきますという意味です。このチェックを外すことで、ページ内の全ての要素をTree状に把握することができるようになります。Figmaからデータをインポートすると、要素がグループ化されているのに要素よりもグループの縦横サイズが小さいためサイズ変更できないなどの不具合があるため、Treeを見ながら分解していく必要があります。補足事項Figmaインポートの方法はここまでの説明で充分かと思いますが、進めていくうちに細かく拘りたいけれど何故かできないという部分が出てくるかと思います。引っ張ってきましたので、併せて参考にしてください。ファイルの全ページの最上位フレームが、Bubbleアプリの新しいページとしてインポートされます。不可視項目(レイヤーサイドバーで不可視にしたもの)はインポートされません。インポートしようとします。グループ化された要素からグループを作成します。重複した名前を避けます)。つのテキストに複数のスタイルが含まれている)では、適用するスタイルを仮定したり、リッチ・テキスト・マークアップ(bbcode)を使用してテキストを作成したりすることがあります。Figmaのベクターは、アプリ内で画像としてインポートされます。ベクターのみを含むFigmaのグループは、画像全体としてインポートされます(サブグループを持っている場合は、それらがベクターのみの場合でもこのルールは適用されません)。画像はFigmaのサーバーにアップロードされた画像をソースにします。画像は自動的にBubbleアプリにアップロードされません。Groupか否かは認識されません。シェイプやフレームに不可視の塗りつぶしがある場合は、透明な塗りつぶしとして扱われます。現行仕様での制約に関してこれは一方通行の一回限りのインポートであり、BubbleページとFigmaフレームの間のリンクは維持されません。再度インポートを開始すると、最上位のFigmaフレームごとに新しいBubbleページが作成されます。インポートしようとしたときに「ネットワークエラー」が発生した場合は、まず、お使いの広告ブロッカーやアンチトラッキングソフトを確認してください。それらがFigmaのAPIをブロックすることがあります。このような現象が常に発生している場合は、バグとして報告してください。Figmaのデザインに近づけています。Figmaでは可能でもBubbleで不可能なスタイリングはインポートされません。複雑なスタイリングを実装するための回避策は通常存在しますが、これらが含まれています。(テキストの垂直方向下側への配置はできません。要素ごとに持てる影は1つだけです。グラデーションは最大3色までです。同時に複数の塗りつぶしを行うのはサポートしていません。バブルはオブジェクトの最初の塗りつぶしだけを取ります。丸みを帯びたボーダーは上書きされます。)他にも、まだ引き継いでいないスタイリングプロパティがいくつかありますが、これは将来のリリースで実現する可能性があります。ファイルがある場合は、フレームのサブセットを新しいファイルにコピーしてインポートで使用することができます。回限りであることを覚えておいてください。バブル・ページをチャンク単位でデザインし、定期的にインポートして新しいチャンクをバブルに取り込むことを検討するとよいでしょう。モバイルページを作成し、アプリケーションに直接追加するための素晴らしい方法です。ファイルからすべてのコンポーネントをフレームにバンドルしてインポートしてみてください。ストロークとしての要素をアウトライン化しても問題ありません。これらは正常に転送されます。マスクされた要素をインポートしたい場合は、マスクされた要素のみを含むグループ(フレームではなく)を作成します。マスクされた要素が見つかった場合、グループ全体が画像としてインポートされます。画像のインポートに問題がある場合は、フレーム上の画像の塗りつぶしではなく、画像オブジェクトを使用していることを確認してください。現在、サポートしているのは画像オブジェクトのみです(Figma上で「画像を配置する」をクリックした場合)、そして必要に応じて他のオブジェクトでマスクすることができます。フレームをページとしてインポートする場合、現在、そのページの塗りつぶしはサポートされていません。オブジェクトや内側のフレームなどで塗りつぶしが表示されない場合は、複数の塗りつぶしがないか確認してください。Bubbleはどの要素に対しても1つの塗りつぶししかサポートしていないので、1つの塗りつぶししか選択できません。おわりにここまでFigmaインポートを体験して頂き、Bubbleの更なる可能性を感じることができたのではないでしょうか。ノーコード界隈では日々様々なツールが出ていますが、ここで私の好きな言葉を載せておきます。Lee「1万回のキックを1度だけ練習したものを恐れないが、ひとつのキックを1万回練習したものを恐れる」(ブルース・リー)様々なツールに学習コストを分散させてバランスを取るという方法もありますが、まずは1つツールに注力し、ノーコードの中に自分の軸を作るという手もあります。今のノーコード業界の中で1つに絞るとしたら間違いなくBubbleでしょう。日本のノーコード業界でBubbleと言えば間違いなくノーコードラボさんです。今後もブログで様々な情報が発信されていきますので、お見逃しなく。あと宣伝ですが、ノーコードに加えてデザインにも力を入れたい人向けにはタツヤ@ノーコードデザイナーから情報発信しています。個別指導などを行っています。)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。