🦁

セマンティックトークンの構造化は Animal Kingdom (アニキン) 手法がおすすめ

2023/12/13に公開

デザイントークン

セマンティックトークン

animalkingdom

アニキン

tech

この記事は Magic Moment Advent Calendar 2023 13 日目の記事です。

はじめに

株式会社 Magic Moment でフロントエンドエンジニアをしている清水です！
今日のアドベントカレンダーでは、セマンティックトークン を定義するのに、私の中で最強の手法「アニキン」についてお話しさせていただきます！

デザイントークン

弊社では、デザイントークンを プリミティブトークン と セマンティックトークン の２種類に分けて構成しております。

プリミティブトークンとは？

値を表すトークンです
原始的な存在です

セマンティックトークンとは？

意味を持つトークンです
必ずプリミティブトークンを代入します

こちらの セマンティックトークン の定義に関して、アニマルキングダムを採用しました。

アニマルキングダム

アニマルキングダムとは？

アニマルキングダムを一言で表すと「動物界の分類」になります。
動物界の分類のようにトークンを構造化する手法を、アニマルキングダム（アニキン）と呼んでいます。

参考: style-dictionary

分類例

哺乳類
└── ネコ科
   └── ライオン
   └── トラ
└── イヌ科
   └── オオカミ
   └── ハイエナ

アニマルキングダムは カテゴリ から始まる階層構造になっており、階層の下に行くほど、より具体的にその カテゴリ の意味が明確になっていきます。

階層構造

Category
└── Type
   └── Item
      └── SubItem
         └── State

アニキンって何がいいの？

弊社では セマンティックトークン に統一感を持たせようとして、上手く当てはまらないパターンに悩まされることがありました。

例えば、上で記載した分類例に当てはめると、ネコ科 の下には ライオン が存在するが、イヌ科 の下には ライオン は存在しない。
もう少しトークンに寄せて例えると、Button の下には Disable が存在するが、Table の下には Disable は存在しない。
といったように、統一できない問題に当たりました。

しかし、それで良いのです！
ネコ科 と イヌ科 は別物として考える方が扱いやすい。そう教えてくれたのがアニキンでした。