STUDIO上にデザインシステムのページを作成し、コピペして使う。

先に縛ることで迷わず、UIの一貫性も担保でき、結果的に早く作れる。

※無料プランで非公開にできない場合は、悲公開の別プロジェクトに作る。

作るもの

• color
• typography
• button
• wrapper & container
• spacer

color以外の要素はブレイクポイントごとのサイズも指定しておく。
デスクトップサイズの表示で構築を進めても、8割ほどスマホサイズの表示でも成立するのでラク。

特に横幅を揃えるcontainerや縦のリズムを作るspacerがオススメ。
各パーツごとに空白を調整しようとするとSTUDIOのGUIでクリックする数が増えるが、手間が減る。
spacerはシンボルにしても良い。

STUDIOではなくFigmaに構築を寄せるのがベスト

FigmaToPluginで自動レスポンシブやると、一貫性が調整しづらくなる気がしている。要検証

各ブレイクポイントごとにデザイン作って、
出し分けしちゃうのが早そう

https://x.com/miyaponmm/status/1737148911901643226?s=20