Open8
WordPressのデザインシステム用Figmaをかんがえる

デザインがない(現行のサイトをそのまま移行するパターンとか)ときに、ブロックテーマなりハイブリッドテーマにしたときのデザインシステムがないと結構しんどいなーと思ったので、自分なりのデザインシステム用テンプレートを考えてみる

とりあえず参考に読む

WordPressのデザインシステムとしては
- タイポグラフィ
- 色
- レイアウト
がある。
これらはデザインファイルとしてあるのとないのとでは全然違うのでこれ用のテンプレートを用意する。

タイポグラフィは
- フォントファミリー
- フォントサイズ
- フォントウェイト
- 行の高さ
- 文字間隔
- 大文字・小文字(基本日本語サイトなら気にする必要なしかな)
が決められるので、各項目を準備

ダミーテキストどうしようかなーって思ったけど、ChatGPTにやってもらえばいいのか!

タイポグラフィのサイズをトグルで選択したいなら5件までに収める。
それ以上はセレクトボックスになる

こんなかんじかあ?

余白は7つまでを上限にする。それ以上だとセレクトボックスになる。
フォントと違ってそこまでたくさんいらない(あったら逆に使いにくさが上がると思う)