Pixso 2.0： デザイントークン

何十ものデザイン要素で、同じ色や余白を何時間もかけて更新したことはありませんか？Pixso 2.0のデザイントークンが、その面倒を終わらせます。これらのスマートで再利用可能なデザイントークンを使えば、色、数値、テキストなどを一度設定するだけで、あらゆる場所に同期できます。

デザイントークンとは？

デザイントークンは、ワークフローを効率化し、デザイン効率を向上させ、一貫性を保証し、コラボレーションを強化し、拡張性と総合的なデザイン品質を高めながら、適応性と対話型のデザインを構築するための強力なツールです。

デザイントークンの主な利点

・再利用可能：色、数値、テキスト、ブーリアンなどのプロパティを要素に割り当てられます。

・切替自在：異なるテーマ間をシームレスに切り替えられます。

・動的更新：トークンを適用したすべてのインスタンスに変更を自動同期。デザインシステムの更新にかかる時間と手間を削減します。

デザイントークンの適用例

・ライト/ダークモードやその他のテーマを切り替え

・各種レイアウトを調整

・表示言語を切り替え

・タイポグラフィへの適用

デザイントークンの対応タイプ

Pixsoは、豊富なデザインシーンに対応する4つのトークンタイプ（カラー、数値、テキスト、真偽値）を備えています。

・カラートークンは、オブジェクトの塗りつぶしや線に付与することができます。

・数値トークンは、レイヤーの幅や高さ、余白、角丸などの寸法を定義するために使用されます。

・テキストトークンをテキストレイヤーに適用することで、反復コンテンツやローカライゼーションの管理が効率化されます。

・ブーリアントークンは、レイヤーの表示/非表示の切り替え操作に利用できます。

トークンを適用するには？

デザイントークンは、そのタイプに応じてデザインパネルの異なるセクションに表示され、アクセス可能です。以下の手順でご利用ください：

1. オブジェクトへのデザイントークン適用

キャンバス上でレイヤーを選択し、右側のサイドバーを使用します。

カラートークンの場合： 「スタイル」アイコンをクリックします。

数値・テキスト・ブーリアントークンの場合： トークンアイコン（六角形）をクリックするか、テキスト/数値入力フィールドのドロップダウンメニューを開きます。

2. コンポーネントにおけるデザイントークン

「カラー」や「スペーシング」などのトークンセットを使用してシェイプコンポーネントを構築します。要素を選択し、「Colors」コレクションからカラートークンを選択してください。

「Spacing」セットの数値トークンを、カード内のオートレイアウトのパディング値とスペーシング値に適用します。

3. テキストにおけるデザイントークンの活用

テキストトークンをテキストレイヤーにバインドすることで、コンテンツの一元管理が可能になります（例：デザイン内で繰り返し使用されるテキストの一括更新）。

また、テキストトークンはフォントファミリーやウェイトなどのタイポグラフィ設定にも使用できます。

テキストを選択し、パネルからテキストトークンを適用するだけで、変更は関連するすべてのインスタンスに自動同期されます。

4. タイポグラフィトークン

テキストトークン（例：フォントファミリー）と数値トークン（例：フォントウェイト、サイズ）を統合活用することで、一貫したタイポグラフィシステムを標準化できます。

5. グリッドにおけるトークン

フレームを選択し、トークンを使用してレイアウトグリッドのパラメータを動的に調整できます。

6. エフェクトにおけるデザイントークン

トークンをエフェクトプロパティにバインドできます。例えば、影の値をトークンに関連付けることが可能です。

影がトークンにバインドされたカードを別のコンテナにドラッグすると、影が消失する場合があります（トークンがライトモードでのみ適用されるように設定されているため）。

7. グラデーションにおけるデザイントークン

カラートークンをグラデーションの個々のノードにバインドすることも可能です。

1. レイヤーを選択し、「塗りつぶし」設定パネルを開いて、グラデーションの開始点を選択します。
2. 「トークン」タブに切り替え、「グラデーション」で検索し、「グラデーション開始点」を選択して適用します。

Pixso 2.0のデザイントークンは、デザインの一貫性維持と変化への適応を、かつてないほど容易にします。これにより、ワークフローが効率化され、より強固なデザインシステムの構築が可能になるのです。