宮崎翼 
ノーコード開発の世界は日々進化していて、新しいツールや機能が登場するたびにワクワクしますね。特に、デザインと開発の連携は、多くの開発者にとって重要なテーマではないでしょうか。
今回は、デザインツールとして人気のFigmaから、ノーコードの代表格であるBubbleへデザインを変換する公式機能が登場したので、早速レビューしてみたいと思います！「デザインデータをそのままアプリにできたら最高！」と考えている方、必見です。
全体的に、Bubbleの画面からコピペでサクサクとFigmaのコンポーネントを貼り付けていくイメージです
待望の公式機能！でも実は…
これまでも、FigmaからBubbleへデザインを変換するサードパーティ製のツールは存在しました。しかし、今回ご紹介するのは、 deezign_ioというサービスを買収し、公式機能としてリリースしたものです。
これにより、これまで有料だった機能がBubbleの標準機能として無料で使えるようになりました！
Bubble自体も無料プランから始められるので、誰でも気軽に試せるのは大きなメリットですね。
ただし、注意点として、これはあくまでBubble側の機能であり、Figmaの公式機能ではないという点は押さえておきましょう。
変換の3ステップはとてもシンプル
公式ページにも記載がありますが、変換手順は驚くほど簡単です。
1.Figmaプラグインの準備
FigmaでBubbleのプラグインをインストール、つぎにBubbleから発行されるアクセストークンを貼り付けます。
アクセストークンも、公式ページから取得が可能です。
2.Figmaで要素を変換
プラグインを使って、Figma上のデザイン要素（ボタン、入力フォームなど）に「これはBubbleのボタンです」といった具合にタグを付けていきます。
3.Bubbleへ貼り付け
Chromeの拡張機能を経由して、変換したデザインをBubbleのエディタにコピー＆ペーストします。
これだけで、FigmaのデザインがBubbleの要素として再現される、という仕組みです。
【本音レビュー】で、実際の変換精度は？
手順が簡単なのは嬉しいですが、一番気になるのは「どれくらい正確に変換されるのか？」という点ですよね。
私ツバサが実際にいくつかのデザインで試してみた率直な感想としては、「完璧な変換は期待しすぎない方が良い」というのが現状です。
もちろん、きれいに変換される部分もありますが、デザインによっては再現度が30%程度に感じられるものも少なくありませんでした。特に、要素間のマージンや複雑なレイアウトが崩れてしまうケースが見受けられます。
「Figmaのデザインをワンクリックでそのままアプリに！」という魔法のような機能を期待していると、少しがっかりしてしまうかもしれません。
Convert率が30%くらいの低いものは、レイアウトも結構崩れるものもある。
変換精度を上げるための重要なポイント
では、この機能をうまく使いこなすことはできないのでしょうか？
いえ、そんなことはありません。いくつかのポイントを押さえることで、変換の精度を大きく向上させることが可能です。
その最大のコツが、Figmaで「オートレイアウト」をしっかり使うことです。
オートレイアウトは、要素間の距離や配置をルール化して、レスポンシブなデザインを作るためのFigmaの機能です。Bubbleもレスポンシブデザインの考え方が基本なので、オートレイアウトで組まれたデザインは、Bubble側でも構造を理解しやすく、結果としてきれいに変換される傾向にあります。
逆に、ピクセル単位で要素を自由に配置した「固定レイアウト」のデザインは、変換がうまくいかないことが多いようです。
なので、最初から、オートレイアウトで組んだデザインテンプレートやFigmaAIで作成できているものがあると、パーフェクトに変換できるものがあるかもしれません。
その他、公式が推奨するベストプラクティスとしては、
- ページ全体を一度に変換せず、セクションや要素ごとに少しずつ変換する
- 変換がうまくいかない要素は、無理に変換しようとせず削除してBubbleで再作成する
- 色のスタイルなどは自動で作成されないため、手動で設定し直す
といった点が挙げられています。
まとめ：開発の「初速」を上げるための強力なサポートツール
今回ご紹介した「FigmaからBubbleへの変換機能」は、現行100%変換はおそらくできないです。
しかし、その特性を理解し、うまく付き合うことで、開発プロセスを大幅に効率化できる可能性を秘めています。
- メリット
- 無料で利用できる
- Figmaでのデザイン作業を活かせる
- 注意点
- 変換精度は完璧ではなく、手動での修正が必須
- Figma側で「オートレイアウト」を使いFigma ページ全体を一度にコピーするのではなく、要素ごとにコピーするようにしてください。
個人的には、「ゼロから組み立てる手間を省き、開発の初速を上げるためのサポートツール」として捉えるのが良いと感じています。デザインの骨格を素早くBubbleに持っていき、そこから手作業でディテールを調整していく、という使い方ですね。
まだ公式としては、始まったばかりの機能なので、今後のBubbleチームのアップデートでさらに精度が向上していくことにも期待したいです。
デザインと開発の境界線を、また一つ越えられるかもしれません。
