Figma 自動レイアウトと CSS フレックスボックスおよびグリッド: デザインとコードのギャップを埋める

マッピング

Figma のガイドでは、水平、垂直、グリッド フローとオプションのラップを使用して、方向、間隔、パディング、配置によって子を配置する自動レイアウト フレームについて説明します。それぞれに、CSS に近い同等の機能があります。

抱きしめて、満たして、固定する

Figma では、コンテンツを抱き締めるように設定されたフレームはその子に基づいてサイズ変更され、コンテナを埋めるように設定された子は利用可能なスペースを埋めるために引き伸ばされます。 Figma によると、子供がいっぱいになるように設定されている場合、親はその方向に抱きしめることができなくなります。 CSS では、これに相当するのはコンテンツベースのサイズ設定 (auto または fit-content) および flex: 1 または width: 100% です。 MDN の flexbox ガイドでは、flex-grow、flex-shrink、および flex-basis がどのようにスペースを分散するかを説明しています。これは、同じアイデアの CSS 側です。

隙間が現れる場所

ハンドオフのバグのほとんどは、いくつかの領域から発生します。

• 最小サイズと最大サイズ: 両方の場所に設定するか、極端な場合にはテキストとコンテナの動作が異なります。
• テキスト: 行の高さ、折り返​​し、切り捨ては、Figma テキスト レンダリングとブラウザーの間で異なります。
• ベースラインの配置: CSS はテキストのベースラインで配置できます。これがどのような意図であったかを確認してください。
• 絶対的な子: Figma の「自動レイアウトを無視する」(以前の絶対位置) は、位置決めされた親の location:Absolute にマップされます。
• 応答性: 自動レイアウト フレームにはブレークポイントがありません。各幅でレイアウトがどのように変化するかを定義します。

グリッド

真の 2 次元レイアウトには自動レイアウトのグリッド フローを使用し、それを CSS グリッドにマップします。MDN では、コンテンツを行と列にレイアウトするシステムとして説明します。ラップされたフレックス行はグリッドと同じではありません。ラップされた行の項目は列に整列しません。

動きのほうがギャップが大きい

レイアウトは、Figma から CSS までかなり適切にマップされます。モーションではそうではありません。プロトタイプの遷移はコード内で再構築する必要があり、状態が失われることがよくあります。それは、ExodeUI (当社が開発) や Rive など、インタラクティブ コンポーネント向けのランタイムとのギャップ ツールです。