カラートークンは現在オープンベータ版となっています。

<aside> 📎 備考 2024年7月17日以前に作成されたライブラリは、カラートークンを使用するためにトークンライブラリに変換する必要があります。この変換はライブラリのSettings（設定）で行われ、元に戻すことはできません。

</aside>

デザイントークンとは？

デザイントークンは、デザインシステム内の色、タイポグラフィ、スペーシングなどのデザインプロパティを定義する変数です。特定の値をコンポーネントに直接入力するのではなく、システム全体で一元的に管理・更新することができます。

クロスプラットフォーム開発における重要な課題は、オペレーティングシステムによって使用されるスタイルプロパティやフォーマットが異なることです。静的なプロパティを使用する代わりに、デザイナーやエンジニアは、たとえばUxpin.cta.primaryのようなトークンを参照し、必要なすべてのカラーコード（HEX、RGB、RGBA、8進数など）を表します。これにより、プラットフォームやプログラミング言語間で一貫した色が保証されます。

デザイントークンのメリット

1. 信頼できる唯一の情報源：デザインとコードの一貫性を維持するための一元化されたリポジトリで、すべてのデザイナーが同じスタイルとプロパティを使用できるようにします。
2. 管理の簡素化： さまざまなプラットフォームや環境において、UI要素の実装、管理、更新が容易になります。
3. コラボレーションの向上： デザイナーと開発者間の共通言語を可能にし、コミュニケーションとチームワークを強化します。
4. 拡張性： 冗長な作業を行うことなく、複数の製品やプラットフォームでスケーラブルなデザイン変更を行うことができます。
5. 柔軟性： トークンを変更することで、コンポーネント単位ではなく、新しいデザイントレンドやブランドのアップデートに素早く対応できます。

カラートークンの使用

カラートークンはデザインシステムライブラリに不可欠な要素で、ライブラリのカラーセクションから設定できます。

新しいライブラリを作成したり、既存のライブラリにアクセスするには

1. Design System Librariesに移動するか、 ⌘ + 2 を押して開きます。

2. パネルの下部で、+ New library をクリックします。

3. ライブラリが作成されたら、カラーセクションに移動します。

カラートークンの追加

カラートークンをライブラリに追加するには、2つの方法があります：

• 選択された要素から - キャンバス上で1つ以上の要素を選択し、ライブラリパネルで「+Add」をクリックすると、すべての色が追加されます。