デザインシステム

パーツの色、種類まで一貫して構築すること。Figmaで実装することが多い。

核となる要素

デザインガイド

ブランドコンセプト、デザインの指針

スタイルガイド

フォント、ロゴ、カラーなど。

• テーマカラーの選定
• 色のグラデーションを選定
• ロゴのパターン
• タイポグラフィ
• 文字の大きさ

コンポーネントライブラリ

ボタン、ナビゲーション、タブなど。

カラー

1. プライマリーカラーの作成
2. スタイル作成：Foundation: Color generator
3. バリアブル作成：Styles to Variables：作ったらスタイルは不要なので消しても良い。
4. カラーチャート割り当て

バリアブル

• モードが使える。（ライト/ダーク）
• 一つの値(#ffff)

タイポグラフィ

Peppercornが便利

コンポーネント

以下を活用すること。

• コンポーネントプロパティ
• モード