記事 —
Figmaとデザイントークンでデザインシステムをどうつくるか
コンポーネントの粒度とトークン設計の実際
デザインシステムを作ると決めたとき、最初に直面するのはコンポーネントの粒度の問題です。細かく作りすぎると管理が煩雑になり、粗く作りすぎると使い回しが効かない。この問題に対するPixel Citadelの考え方を整理します。
コンポーネントの粒度をどう決めるか
コンポーネントは「ページ単位」ではなく「ユーザーの操作単位」で定義することを基本にしています。ボタンはページごとに作るのではなく、サイズ・状態・アイコンの有無の組み合わせで一つのコンポーネントとして管理します。
この考え方を徹底すると、コンポーネントの総数は増えますが、管理の複雑さは下がります。なぜなら、変更が必要なときに修正する場所が一つで済むからです。
デザイントークンの設計
デザイントークンは、色・フォントサイズ・余白・角丸などの値をJSONで管理する仕組みです。Figmaのバリアブル機能を使うことで、トークンをデザインファイル内で直接参照できます。
トークンの命名規則は、フロントエンドチームと事前に合わせておくことが重要です。Figmaで「color/primary/500」と定義したトークンが、CSSでは「--color-primary-500」として使われる形にすることで、デザインと実装の間の翻訳コストが下がります。
Storybookとの連携
デザインシステムをStorybookと連携させる場合、コンポーネントの状態の名前をFigmaとStorybookで統一することが最初のステップです。Figmaで「disabled」と定義した状態が、Storybookでは「isDisabled」になっていると、引き渡し後に混乱が生まれます。
Pixel Citadelでは、コンポーネントの仕様書をNotionで管理し、FigmaとStorybookの両方にリンクを貼る形をご提案しています。この形にしておくと、実装フェーズでの確認作業を減らしやすくなります。
デザインシステムの構築についてご相談がある場合は、サービスのページで内容をご確認のうえ、お問い合わせページからご連絡ください。
Pixel Citadel · デザインシステム · Figma · デザイントークン · Storybook