Figma で複数のバリアントを持つコンポーネントをネストする際は並べる方向を統一した方が良い（かもしれない）

この記事の概要

Figma でコンポーネントを作っている際に変な挙動を発見し、対処法を調べたので記事にしました。

ここに書いてある挙動はあくまで私が調べた範囲のものです。
データの作りや組み合わせ方によってはそもそも問題が起こらなかったり、ここに書いてあるやり方でも直らなかったりする可能性があります。
ご了承の上お読みください。

作ろうとしていたもの

リスト要素のバリエーションを 1 つのコンポーネントで作ろうとしていました。
想定していたパターンは以下です。

概要	イメージ図
縦並び サブのテキスト有り
縦並び サブのテキスト無し
横並び

アイコンが共通なのもあり、以下のようにコンポーネントをネストして作っていました。

• リスト要素のコンポーネント
  • テキスト部分のコンポーネント
    • 縦並びのバリアント
      • メインのテキスト
      • サブのテキスト（ブール値プロパティを指定）
    • 横並びのバリアント
      • サムネイル画像
      • メインのテキスト
  • アイコンのコンポーネント

テキスト部分のコンポーネントは非常にプレーンな作りです。

• 縦並びのバリアント
  • メインのテキスト
  • サブのテキスト
• 横並びのバリアント
  • 画像
  • メインのテキスト

起きたこと

特定の手順を踏むと、テキスト部分とアイコン部分が上下中央揃えになりませんでした。

1. メインコンポーネントからインスタンスを生成
   1. 
2. インスタンスのバリアントを変更（縦並びから横並びへ）
   1. 
3. インスタンスのバリアントを再度変更（横並びから縦並びへ）
   1. 
4. サブのテキストのブール値を false に変更 → ネストしたコンポーネントの高さが内包でなく固定に変わってしまった
   1. 

対処法

ネストしているコンポーネントのうち、ルートフレームのオートレイアウト方向を統一します。

今回はどちらのバリアントも横並びにしました。

変更した構成は以下です。

• ルートのフレーム（横並び）
  • ラップするフレーム（縦並び）
    • メインのテキスト
    • サブのテキスト

オートレイアウトの中身が 1 つしか無い場合、縦並びでも横並びでも見た目が変わらないことを利用したワークアラウンドです。

これにより、同様の手順を踏んでもネストしたコンポーネントの高さが固定に変わらず、テキストとアイコンの上下中央を保つことができました。

補足

• 今回のデータでは横並びのバリアントにブール値プロパティをつけていますが、縦並びにつけても同様の現象が起こりました
• Figma でこういった挙動が起きる際、レイヤー名の不一致が原因の場合が多いのですが、今回は関係ありませんでした

最後に

記事冒頭にも書きましたが、この記事に書いてある内容はあくまで私が調べた範囲のものです。

つまり、バリアント切り替えによるオートレイアウトの挙動の変化の真因は、ネストしたコンポーネントの方向なのかは分かりません。

内包から固定へ変わる挙動も、並び方向の統一による改善も、何度か試して再現したのでひとまず記事にしているという状態です。