Open Hidetaro7 opened 7 months ago
タイポグラフィー
現状について確認すると、以下の組み合わせをローカルスタイルとして管理している
バリアブルの範囲の設定をFigmaで確認すると以下が取り扱える
字体(書体、級数、ウエイト、行間、斜体等)を個別に扱えることをメリットと考えて、ローカルバリアブルにて管理することにしたい。
line-height のユーティリティである leading は数値のみしかバリアブルとして扱えない。 よって、 leading-tight: 125% といった相対値は現在のところ使えない。
https://forum.figma.com/t/allow-percentages-for-line-height/69692/80
一旦、自動の値がデフォルトとして使えるようになると考えたら実用上さほど不便でもなさそうな気がするがどうだろうか...
font-weight については、 数値型の場合900
といったもので、文字列型だと bold
などが使えるようだ。
実用性においては、書体によって semi bold
ではなく demi bold
などといったようにその時々で呼び方が違う。
また、そのウエイトが存在するかわからないのにバリアブルを指定するのも混乱する。
操作してみてわかるが、バリアブルを探すのにクリックする手間がかかる。実際その書体に見合ったウエイトがポップアップされるのが一番正しいわけなのと、実用性があまりないようなので、 font-weight については一旦取り扱わない。
font-size を表す text-* については、 Figmaファイルすべてを修正するのは相当な労力を要するため、
これだけの変更にとどめて line-height の問題が将来 Figma から解決された場合、あらためてどのように運用するべきか検討することにしたい。
テキストについて、 急な破壊的変更を行うより、現在のローカルスタイルは生かしたまま、 ローカルスタイルを使わずとも フォントサイズに直接、 tailwind ユーティリティ(text-sm など)を使うことができるという運用でしばらく進めたいと思います。
にてレビューをリクエストしました。 @knokmki612
font-size を表す text-* については、 Figmaファイルすべてを修正するのは相当な労力を要するため、
当面互換性を持たせる目的で廃止しないでおくのは賛成です
Figmaが今後、ローカルバリアブルを正式機能としてリリースする予定であるローカルバリアブルのほうが、今後より多くの状況に対応できるように思える。
https://help.figma.com/hc/ja/articles/14506821864087
現在、タイポグラフィーと色に関するトークンをローカルスタイルに登録している。 この問題点として、テキストスタイルで定義したプロパティの一部に変更を加えたい場合、スタイルを外すしか方法がない。 例えば行間だけを変更したい場合などがそれにあたる。
https://help.figma.com/hc/en-us/articles/4406787442711#variables
ここのComing soon では、
とある通り、テキストスタイルの一部にテキストバリアントによって見た目を変更できるような期待ができる。(と感じている)
ローカルスタイルとローカルバリアントの棲み分けがよくわかっていないので、気づいたことがあればコメントして、この先の方針を決めていくと良い気がしている。