FigmaファイルのBubbleへのインポートについて

こちらの投稿を拝見しながら、Figmaのファイルをインポートして活用しようと考えているのですが、
・インポートできる回数は1回だけである
・Repeating Groupが反映されない
・アイコンも必ずしもインポートされない
などの状況を考えるとあまりうまく使いこなせていない状況にあります。

Figma利用をしている皆さんはどのような形でインポート機能を利用していらっしゃるでしょうか?

(現状では、各パーツやRepeating Groupを使わないページはインポートしつつ、その後はBubbleで編集するのが良いのかなと感じています。)

「いいね!」 2

僕はUIkitを利用してbubbleにインポートしたことはありませんが、あまりうまくいかないと聞くことが多いです。

恐らくrintaroさんが質問文に書かれているようなことが多発するのだと思います。

Figmaからbubbleに起こすのは、kitなどは使わず、普通にFigmaを見ながらbubbleで構築していくのが一番確実です。

レスポンシブや様々なデータとの整合性、条件分岐なども考えていかないといけないので、kitを使わずに構築する方がシステムの最適化にもつながり、最終的にトータルの制作コストは低くなります。(単純なモックアップであれば、kitの使用はありだと思います。)

Figmaにはピクセル単位でガイドが表示され、右側のサイドバーでそのエレメントのCSSを参照できます。これに合わせてbubbleで構築してきます。

アイコンなどは、FigmaからSVGなどでエクスポートし、bubbleに反映させます。

2021-12-11_14h25_42

SVGでも、たまに画像サイズが大きくなることがあるので、僕は毎回サイズを圧縮しています。

圧縮にはこちらのサイトがオススメです。ドラッグ&ドロップで一発圧縮できます。

「いいね!」 3

@rintaro.ishii0719 rintaro

Figmaからbubbleに起こすのは、kitなどは使わず、普通にFigmaを見ながらbubbleで構築していくのが一番確実です。

たしかに、直接Bubble構築している人が多い印象あります。

「いいね!」 1

@Aki_Sydney
ご回答いただき、誠にありがとうございます!
やはりデザインをFigmaで作るのは行いつつも、実際のBubbleでの実装は直接Bubbleで行ったほうが現在は早そうなのですね。
アイコンなどのエクスポート方法もご教示いただき、ありがとうございます!
大変助かりました。

@tsubasa
ご回答いただき、誠にありがとうございます!

やはり直接Bubbleで構築している人が多いのですね。
参考になります!

「いいね!」 1