Adobe XDでデザインする場合、カラー、文字スタイル、コンポーネントがぐちゃぐちゃになってしまいませんか？ラフっぽいところから構成案になって、しっかりしたデザインまで1つのファイルを触っていると、アセットの中が整理できずにいませんか？デザインからスタートすれば、新規ファイルで綺麗に持っていけるかもしれないんですけどね。（言い訳）

コンポーネントに関しては、書き出したい部分がそのままファイル名になってくれるので、書き出し用は比較的に整理されている気がします。後、インクルードでもマスターとして使うので、名前は綺麗にしている気がします。しかし。文字スタイルはひどいです。これは少し、アセットを利用して自分スタイルを作ればクリアできそうなので、後で試してみようと思います。

デザイントークンの重要性

一人で構成作って、一人でデザインの仕事をしていると、多くのデザイナーがいる会社と違って、自分だけわかってればいいやと思ってしまいますが、実はコーダーに渡すときの共通言語がないと、「あの濃い方の青」「ちょっと淡い紫のほう」とか似たような色がいっぱいある時、指示が伝わりづらくなります。特にメインが青のサイトでリンク色も少し違う青で、さらに濃い青も使っててとなると、正確に伝わらない時もあります。また、ずっと同じコーダーとであれば問題ないですが、初めてのコーダーさんとなると大変です。そこで、デザイントークンが大事になります。
以下のようにデザイン要素に名前をつけると、コミュニケーションが取りやすくなります。

「Primary」とつければ、そのサイトにとって最も重要な色になります。「secondary」はその次によく使われる色になります。「linki-color」はリンク色で、その他に関しては、適当なネーミングつけてもすぐに忘れて、デザイントークン乱れてしまいますので、色＋数字のネーミングの方が、つける時に悩まずに済みますし、後で並び替えやすいですね。また数字は色の明度よって数字を上げていくルールにしてパネル上でも並び替えておけば、とても整理しやすいと思います。

コーディング上がった後も「BLUE-100をあそこにテキストにも使って」と伝わりやすですよね。
デザイントークンはフォントサイズ、ドロップシャドウなどにも有効です。
まずはカラーを整理できれば、自ずとテキストサイズや行間も整理したくなること間違いないです。
デザイントークンはAdobe XDに限らず、illustratorやphotoshopでデザインする際も必要です。