🤖

「私の考える最強のFigma」 - 資産価値の高いVariantをラクに作る

に公開
Figma
UI/UX
UI
designsysytem
idea

ボタンなどの重要なコンポーネントは、たくさんのVariantを擁します。
後からアイコンを追加する時、ひとつひとつに手作業でアイコンを付与するのでは面倒です。

ラクに更新する方法

下記の図のように、Variantsの継承元となるスタイルを作成し、そのinstanceでVariantsを展開していけば数の多いVariantを簡単に管理できます。

追記
上記方法は、variant全体への修正は簡単だけれど別の弊害をもたらす可能性があります。

下記のように親と子が同じcomponentであり、それを入れ子にしているので親子それぞれにvariantの設定ができてしまいます。

親text-field

子text-field

このように名前もパネル上での見た目がまったく同じなので、

  • 「stateを変更したはずなのになぜか変更されない」
  • 「子のStateをhoverに設定してたが、親の方に設定しなければならなかった」'
    というややこしい状況が発生します。

対策1 - 名前をかえる

  • text-field
    • └text-field ← temp-defaultなどとかえる

対策2 - variantとして定義する前にすべてのincetanceを解除し、master componentにする

でもこうしちゃうと後から全体に及び修正できないんだよな〜。

そもそもそんなに入れ子にするってアリ？

いちおうアリっぽいです。解釈間違ってたら介錯して。

https://www.figma.com/best-practices/component-architecture/nested-components/

手順

  1. 基本スタイルをMaster Componentにする
    • button/default-style
  2. そのincetanceを2つ作りそれぞれをMaster Component化する
    • button/default
      • button/default-style
  3. variantとして定義する
    • button/default
      • button/default-style
    • button/hover
      • button/default-style

tableをvariantで作る

  • 基本スタイル作成
    • デフォルトスタイル
    • エラー表示
    • tooltip
    • ballon
  • variantを作る
    • state variant
      • default
      • hover
      • active
      • focus
      • disable
    • type variant
      • td
      • tr
      • th

全部入りで作る

  • icon + text + icon
  • balloonを含める

継承の順番を考えてcomponent化する

  1. text-link
  2. buttons
  3. dropdown

Discussion