今日は、シナカフェで Figma から出た Variables の新機能を触ってみました！
雑なメモ的に書いてあるので、読みにくいかもです！
すみません！
1.タイポグラフィー
以下の項目に変数できるようになったので、いくつか設定してみました。
- フォントファミリー
- フォントの太さとスタイル
- フォントサイズ
- 行の高さ
- 文字間隔
- 段落間隔（line-height + n px）
- 段落インデント
早速、簡易的な Typography 設計をします。
1.1 設定する数値（PC / SP）
今回の実験用に、ミニマルな Typography の設計を用意しました。小さいWebサイトならこのボリュームでいいかもですね。
font-family
- japanese: Noto Sans JP
- english: Inter
font-weight:
- normal: Regular
- bold: Bold
font-size:
- h1: 24px / 22px
- h2: 22px / 18px
- h3: 18px / 16px
- body1: 16px / 14px
- body2: 14px / 13px
- caption: 12px / 11px
line-height:
- xs: 16px
- sm: 24px
- md: 32px
- lg: 40px
1.2 mode の設定
今回は、レスポンシブタイポグラフィを設定するために、Typography コレクション配下に、PC / SP の2つを設定してみました。カラーだと light / dark を作る...などできますね！
mode:
- PC
- SP
1.3 Local Variables に設定
サクサク登録していきましょう。
変数はプログラミングお馴染み、型と言うのがあります。文字を入れる箱、数字を入れる箱、と言った具合です。
Local variables が持つ型:
- Color : カラーコードが入る
- Text : プレーンなテキストが入る
- Number : 数字が入る
- Boolean :
今回は、family と weight には文字列、それ以外は数字の型を使っていきます。
font-weight は、font によって 'Bold' のようなテキストか、'700' のような数字か分かれるので、ちょっと注意と思いました。
操作については、なるべく楽するためにショートカットキーを覚えるのが良いでしょう⌨️☝️
ショートカットキー:
- Shift + Enter : 選択中の行を複製できる
- Tab : 右隣のセルに移動（スプシと一緒）
※ Variables はただの変数の箱なので、どこに設定する変数ですよー！というのを設定から絞り込みできます。たくさんの数字から選ぶの大変ですからねー。この設定は複製先の変数に引き継がれるので、先にやっておくのが効率良いと思います！（わたしは忘れていて、一個ずつぽちぽちする羽目になりました😇）
1.4 レスポンシブタイポグラフィの挙動確認
皆さんがいつもデザインしている画面を選択し、右のレイヤーパネルから、Typography の mode を設定します。そして、PC を SP に変更すると...
じゃーん！
若干分かりにくいですが、SP用に少し font-size が小さくなった画面を一瞬で作ることができました！
1.5 どの辺が楽になるのか？
ワークフローのどの辺が楽になるのかと言うと...
▼ レスポンシブタイポグラフィをデザインする（before）
1. PC画面からSP画面を複製
2. 全ての font-size を手動で全て再設定
3. 作る画面の分だけ繰り返す...
▼ レスポンシブタイポグラフィをデザインする（after）
1. PC画面からSP画面を複製
2. Frame の mode を切り替える // ここが楽になる
3. 作る画面の分だけ繰り返す...
Variables が設定された Text Panel はこんな感じの見た目に。
1.6 どんな命名がいいのか？
どんな命名がいいのか迷いますが、一旦以下のような見え方になりそうです。
↓ パターン1:
font/family/english
- 「font/ ... 」みたいにすると視認性若干悪い... space が欲しくなる。
- コレクション名は入らない（今回で言うと Typography は省略される）
- Group 名からは全て表示される
↓ パターン2:
font-family/english
- css の property 名に合わせてみたら、少し分かりやすいかもしれない
- Group 名が長くても前半が省略されるので、weight か height かわからない...みたいなことにはならなさそう
- 英語だと最低でも、13文字くらい省略されずに入りそう
↓ ちなみに、dev-mode での見え方:
エンジニアさんが見やすいのか気になりますね〜ということで検証。
- スネークケースが Figma の区切り文字と被って読みにくいので、命名規則とかは lineHeight とかにした方が綺麗かもしれない
- コードと連結させて使っている方は、既存コードに合わせましょう、かな。
↓ うん、キャメルケースの方が分かりやすい（特に React だと CSS はこの書き方の方が馴染みありますね）
2.グラデーション
力尽きたので、雑にやり方だけ紹介。
1. 四角があります
2. いつも通りグラデーションモードに切り替えます
3. カラーパレット押下→ライブラリタブに切り替え
4. グラデーションで使いたいカラーを選択。これで完了！
5. グラデーションの登録は Local Variables ではできません。これまで通り、Local Styles に登録します。イラレのアセットパネルみたいなものでしょうか。
参加してくださった皆さん、ありがとうございました！
自分も勉強になりましたー！！
またやりましょう！！
参考URL