ステートの切り替えができる、ボタンUIコンポーネントの作り方

こんにちは、UIデザイナーの水澤です。

弊社では職能横断チームとして、職種の垣根を超えた情報共有が増えてきています。

今回の記事も、Figma を使ってどのようにステートの切り替えができるコンポーネントを作っているのか、デザイナー以外の方にも理解できるようにまとめてみたいと思います。

1. ステート分のボタンUI を作る

まずは必要なステート分のボタンUI を作ります。

今回はデジタル庁のデザインシステムからデザインデータをお借りしました。ステートは、Normal、Hover、Active、Focused、Disable があったので、こちらを使ってみます。

2. それぞれをコンポーネント化する

5つあるボタンを、一つずつコンポーネント化していきます。

Figma の場合、コンポーネントになったUI は左上にひし形のマークが表示されます。これが親コンポーネントです。

3. Variants として結合する

全てのステートを選択した状態で、Variants として結合します。こちらはステートの切り替えができるコンポーネントにするための下準備です。

下のイメージにある赤枠内のボタンを選択します。

すべてのボタンが点線枠で囲われたら無事結合された状態です。もし枠線の中に入っていない場合、ステート管理の対象から外れてしまうので注意してください。

4. コンポーネントの Property を設定する

コンポーネントを Variants として結合したら、ステートの切り替えができるようにもう一つ下準備が必要です。右メニューの Properties から、Variant の詳細設定を行います。

上のイメージでは、Name の下の Values に Default しか表示がありません。これは初期状態でそうなっているため、ステートの切り替えができるようにステート分の名前を一つずつ入力していく必要があります。

すべて入力すると、先ほどの Values に入力したステート名が表示されました。

これでステートの切り替えができるコンポーネントが完成です！

5. ステートの切り替えができるか確認してみる

ちゃんとステートの切り替えができるコンポーネントになっているか、一度確認してみます。

その場合は親コンポーネント（ひし形のマークがあるもの）ではなく、親コンポーネントを複製された子コンポーネント（ Instance と言います）を使います。

Instance を選択した状態で、右メニューの State から、Focused を選んでみます。

上のイメージのように、指定したステートに表示が切り替わりましたか？
問題なく切り替わっていれば、ステート管理ができるコンポーネントになっています。

おわりに

ステートのパターンを持っておく場合、今回ご紹介した Variant を使うととても便利です。

Figma のコンポーネントには、他にもアイコンの表示・非表示の切り替えだったり、コンポーネントに含まれるテキスト要素の編集がしやすくなる設定方法もあるので、それはまた次の機会にまとめたいと思います。