FigmaからBulma CSSへ:実践的な変換ガイド

BulmaはBootstrapやTailwindと比べて少し独特な立ち位置にあります。フルの機能を持つコンポーネントフレームワークでありながら、クラスのみで完結し、JavaScriptもビルドステップも不要です。そのためFigmaからの書き出し先としてはクリーンな選択肢になりますが、Bulma特有のクラス体系に手作業でデザインを変換するには、グリッド・スペーシング・修飾子を熟知して毎回正しいクラスを選ぶ必要があります。

手作業でFigmaからBulmaへ変換すると遅い理由

Bulmaのflexboxベースのグリッド(columns、column、サイズ修飾子is-*)は、書き上がってしまえばシンプルに読めますが、Figmaのフレームから手作業でそこへたどり着くには、他のどのフレームワークとも同じ、繰り返しの多い変換作業が必要です。

• Auto LayoutをBulmaのカラムシステムにマッピングする。 Figma内で均等に配置された要素の行は、columns、column is-half/is-one-thirdとgapの扱いの正しい組み合わせにしなければならず、それをフレームごとに目視で判断します。
• 正しい修飾子クラスを選ぶ。 Bulmaはスタイルの大部分を修飾子(is-primary、is-rounded、is-large)で表現するため、Figma上の塗り色や角丸を「最も近いBulmaの修飾子」に翻訳する必要があり、その対応関係が完全に一致するとは限りません。
• タイポグラフィとスペーシングをBulma独自のスケール(title、subtitle、mb-*/mt-*ヘルパー)で再構築する——ピクセル値をそのままコピーするのではなく。
• すべてをブレークポイントごとに繰り返す。 Bulmaのレスポンシブヘルパー(is-hidden-mobile、カラム幅の変更)はデザイン内の各画面サイズに対して手作業で追加する必要があります。

どのステップも概念的には難しくありませんが、まさにこの種の反復的で判断力を要する作業こそが、実際の複数ページにわたるデザインで細かな不整合を生む原因になります。

MarkupGenが実際のデザインからBulma出力を生成する仕組み

MarkupGenはこの変換ステップを高速化するだけでなく、そもそも取り除きます。出力フォーマットに関わらずワークフローは同じです。

1. MarkupGenプラグインでFigmaからフレームを書き出す。 プラグインが構造・スタイル・画像をまとめて取り込みます。
2. AIが実際のデザインの構造からマークアップを構築する。 おおまかな近似ではありません。
3. 内蔵エディタでコンテンツ・フォント・レイアウトをビジュアルに調整する。 何かを確定させる前に行います。
4. 最終的なコードパッケージをBulma 1.0.2として書き出す。

書き出し時、FigmaのAuto Layoutとスペーシング値は、推測ではなくBulmaの実際のグリッドクラスとヘルパークラスにマッピングされます。Auto Layoutを使った要素の行は、対応するサイズのcolumns/column構造になり、padding・gap・alignmentはインラインスタイルではなくBulmaのスペーシングヘルパーとして解決されます。出力にはJavaScriptへの依存が一切なく、Bulma自体の思想と一致しているため、CSSを正しく描画するために追加で配線する必要はありません。

MarkupGenの出力フォーマットの中でのBulmaの位置づけ

Bulmaは、素のCSS、Tailwind、Bootstrap、Materialize、Picoと並ぶ、MarkupGenが対応する6つのCSSターゲットの1つです。あらかじめ固定するのではなく、設定パネルからプロジェクトごとに選択します。BootstrapやMaterializeのようにコンポーネントライブラリ全体を採用することなく、モダンでクリーンなデフォルトの見た目が欲しいときに選ぶべきフレームワークです。6つすべての横並び比較はFigma-to-Code向け6つのCSSフレームワークをご覧ください。

公開前に生成されたマークアップを確認する

自動変換はデザインの大部分で正しいクラス構造を生成しますが、マージ前に一通り確認する価値はあります。

• 各ブレークポイントでのカラム幅を確認する。 Bulmaのグリッドは柔軟なので、生成されたis-*サイズがデスクトップだけでなくモバイルでも意図通りになっているか確かめてください。
• 繰り返し出現する修飾子パターンを確認する。 特に同じコンポーネント(カードやボタンスタイルなど)が複数回現れる箇所では、どこでも同じ修飾子クラスに解決されるべきです。
• Bulmaのクラスの下にあるHTMLがセマンティックであることを確認する。 出力はデフォルトで、ネストされた<div>ではなく意味のあるタグを優先します。
• 内蔵エディタを使う。 書き出したクラスを手で編集するのではなく、内容やレイアウトの調整はエディタで行い、その後再度書き出します。

すべての書き出しには自動のAI品質スコアも付与されるため、公開準備が整っているか、あるいはもう一度確認する価値があるかをすぐに判断できます。

自分のデザインで試す

Figmaファイルに合わせてBulmaの修飾子クラスを今も手作業で選んでいるなら、クラスがデザインの実際の値から生成されることでその作業がどれだけ減るか、試してみる価値があります。MarkupGenを無料で試す——自分のフレームの1つで試すか、Figma to Bulmaコンバーターページで標準で得られる内容を確認してください。