Open8

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

ちあきちあき

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

ちあきちあき

WordPressのデザインシステムとしては

  • タイポグラフィ
  • レイアウト

がある。
これらはデザインファイルとしてあるのとないのとでは全然違うのでこれ用のテンプレートを用意する。

ちあきちあき

タイポグラフィは

  • フォントファミリー
  • フォントサイズ
  • フォントウェイト
  • 行の高さ
  • 文字間隔
  • 大文字・小文字(基本日本語サイトなら気にする必要なしかな)

が決められるので、各項目を準備

ちあきちあき

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

ちあきちあき

タイポグラフィのサイズをトグルで選択したいなら5件までに収める。

それ以上はセレクトボックスになる

ちあきちあき

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