FigmaのAuto layoutとCSSの対応を考える

これは何

FigmaでAuto layoutを使ってデザインする時にどんなCSSを想定しているかを整理してみました。

Flameの内側に余白を設定する | padding

Auto layoutはFigmaでレイアウトをいい感じに可変してくれる機能で、ボタンのUIなどによく使われます。

例えばこんな感じでpadding: 16px 24pxのボタンがあったとします。

ボタンに「Auto layout」を指定して、内側に上下16px、左右24pxの余白を持つように設定します。
（Auto layoutの設定はFigma画面右側のツールバーの「Auto layout」というメニューで確認できます）

すると余白を保持してボタンのサイズが可変になり、ボタンの中身の文字が増えると自動で座布団の部分が伸びてくれます。

要素の整列 | Flexbox

Auto layoutはコンテンツの大きさに合わせてFrameがストレッチするだけでなく、等間隔での要素の配置にも使えます。

例えばこんな感じで等間隔で並んだ画像があった時

このデザインをAuto layoutを用いて実現すると、こんな感じのプロパティになります。

左から順に以下の情報を設定しています。
（Auto layoutを設定したオブジェクトを便宜上「Image container」と呼びます。）

1. Image container内のオブジェクトの並ぶ向き
2. 子オブジェクト間の余白
3. Image containerの内側の余白
4. Image container内のオブジェクトの揃え位置
   • 
   • こんな感じで縦（上揃え・真ん中揃え・下揃え）横（左揃え・真ん中揃え・右揃え）の揃え位置を指定できます。

3のImage containerの内側の余白が最初に見た、Auto layoutを設定したオブジェクトのpaddingです。

2の子オブジェクト間の余白はImage containerの子オブジェクトたちのmarginと考えられます。

そして残りの1と4がポイントで、大枠の「Image Container」にdisplay: flex;が指定されていると考えると、以下のプロパティに対応すると考えられます。

1. flex-direction（Image container内のオブジェクトの並ぶ向き）
2. justify-content（Image container内のオブジェクトの横揃え位置）
3. align-items（Image container内のオブジェクトの縦揃え位置）

実際に「要素が縦並び」「縦の揃え位置が中央」「横の揃え位置が左」のデータを作ってみます。

InspectでCSSを確認してみると、意図した通りにFlexboxのプロパティが指定されていることが確認できます。

オブジェクトのサイズ | width height

さっきまでのところで「Auto layoutはFlexboxと対応しているんだな」という部分を見てきましたが、Auto layoutで対応できるCSSのプロパティは他にもあります。

ツールバーの「Auto layout」の下に「Resizing」というメニューがあり、この「Resizing」では、オブジェクトの大きさが可変するかどうかを指定できます。

指定できる値は以下の3つ

1. Fixed width(height)
   1. 幅、高さを固定にする
2. Hug contents
   1. 子要素に合わせて可変する（子要素がある時のみ指定可能）
3. Fill container
   1. 親要素に合わせて可変する（親要素がある時のみ指定可能）

親要素と子要素・幅と高さで分けてCSSを考えるとこうなります。

親要素

• 幅
  • Fixed width： widthを固定値で指定する
  • Hug contents： widthで固定値を指定しない
• 高さ
  • Fixed height： heightを固定値で指定する
  • Hug contents： heightを固定値で指定しない

子要素

• 幅
  • Fixed width： widthを固定値で指定する
  • Fill container： widthを100%で指定する or display: blockを指定する
• 高さ
  • Fixed height： heightを固定値で指定する
  • Fill container： heightを100%で指定する

例えば画像にFixed width、テキストにFill containerを指定して横並びにしているカードについて考えてみます。

レスポンシブ時には画像サイズは変わらず、テキストは親要素に合わせて可変します。

この場合のCSSはこんな感じになります。

//大枠のFlame
.autoLayout{
  display: flex;
  flex-direction: row;
  justify-content: left;
}

//画像
.image{
  width: 80px; //Fixedのため固定値を指定
  height: 80px; //Fixedのため固定値を指定
}

//テキスト
.text{
  display: block; //Fill containerのためdisplayにblockを指定してインライン方向に伸びて使用可能なスペースを埋める
}