「Figma」で作られたデザインをノーコードツールのBubbleで再現するときに知っておきたい操作方法や考え方をまとめてご紹介します。
テキストの文字間隔や行間を設定するなどは基礎中の基礎ですが、徹底してやっている作業者とそうではない者とでデザインの再現度に大きく差が生まれるため、もし「行間や文字間隔なんて今まで全然気にしてなかった…。」という方がいれば必読です。
FigmaとBubbleの実際の画面キャプチャを添えて解説します。ぜひ手を動かしながら覚えましょう！
なお、ノーコードBubbleの概要については以下の記事で解説しています。
【公認代理店が解説】ノーコードツールBubbleとは？使い方やデメリット、料金を解説
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
BubbleでFigmaの文字間隔を再現する方法
BubbleではAppearanceタブの赤枠部分、Letter spacingで文字間隔を設定できます。CSSで文字間隔を指定するときのプロパティ名と同じですね。
Figmaの文字サイズと文字間隔の数値を以下のように計算した結果をBubbleで入力してあげればFigmaデザインと同じ見た目にできます。
Figmaの文字サイズ × （Figmaの文字間隔 / 100）
たとえば、Figmaの文字サイズが12pxで、文字間隔が7%の場合、計算式は「12 × 0.07（7 / 100）」で、Bubbleで設定するLetter spacingは0.84となります。
Bubbleでは以下のように小数点も指定可能です。
BubbleでFigmaの行間を再現する方法
同様に、BubbleではAppearanceタブの赤枠部分、Line spacingで行間を設定できます。CSSで行間を指定するときのプロパティはline-heightなので、同じにしてほしかったです（笑）
Figmaの文字サイズと行間の数値を以下のように計算した結果をBubbleで入力してあげればFigmaデザインと同じ見た目にできます。
Figmaの行間 / Figmaの文字サイズ
たとえば、Figmaの文字サイズが12pxで、行間が19の場合、計算式は「19 / 12」で、Bubbleで設定するLine spacingは1.5（小数点第２位以下も入れると1.58333333333）となります。
Figmaの要素間の余白を計測する方法
先日社内で勉強会を実施したときに反響が大きかったのでおまけでこちらもご紹介！
Figmaで特定の要素間の余白を可視化する方法、これ、意外と知らない方もいるんじゃないでしょうか。この方法を知らないと余白を測る時にダミーで長方形をおいてその高さで測ったりするのかな…想像するだけでしんどい（笑）
操作方法は簡単です。以下の手順で余白を可視化できます！
余白を計測したい要素の片方を選択（クリック）する
↓
余白を計測したいもう片方の要素にカーソルを乗せた状態で、optionキー（Windowsの方はAltキー）を押す
実際にFigmaで操作している動画版もご用意しましたのでイメージ湧かない方はぜひご覧ください！
上記動画内でも実演している通り、要素間の余白を計測しながら選択中のオブジェクトの位置を調整することも可能です。
