この記事の概要
variants や component properties など、Figma でのデータ作りには様々なテクニックがあります。
この記事では、少しニッチなシチュエーションにおいて、楽にデータを作れる方法を紹介します。
フォーカスリング付きの UI
以下の画像のように、通常時のボタンと、フォーカスが当たったときのボタンを作成したいとします。
このとき、アウトラインのオフセット表現は、通常の Stroke では実現できません。
そこで Absolute position と Constraintsを使います。
まず通常時のボタンはこのような構成です。
至って普通の作り方です。
次に、フォーカスリング付きのボタンの構成です。
元のボタンよりもひとまわり（ここでは上下左右それぞれ 3px ずつ）大きい四角形を作り、Absolute position で配置しました。
そして Constraints を Left and right, Top and bottom に指定します。
これで、このようにラベルに追従してフォーカスリングも伸び縮みするようになりました。
また、Absolute position で配置しているので、CSS での outline と同様レイアウトの計算には含まれません。
コードとの統一性という意味でも良いと思います。
背景色の有無のバージョンがある UI
例えばApple 公式リソース にある Navigation Bar のように、背景色の有無で バリエーションを作りたいときがあります。
下の画像のように variants を作ってももちろん良いのですが、手動で複製しないといけないので組み合わせが多いとややしんどい印象があります。
こちらは Absolute position と boolean property を利用して、組み合わせを減らします。
検索フィールドの有無1 * 背景の有無で本来 4 種類作らないといけないのを、2 種類で実現できました。
このように、トグルで背景の有無を選べます。
もちろんサイズが変わっても対応しています。
開閉する UI
色々な箇所が開閉するので、愚直に作ると組み合わせ爆発が起きるような UI を楽に作ります。
文章で説明するのが難しいので gif をご覧ください。
すべての開閉パターンを網羅するのはしんどいですし、今後メニュー数が変わったときの更新性も低いです。
方針としては、個別のパーツを Interactive component 化し、それを組み合わせて全体を実現します。
この作り方であれば、今後項目数が増えても割と更新しやすいはずです。
最後に
「ここまで頑張ってデータの作りを考えず、ひたすら作っても良いんじゃないか？」という声も聞こえてくる気がします。
実際、毎回毎回このような作り方をする必要は無いでしょう。
ただ、こういったテクニックを知っておくことで、不意に効率化できることもあると思います。
小ネタの 1 つとして捉えておいてください。
最後まで読んでくださってありがとうございます！
X (Twitter)でも情報を発信しているので、良かったらフォローお願いします！
Devトークでお話してくださる方も募集中です！
-
検索フィールドの有無は boolean property で制御した方が楽ですが、ここでは「バリエーションが増えるとデータ管理が大変」の雰囲気を出すためにこのように表現しました。 ↩