Figma オートレイアウトはDev Mode CSSにどう反映されるか

はじめに

Figma オートレイアウトは、フレームに含まれるオブジェクトを自動配置できる機能です。
Figma上で余白や配置を一括指定することが可能となり、よりCSSに近い定義が可能となりました。

この記事では、オートレイアウトがDev Mode（開発モード）のCSS表示にどのように反映されるかを記述します。

共通

オートレイアウトを設定すると、Dev ModeのCSSでは常にflexが指定されます。

display: flex;

サイズ変更（幅・高さ）

固定

WやHの右プルダウンから幅/高さを固定を選択すると、コンテンツにかかわらず固定のサイズとなります。

Dev ModeのCSSでは、widthやheightが固定値で指定されます。

width: 200px;
height: 400px;

内包

コンテンツを内包するように自動でサイズが変更されます。
CSS上では、widthやheightは指定されません。

最小・最大サイズ

幅・高さごとに最小・最大サイズを指定できます。
例えば最小幅を追加する場合、Wの右プルダウンから最小幅を固定を選択します。

特定の値のみ指定している場合、CSSでは対応したプロパティのみが出力されます。

/** 最小幅 */
min-width: 20px;

/** 最大幅 */
max-width: 120px;

/** 最小高さ */
min-height: 20px;

/** 最大高さ */
max-height: 120px;

方向+間隔

方向

方向は縦に並べる、横に並べる、折り返すの3種類です。

/** 縦に並べる */
flex-direction: column;

/** 横に並べる 追加なし */

/** 折り返す */
align-content: center;
flex-wrap: wrap;

また、子オブジェクトにも指定に合わせて次のCSSが追加されます。

/** 縦に並べる */
flex-shrink: 0;
align-self: stretch;

/** 横に並べる */
flex: 1 0 0;

/** 折り返す */
flex: 1 0 0;

間隔

内包するコンテンツ間の距離です。自動が指定されている場合、CSS追加はなしとなります。

gap: 10px;

方向で折り返すを選択した場合、画面では間隔が非表示となりますが、CSS上は以前に指定した値がgapとして残っていました。

配置

3種類の配置から設定する場合、上揃え、中央揃え、下揃えが選択できます。

/** 上揃え */
justify-content: space-between;
align-items: flex-start;

/** 中央揃え */
justify-content: space-between;
align-items: center;

/** 下揃え */
justify-content: space-between;
align-items: flex-end;

ダブルクリックで9種類の配置に切り替えた場合のCSSは以下のとおりです。

/** 上揃え(左) */
align-items: flex-start;

/** 上揃え(中央) */
justify-content: center;
align-items: flex-start;

/** 上揃え(右) */
justify-content: flex-end;
align-items: flex-start;

/** 左揃え */
align-items: center;

/** 中央揃え */
justify-content: center;
align-items: center;

/** 右揃え */
justify-content: flex-end;
align-items: center;

/** 下揃え(左) */
align-items: flex-end;

/** 下揃え(中央) */
justify-content: center;
align-items: flex-end;

/** 下揃え(右) */
justify-content: flex-end;
align-items: flex-end;

なお、オートレイアウト設定によるCSSの変更はありませんでした。

パディング

オブジェクト/HTML要素の内部余白を指します。上下左右の4方向それぞれに値が設定できます。
パディングは、幅/高さに内含されます。

/** 上下左右が同一値 */
padding: 8px;

/** 上下・左右 */
padding: 16px 8px;

/** 上・左・下・右 */
padding: 2px 8px 5px 8px;

なお、上・下が異なり左右が同一の場合、3つの引数を取る指定にはなりませんでした。

その他

コンテンツを隠すによるCSSの変更はありませんでした。