アプリ開発にデザイントークンを導入した話 〜「グレーって20色あんねん」状態だったUIデザインが"ととのう"まで〜 by 河野 穣

デザイントークンとはデザインを構成する基本要素に対してトークンという呼び名を付与して管理する手法のことです。
国内では2022年にデジタル庁が公開したデザインシステムにおいてデザイントークンが導入されたり、その翌年2023年にFigmaにVariablesが導入されたことで注目を集め、実際の開発で活用される事例が増えています。筆者が担当するプロダクトでも、以前から開発チーム内でエンジニア・デザイナー間のコミュニケーションに課題を抱えており、デザイントークンの設計・導入に踏み切りました。このトークでは、すでにリリースされているアプリの開発プロセスの中にデザイントークンを導入する実例を紹介し、開発プロセスへ与えた影響をアプリ開発エンジニア・UIデザイナーの両視点から解説していきます。

具体的に以下のポイントに焦点を当ててお話します。

・ 画面を観察を軸にしてデザイントークンを設計するプロセス
・ デザイントークンの効果的な階層設計
・ デザイントークン導入によってエンジニア・デザイナーの両視点からのコミュニケーションへの効果
・ アプリ開発経験のあるエンジニアがデザイントークン設計をリードするときに意識したこと

このセッションを通じて、デザイントークンを活用し、アプリ開発が"ととのう"ための知見を少しでもシェアできればと思います！