アイコンをデザイン トークンとして実装するにはどうすればよいですか?

デザイン トークンについて話すとき、アイコン トークンはあまり注目されませんが、アイコン トークンは非常に強力な場合があります。

他の種類のトークンと同様に、アイコン トークンはレベル 1 とレベル 2 である必要があり、レベル 3はオプションです。

アイコン トークンに関して言及する価値のある重要な利点が少なくとも 2 つあります。

1. すべてのアイコンの役割をより厳密に検討。
2. より構造化され、スケーラブルで保守しやすいアイコン セット。

現在開発中の製品にこれらのアイコンを選択すると想像してください。

どのように名前を付けますか?

少なくとも一部の人は意味/役割/機能を選択すると思います:ホーム、お気に入り/いいね!、ゴミ箱、編集、通知。

これはまったく間違っているわけではありませんが、型にはまった方法ではありません。

それでは、デザイン トークンの第 1 レベルと第 2 レベルを見てみましょう。

1.参照トークン

最初に武器を選び、モンスターは後で来る。

ここで選択を確立します。例:

• この赤い #ff0044 を選択し、「color.chills」と呼びます。
• Comic Sans を選択し、「font.lovely」と呼びます。

• 私はこの家を選び、「icon.100」と呼びます。

• 私はこの家を選び、「icon.house」と呼びます。

ご覧のとおり、色やアイコンなどの特定の参照トークンの命名には 2 つの「流派*」があります。

*実際にはそのような学校はありません。参照アイコンに名前を付けるためによく使用する 2 つの方法に、より洗練されたタッチを加えたかっただけです。

「セマンティック」スクール：

• 私はこの家を選び、「icon.house」と呼びます。
• 私はこのハートを選び、「icon.heart」と呼びます。
• このゴミ箱を選択し、「icon.trash-can」と呼びます。
• この鉛筆を選び、「icon.pencil」と名付けます。
• このベルを選択し、「icon.bell」と呼びます。

• 私はこの家を選び、「icon.100」と呼びます。
• 私はこのハートを選び、「icon.120」と呼びます。
• このゴミ箱を選択し、「icon.155」と呼びます。
• 私はこの鉛筆を選び、「icon.156」と名付けます。
• このベルを選択し、「icon.172」と呼びます。

長所と短所

「agnostic」が抽象的すぎて伝達したり記憶したりできない場合、「semantic」は参照トークン (別名ベース トークン、プリミティブ、グローバル トークン) のルート不可知論に反します。

参照トークンは、通常、「font-weight.100」または「space.400」という名前が付けられます。色やアイコンに「color.blue」や「icon.house」という名前を付けるのは、分類法に当てはまりませんよね？

「icon.100」ではどんなアイコンでも内部に放り込むことができますが、「icon.house」は 1000 倍直感的に操作できます。それでも、私は最初のオプションである「不可知論的」を使用することを好みます。理由は次のとおりです。

参照トークンを空のボックスにしたい。私が中に入れたものは、箱を形作るべきではありません。今日、これらのボックスの 1 つをハートのアイコンで埋めたら、明日は名前の競合なしに星に変更できるようにしたいと考えています。

「意味」は、トークンの第 2 レベルである「システム トークン」から始まります。

2. システムトークン

ここで、物事がより興味深いものになります。決定です。

決定とは、次のことを意味します。

• Homeのアイコンとして「 rt.icon.house」または「rt.icon.100 」(rt = 参照トークン)を使用することにしたので、「st.icon.home」 (st = システム トークン) を使用します。
• Favoriteのアイコンとして「 rt.icon.heart」または「rt.icon.120 」を使用することにしたので、「st.icon.favorite」です。
• Deleteのアイコンとして「 rt.icon.trash-can」または「rt.icon.155 」を使用することにしたので、「st.icon.delete」です。
• Editのアイコンとして「 rt.icon.pencil」または「rt.icon.156 」を使用することにしたので、「st.icon.edit」です。
• Notificationsのアイコンとして「 rt.icon.bell」または「rt.icon.182 」を使用することにしたので、「st.icon.notifications」です。

開発者や他の設計者に通知するために使用するのは、システム トークン、つまり「ジョンさん、モーダルには st.icon.close を使用してください」という決定である可能性があります。

1. すべてのアイコンの役割をより厳密に検討。

さて、私の 2 つの主なメリットに戻りましょう。この簡単な演習の後、アイコンの選択と割り当てが非常に正確で綿密なプロセスを経ていることがわかります。

セットに含めるアイコンを慎重に選択するだけでなく、それらに単一のセマンティック機能を割り当てて、冗長性と矛盾を減らし、より効率的な選択と決定に導きます。

2. より構造化され、スケーラブルで、保守しやすいアイコン セット。

この利点を説明するために、いくつかの繰り返しの状況を思い出してみましょう。

課題1：十字のアイコンが気に入らず、細いものに置き換えたい。

解決策:参照トークンを開き、内側の形状を置換/調整します。

結果:その参照トークンを指すすべてのシステム トークンが更新されます。

• 削除(要素を削除するアクション用)
• 削除(要素を削除するアクション用)
• 閉じる(要素を閉じるアクション用)。
• エラー(エラー メッセージと共に)

解決策:新しい参照トークン「icon.trash」を作成し、システム トークン「icon.delete 」を更新して、新しい「icon.trash」をターゲットにします。これにより、Remove、Close、および Errorがそのまま保持されます。

結果 1: 「 icon.delete 」を使用するすべてのコンポーネントにゴミ箱が表示されます。

ご覧のとおり、この潜在的な柔軟性はすべて、ある時点で役に立ちます。一方、先行作業のコストはそれほど大きくありません。

要点をまとめると…

1 つの rt.icon を変更して、そのアイコンを対象とするすべてのシステムおよびコンポーネント トークンに影響を与えることができます。EGハートのアイコンを星に変更します。

1 つの st.icon を変更して、そのセマンティック要素を対象とするすべてのコンポーネント トークンに影響を与えることができます。EG 「お気に入り」は星で表され、ハートは「いいね」に使用されます。

1 つの ct.icon を変更して、特定のコンポーネントのみに影響を与えることができます。EGダーク モードのカード コンポーネントは、「お気に入り」に、ライト モードで使用されるアウトライン スターの代わりに塗りつぶされたスターを使用します。

figmaトークン

Figma Tokens プラグインは最近、「アセット」のサポートを開始しました。これを使用すると、ロゴ、画像、図像をリモート リポジトリに簡単に保存し、プラグインを介してリンクすることができます。これにより、ワンクリックで Figma の形状に画像を追加でき、リビング スタイル ガイドがその保存場所を確実に知らせることができます。

それでも、Figma Tokens チームによると、まだ進行中の作業があるため、この機能を使用するには時期尚早かもしれません。

「現在、画像ソースには独自の CORS (Cross-Origin Resource Sharing) 検証が必要です。一部の Web サイトでは既に実装されていますが (Unsplash など)、それ以外の場合は CORS プロキシの背後に置くことができます。CORS の詳細については、こちらを参照してください。今後のリリースで CORS プロキシを追加する予定です。」記事全文はこちら。