この記事の概要
2023 年 7 月 6 日に開催される Config2023 Recap in Goodpatch で発表する内容です。
内容
「variables を既存データにどう適用する？」という内容で発表します。
全体の説明
新機能が色々出た中で、1 番みんなが沸いているのが variables だと思っています。
これから新しくデータを作るなら、デモの内容を参考にして綺麗に作っていけそうなイメージは湧きますよね。
ただ、 90% 以上の方は「既に作ってあるデザインデータがある」と思います。
そのため、今あるアセットをできるだけ活かして、漸進的に移行するには……という話をします。
また Figma の Recap ですが今回のアップデートはエンジニアとの協業がより大事になる話だと思ったので、コードに絡めた話も一部します。
補足として、あくまで「多分こんな感じが良いんじゃないかな」であり「このやり方でうまくいった」ではありません。
移行の方針
- 安全なところから進める
- 破壊的な変更をできるだけしない
- 機能の取り入れだけを行う
- データのリファクタリング・新たなデザインシステムの構築などを一緒にしない
一気にすべてをやろうとするとあまりにも大変です。
そして、大掛かりに取り組んだ結果データが崩れてしまったら元も子もありません。
というわけでできるだけ安全な進め方を考えましょう。
実演
このデータを使って説明します。
コンポーネントは 2 つだけ、styles も 7 つだけです。
あくまで見本として分かりやすくできるように簡単にしていますので、実際の業務ではもっと数は増えると思います。
ただ、作業の流れはそこまでは変わらないはずです。
Number
Number は全体的にかなり安全に進められるはずです。
今までの Figma のデータだとどうしてもズレが起きたり予期せぬ値が入りやすかった箇所が、今回のアップデートによって、チームの誰が触っても一貫させやすくなったと思います。
Corner radius
色々な数値のバリエーションがある中でも、角丸の値はそこまでたくさんの種類がないと思います。
このデータでは、ボタンで 4、画像で 8、広告エリアに 12の角丸があります。
まず、Collection の名前を radius にします。
右サイドバーから Local variables を選択し、 Create variable を選択します。
そして Number を選択します。
Name に radius-sm、Value に 4 と入れます。
Number scoping から Corner radius だけにチェックを入れて完了です。
同様にしてradius-md: 8、radius-lg: 12を作ります。
そして、角丸のある要素、ここではボタンに適用します。
Collection名に radius と入れているからネームスペースが区切られているのに、なぜここの Name でも radius- からはじめたのか？と思われる方もいるかもしれません。
これは Dev mode で見てみるとわかります。
border-radius には var(—radius-sm) と書かれています。
もしさっきの名前を sm などにしていまうと、角丸の中での sm と また別の意味での sm が被ってしまいます。
そのため、こういった命名にしました。
もちろん現在のみなさんのチームで radius ではなく round といった接頭辞を使っていれば、そちらにあわせてください。
さてこれで角丸用のデータは準備完了です。
あとはすべての要素に適用するだけです。
今まで存在しなかったデータなので、新しく作ったとしても「大きく壊れる」ということはありません。
Gap
Gap もまったく同様です。
ただ、 Collection は分けておいた方が取り回しがしやすいので、分けましょう。
Create collection を選択して、 spacing とでも名付けます。
このデータでは、8, 16, 24のgapを使っています。
spacing-sm: 8, spacing-md: 16, spacing-lg: 24, spacing-xl: 32と登録します。
scoping で Gap だけにするのをお忘れなく。
border とほぼ同じなのでサクっと終了です。
Width and height
そしてまたほぼ同様ですが width and height です。
同様にCollectionを作成し、Name と Value を指定する。
今回は見本データを簡潔にするためにサムネイルのサイズに指定しましたが、読み物系のコンテンツだと画面幅によらず max-width が決まるときもあると思うので、そういう場面も使えそうです。
Color
みなさんがより気になっているのはColorだと思いますが、手作業でやると Number より大変です。
先に1つお伝えすると、Figma の機能そのものの話ではないんですが、ポイントになるのは「せっかくだしダークモード用のパレットを考えよう」とかしないことです。
例えば、今がプリミティブトークンだけのパレットなら、単にそれを移植するのにとどめるのが大事です。
デザインに限らず、コードのリファクタリングとかでも同じですね。
さてそれを念頭におけば、作業自体はプラグインに頼れます。
まずStyles to variable converter というプラグインを実行します。
これで、既存の styles が variable に登録されて、かつ今の stylesのpropertiesにはvariableが適用されました。
あとはページをまるっと選択して destroyer を実施します。
なおドヤ顔で語っていますが Figma 公式からこの方法はアナウンスされています。
色々試している中で見つけて、これが良いじゃん、となりました。
そして、ここまで来ればエイリアス登録も自由にできます。
私が作っている Qiita でいうとグローバルなトークンとは別にエイリアスのトークンもコード上には存在するので、それらを逆輸入するような感じで移行中です。
ちなみに今後色において styles と variables の使い分けってどうするの？と思われそうですが、こちらも公式から出ています。
いくつかの値を組み合わせての利用のときなどが styles で、1つの値だけとか、それを継承して名前を使うとか、そういう使い方のときは variables だそうです。
Text
え？ Text は？となっているかもしれませんね。
個人的にはもう少し様子を見ても良いかもと思っています。
というのも、Component でのtext propertyとvariables が併用できないんですね。
フォーラムにもそれなりに意見が集まっているので、普段の Figma の改善スピードだったら、少し待てば両立できるかも……と期待しています。
もし両立できるとしたらそのときまたデータの作りを考え直すことにもなるかもなと思い、様子見というわけですすみません。
まとめ
- Number は新しく追加された概念なので、かなり安全に適用できる
- Color は手作業だと大変だけどプラグインを使えば問題なく移行できる
- Text は一旦待ち（個人的に）