デザイントークンの構造を調べてみた
はじめに
みなさん、こんにちは！新米デザイナーのkoです。現在はデザインシステムについて学びながら、自分のメモとしてまとめていこうと思っています。未経験からデザインシステムを始める方々にも役立つ情報をシェアしていきますので、どうぞよろしくお願いします。
今回はまずデザインシステムについて勉強している時によく聞く「デザイントークン」について。
デザイントークン（DeisgnToken）とは
Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale.
W3C（ウェブの標準化を推進するための国際的なコンソーシアム）の定義によりますと、トークンはデザインシステムにおいて不可欠なパーツだと定義されています。いわゆるデザインを表現するための仮想的な最小単位です。具体的に、色、タイポグラフィ、スペーシングなどの要素が挙げられます。
そして、トークンを持つことには、以下三つのメリットがあります。
・デザインシステムを効率的に管理する
・開発過程中のコミュニケーションをよりスムーズにできる
・デザインの高い一貫性を維持する
最初はわかったようでわからない感じだったので、トークンというもの具体的にどういう風に使われているんだろうについて調べてみました。
簡単に言うと、トークンというのはあだ名みたいな役割を果たしてます。
デザイナーとエンジニアのコミュニュケーションをより円滑にすることができます。以下の動画でとてもわかりやすい例を挙げてくれていますので、興味ある方ぜひ見てみてください。例えば、緑をコード上そのまま #00704A で書くではなく、starbucks-brandという名前をつけます。そうすると、今度こちらの緑をより暗い緑に変更したい場合このカラー使ってる場所のコード全部修正する必要はなくなります。
https://youtu.be/wtTstdiBuUk?si=V4iEzCBq3Bl9oZ26
デザイナーが各トークンの定義や数値を決めて、エンジニアがそのトークンを使って開発するイメージです。
デザイントークンの構造
デザイントークンを定義していく際に、よく使われている分類方法があります。それはグローバルトークン（Global Token）とエイリアストークン（Alias Token）です。
前者は値を表すもの意味を持たせない（例：#000000→Black500）、そして後者は意味を表すものとして使われていることが多いです（例：Black500→font.primary）。こうすることで、似たようなカラーがたくさんあっても、名前だけ見ればどのコンポーネントに、どういう機能を果たしているかがわかります。さらにコンポーネントごとにトークン指定する階層作るデザインシステムもよくあります。
https://atlassian.design/tokens/design-tokens
トークンの定義は難しいですが、いろんな参考事例を見て階層ごとに解けていくことで命名のロジックなどとても勉強になりました。最後は参考になったデザインシステムのリンクを貼っていきます。
この記事が気に入ったらサポートをしてみませんか？