見出し画像

サイズ展開をFigmaのVariablesでぶん殴る話

Naomi Hamada

この記事は「フルリモートデザインチーム Goodpatch Anywhere Advent Calendar 2023」の10日目の記事です。

おはようからおやすみまでFigmaとずっと一緒だよ！な年でしたこんにちは！年に一度のこの季節がやってまいりました、きっちり1年ぶりのnote更新です。

＊この記事は2023年12月1日に開催したFoF Fukuoka イベントでのLT内容を元にしています。イベントではご紹介しきれなかった細かい部分についても触れておりますので、「もう聞いたよ！」という方もぜひさらっとでもご覧いただけると幸いです。
＊2023年はFriends of Figma Fukuoka のFigma Community Advocateとして推し活もやることになりましたやったー！


わくわくVariables

みなさまVariables使ってますか！今まで運用でカバーしていたあれこれの泥臭い数値や設定が、Variablesがあれば魔法のように定義&Semanticな使い方ができるように…！私は本当にVariablesなかった世界線には戻れない…もうないと仕事できない……くらい依存してしまっています。

☝️Variablesがリリースされた時に早速あれこれ遊んでたやつ

☝️Anywhereでも、けたけさんと一緒にただただ新機能をきゃっきゃする&谷さんに質疑させていただくという贅沢なイベントを実施させていただきました。イベントでは参加いただいた皆さまにFigmaの実データを公開するよ！ライブで触るよ！という野望も達成🎉

2023年現在我らが戦う世界

さてデザイナーの皆さま、オンスクリーン媒体においてどんなサイズでデザインデータを作成されていますか？
かつて320だけ作ればよかったスマートフォンのサイズは、2023年の今も着々と幅を広げています。パカパカするやつとかもうスマホなのタブレットなの？というサイズ感です。デスクトップに目を向ければディスプレイは27インチ以上もざら、モバイル端末だってSplit Screenすれば何だったら横並びにもできちゃうしということで、ユーザーはより自由なサイズでコンテンツを表示することが可能になりました。

m3でもm2からの変更点としてMediumサイズへの対応を行い、HIGに至っては次元が空間にまで進出しています(これはだいぶデバイスも違う話なので一旦置いておくとして)。

Layouts for medium window size classes are for screen widths from 600dp to 839dp.

https://m3.material.io/foundations/layout/applying-layout/medium
わーい
いやまー無理ですよ全部デザイン作るとか…

ということで、我々を取り巻く環境に対してデザイナーが注力すべき点は下記と言えそうです。

  • デザイン時に幅を定義するのはもう無理

  • コンテンツ要素は常にリフローである、自動翻訳機能の前には言語すら変わりうる

  • デザイン時にさまざまな幅や環境の要因に耐えうるかの検証が必要

＊ただし特定の環境を想定した体験設計は必要なので、あくまで一般論で「どう対応する？」に対する注意ポイントとお考えください

強度のあるデザインにするために

様々なサイズを前に我々はどうすればいいの…？、できることは実装前のデザインの段階でしっかり検証することです。
私は手に脳みそのついているタイプのデザイナーなので、とにかく作ってみて手触りを確かめます。無理のある挙動はないかな？だらしない幅になっていないかな？ルールがどうしてもはまらない大きさはないかな？という点を、実際に横並びでサイズ展開を行い検証します。

とにかくいろんなサイズに当てはめてみる

そんな時にとっても役に立つのがVariablesです。いろんなサイズの挙動や収まりを、最速で実現するのがVariables。やだすごい良さそう。

Collectionを使い倒す

あれこれ試して、2023年末現在はこんなCollection構成で作ることが多いかも、という内容をご紹介します。FigmaのVariablesはCollectionごとにMode構成を持たせる作りになっているので、Modeを細かく使いこなそうとした結果こういうCollectionが取り回ししやすそうだなと思っています。

アルファベット順に並ぶという仕様により、頭に「_」などつけられがちなCollection

  • Primitive

    • 色、数値の土台になるもの

  • Semantic

    • 色や数値の意味づけ

  • Tone

    • ヘッダーに配置するときは余白なし(＝角丸なし)にするから、ここはシャキッと角0にする、フッターが暗めな時にダークモードにするよ！など部分的にトーンのチューニングが必要な時

  • Device

    • 実務でゴリゴリ使う数字を入れるところ

PrimitiveとSemanticは実装にお渡しすることも考慮し、命名などなるべくエンジニアさんと擦り合わせを行いそこまで編集頻度が多くないものとしています。ToneやDeviceというCollectionはデザイナーの裁量で便利に使う数値として用意することで、実務にものすごく寄った場所にすることができます。
これらの数値や色をテンプレート的に使うファイルに整えておけば、案件毎にToneとDeviceだけカスタマイズすることで初動も早くなります。

中身を見ていきましょう。

デバイス展開に使うCollectionの中身

デモ用のファイルからご紹介しているので、ややノイズに近い数値も混ざっていますすみません

概ね下記のサイズを展開の際に仕込んでおきます。

  • スクリーンサイズ

    • PC＝1440や1280、SP＝360や430など、検証の際にターゲットにするサイズをNumberで設定

  • Variantsの命名

    • PC、SPなどVariantsにStringを設定して自動で切り替わるようにする

  • コンテンツの幅や端からの余白

    • AutoLayoutの数値にNumberを入れて手入力によるミスを減らす

基本的にここはSemanticな命名を行う場所というよりは「デザイン時に便利に使う」数字が収まる場所なので、決め打ちで数値を入力しておくことが多いです。

Variantsをデバイス毎に設定&自動化して劇的効率化

ここではVariantsの文字列にPC、SPを用意していますが、VariablesのStringに設定すると親FrameのModeを切り替えるだけでPCとSPそれぞれに向けた余白へ自動で切り替わります。

サイズがうまいことレンダリングされないのはご愛嬌。触ると再描画するので、「おや？」と思ったら触ってみてください。

ほぼデバイスとセットで変える数値をVariablesに仕込んで時短

Modeを分けた上で画面端からの余白をPCでは48以上SPでは24など、AutoLayoutの余白に設定しておくと、劇的に作業が早くなります。
一覧などで使用するカードの間の空きは16px、SPでは8pxなど、端末毎に異なる数値を設定するものをVariablesに設定しておくことで、個別に手入力する手間を省けます。

見えてくるもの

あれこれ省コスト化し、その浮いた時間をサイズごとの検証に充てることで、より強度のあるデザインが可能になります。デザイン時にサイズ毎の挙動を検証することで、実装のテストも楽になります。Figmaの機能を活用し、よりスピーディに強いデザインを作れるようになれると良いですね。

こうだったらいいのにな〜

そんな便利なVariables、将来へ向けての夢もたくさん膨らみます。

  • 計算式入れらるようになれば1色設定するだけでほぼ自動でカラーパレットが出来上がるのでは…？

  • フォントのサイズやらウェイトやらも管理できるようになるのでは…？

  • 縦横比率保ってAutoLayoutで拡大縮小できるのでは…？

などなど、夢は広がるばかりです。「できないのかあ…」と諦めるより、「今あるこんな便利な機能を使わない手はないぞ」、というノリでできる範囲で色々あがいてみるのがおすすめです。より便利に使うヒントは触ってこそ生まれます。

あがいた結果散らかりがちなあれこれ

番組の最後にCMです。
Figmaについてとことん突き詰めたい方、クライアントワークならではのスピード感で、Goodpatch Anywhereでぜひ熱く語らい&お仕事ご一緒しましょう！

2024年も楽しいFigmaライフを！


いいなと思ったら応援しよう！