28 今やったこと l UIの構成要素であるボタンからビジュアルな特徴を表す部分を分離 l その部分に名前をつけ、特定の値を設定 l その名前を使ってUI構成要素のビジュアルな特徴を適⽤する l 名前はそのまま、値を変える l その結果として画⾯のUI要素（ボタン）の⾒た⽬が変わる デザイントークンは ビジュアルなデザインの最⼩構成要素 であり、ビジュアルデザイン属性を保存するための名前付き の要素である。 デザイントークンに⾊のhex値やスペースのPixelの値など、 ハードコードされる値を格納して使うことで、 UI開発にお けるスケーラブルで安定的なビジュアルシステムを維持する
39 l デザイントークンの定義 l デザイントークンの体系化 l デザイントークンの共有 l デザイントークンの管理プロセスを定義 l デザイントークンを利⽤するUIコンポーネントを実装・利⽤ l 実装技術に依存しないデザイントークンの定義 デザイントークンを最⼤利⽤するためには ⽬的とレベルを考慮した デザイントークンの定義 https://spectrum.adobe.com/page/design-tokens/
40 l デザイントークンの定義 l デザイントークンの体系化 l デザイントークンの共有 l デザイントークンの管理プロセスを定義 l デザイントークンを利⽤するUIコンポーネントを実装・利⽤ l 実装技術に依存しないデザイントークンの定義 デザイントークンを最⼤利⽤するためには デザイントークン Web⽤のスタイル定義 iOS⽤のスタイル定義 アンドロイド⽤の スタイル定義 変換器 ビジネスドキュメント JSON / YAML / XML
41 l デザイントークンの定義 l デザイントークンの体系化 l デザイントークンの共有 l デザイントークンの管理プロセスを定義 l デザイントークンを利⽤するUIコンポーネントを実装・利⽤ l 実装技術に依存しないデザイントークンの定義 デザイントークンを最⼤利⽤するためには デザイントークン Web⽤のスタイル定義 iOS⽤のスタイル定義 アンドロイド⽤の スタイル定義 変換器 ビジネスドキュメント JSON / YAML / XML 対象はソフトウェア だけではない︕
今⽇の内容のサマリー l デザイントークンの活⽤でデザイナーとエンジニアのコラボレーションが円滑に l デザイントークンを利⽤するUIコンポーネントを作って、それを再利⽤することで⼯数削減、 品質向上︕ l デザイントークンは実装技術に依存しないことが望ましいが、まあ、最初は実装依存でも問 題ない。あまり無理しない。 l デザイントークン管理と運⽤のルールやプロセスの検討が必要 l デザイントークンの管理はブランド管理 ⇒ ビジュアルデザインの課題はこれで対応可 l デザイントークンからデザインシステムへシームレスに移⾏しよう︕
fixel_admin
chima
ryusukekogetsu
m_ma2i
haru860
nutionbypersol
rakus_dev
freee
ymrl
ncdc
uxaustralia
moco1013
ujki
dotmariusz
yeseniaperezcruz
davidbonilla
addyosmani
kastner
paulrobertlloyd
3n
geeforr
speakerdeck
cromwellryan
notwaldorf
holman