【Framework】FigmaでVariablesを使用したTypographyの設定やってみた

こんにちは。hacomonoのプロダクトデザイナーのかんちゃんです。

待望のTypographyの設定でVariablesが使用できるようになりました🎉
公式では下記のような投稿がXであり、大変盛り上がりの様子。

We were dropping hints about typography

Now our typography drop:
→ Font family
→ Font weight and style
→ Font size
→ Line height
→ Letter spacing
→ Paragraph spacing and indent pic.twitter.com/B7bzOnVGnF

— Figma (@figma) April 16, 2024

直近にFigma主催のデザインシステムイベントであるFramework by Figmaがあるため、それに合わせたリリースだと思われます。(海外で先行して開催)
早速使用してみたので、気になった事と一緒にシェアしたいと思います。

TextのVariablesの反映できる箇所

サイドメニュー内のTextの項目で、反映できるのは下記になります。

• Font family

• Font weight and style

• Font size

• Line height

• Letter spacing

• Paragraph spacing and indent

それぞれの項目にvariableのマークが追加

Variablesに値を設定

上記で挙げた項目ごとにVariablesの値を作成していきます。

テストで作成したvariables

注意点としては、項目によって読み込む値の種類が違うことです。うまく読み込まれないと思ったら確認してみてください。
また、設定した値をText contentsのみにNumber scopingの設定しておくのがおすすめです。

Numberで設定

• Font family

• Font weight and style

Stringで設定

• Font size

• Line height

• Letter spacing

• Paragraph spacing and indent

Text Styleに反映する

上記で設定した項目をText Styleに反映していきます。

設定中のイメージ

Text Styleに反映した状態

Text Styleに反映せずとも値の利用はできますが、合わせて使用することで運用コスト軽減につながるのでおすすめです。

普通のテキストにも反映は可能

まとめ

Variablesを使用したTypographyの設定は個人的にめちゃくちゃ待望の機能だったので嬉しいです🙌
今後は％にも対応されるのを期待しています！