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

MaterializeはMarkupGenが対応する他のフレームワークとは種類が異なるターゲットです。スタイルを乗せるための中立的なグリッドではなく、GoogleのMaterial Designを明確な思想で実装したもの——カード、チップ、エレベーションの影、そしてインタラクティブなコンポーネント用に組み込まれたJSレイヤーです。この明確な思想こそが、Figmaデザインがすでにマテリアルの規約に従っている場合に役立つ理由であり、同時に、手作業での変換が見た目以上に遅くなる理由でもあります。

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

デザインをMaterialize特有の語彙に落とし込むには、スペーシングの値をコピーするだけでは足りません。各Figmaフレームがどのマテリアルパターンを表現しようとしているかを見極める必要があります。

• Figmaのコンポーネントを対応するMaterializeのコンポーネントに合わせる。 影付きのカードのようなフレームは、手作業でコピーしたbox-shadowを持つ汎用の<div>ではなく、正しいエレベーションクラスを持つ実際の.cardコンポーネントにする必要があります。
• Auto LayoutをMaterializeの12カラムグリッドにマッピングする。 row/col s* m* l*という特有のブレークポイントクラスを含み、これは素のflexboxとは異なる仕組みのため、他のフレームワークの変換からそのままコピーすることはできません。
• JS依存のコンポーネントを配線する。 クラスのみのフレームワークとは異なり、モーダル・ドロップダウン・サイドナビはMaterializeのJS初期化関数に依存しています。手作業でマークアップを変換する際に見落としやすく、インタラクティブ性を静かに壊してしまいます。
• エレベーションと色を再構築する。 Figmaのインスペクターから生の値をそのまま取るのではなく、Materializeのシャドウスケールとマテリアルカラーパレットを使う必要があります。

各ステップは単独では対応できますが、ページ全体となるとこの4つを繰り返し行う必要があり、なおかつ、実際に半分の機能を動かしているJSの初期化を見落とすわけにはいきません。

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

MarkupGenは、この手作業でのパターンマッチングを高速化するのではなく、そもそも取り除くように作られています。ワークフローはどの出力フォーマットでも一貫しています。

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

書き出し時、Auto Layoutの行と列はMaterializeのグリッドクラスにマッピングされ、塗りとエレベーションは最も近いマテリアルの色と影に解決されます。デザインにインタラクティブな要素が含まれる場合は、対応するMaterializeのJSも含まれるため、コンポーネントは反応のない静的なマークアップとしてではなく、標準ですぐに動作します。

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

Materializeは、素のCSS、Tailwind、Bootstrap、Bulma、Picoと並ぶ、MarkupGenが提供する6つのCSSターゲットの1つで、アカウント全体で固定するのではなくプロジェクトごとに選択できます。Figmaデザインがすでにマテリアルデザインの規約に従っている場合に、まさに正しい選択となります。ダッシュボードや社内ツールが最もよく当てはまるケースです。マテリアルのビジュアル言語がそこではすでに期待される規約になっているためです。他の5つとの比較はFigma-to-Code向け6つのCSSフレームワークをご覧ください。

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

Materializeの明確な思想を持つコンポーネントでは、確認作業はピクセル単位の一致よりも、動作の確認が中心になります。

• インタラクティブなコンポーネントをクリックしてみる。(モーダル、ドロップダウン、サイドナビ)静的なマークアップだけでなく、JS初期化関数が正しく組み込まれているか確認します。
• エレベーションの一貫性を確認する。 同じ見た目のカードスタイルは、繰り返し登場するすべての箇所で同じ影のクラスにマッピングされるべきです。
• デザインのカラーパレットがマテリアルのパレットに適切に解決されているか確認する。 特にマテリアルのスウォッチにぴったり一致しないブランドカラーに注意してください。
• 内蔵エディタを使う。 書き出したマークアップを手で編集するのではなく、レイアウトやコンテンツの調整はエディタで行い、その後再度書き出します。

すべての書き出しには自動のAI品質スコアも付与され、公開準備が整っているかの目安になります。

自分のデザインで試す

Figmaのフレームを今も手作業でMaterializeのコンポーネントに当てはめているなら、デザインの実際の構造から生成することでそのパターンマッチング作業がどれだけ減るか、試してみる価値があります。MarkupGenを無料で試す——自分のフレームの1つで試すか、Figma to Materializeコンバーターページで標準で得られる内容を確認してください。