概念の学習へ戻る
組み立て · 総合演習
デザインシステムコンポーザー
右のパネルでトークンを変えると、左のWebページが即座に反応します。左の要素にマウスを重ねる、またはフォーカスすると、その要素に影響するトークンがパネルで強調されます。
このツールで練習できること
デザインシステムの核心は、画面ごとに値を個別に決めるのではなく、色・間隔・タイポグラフィといった決定をデザイントークンにまとめ、一か所から統率することにあります。コンポーザーは、27のトークンが13の画面領域に同時に反映される過程を、実際に操作しながら身につける練習場です。
プレビューの要素にマウスを重ねる、またはフォーカスすると、その要素に影響するトークンが右のパネルで強調されます。一つの値がどこまで波及するのか、原因と結果をたどってみましょう。組み立てた内容はこのブラウザに自動保存され、次回の訪問時に続きから始められます。