UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【デザイン】StyleDictionaryとは

去年の日経のアドベントカレンダーの記事で気になっていたStyleDictionaryについて調べた

hack.nikkei.com

Style Dictionaryとは

github.com

Style Dictionaryとは、AWSオープンソースで一ヶ所で定義されたデザイントークンを使用して様々なプラットフォームに合わせたファイルにエクスポートするツール

開発が進むにつれてデザインファイルと実装がズレてしまったり、複数の開発プラットフォームやデバイス間でスタイルの一貫性を保つことが難しくなってしまう問題に対し、単一のソースからすべてのプラットフォームにわたるスタイル定義を自動的に生成することで解決するのが目的

ここまでで

これだけ聞くと、自分の環境ではあまりデザイントークンを変えることがないからか、有用性を感じなかった

初回は実装側がデザインファイルをみながら定数ファイルを作成していくが、あまりたくさんの量を定義していないからか自動化するほどではないかなと思った

複数のプラットフォームや大量のデザイントークンを定義しているプロジェクトでは有用なのかもしれない

AWSの記事

もともとなんでAWSがこれを作ろうと思ったのかの記事があって、内容が面白かった

aws.amazon.com

アマゾンのシニアUXデザイナーのダニー・バンクス氏のこの辺の言葉

長年の設計を通じて、多くの組織がアプリやプラットフォーム間で一貫性を保つことに問題を抱えているのを見てきました。 ディテールは本当に、本当に重要です。顧客は、なぜ何かが良く見えるのかわかりませんが、何かが良くも悪くも見えることは知っています。小さな傷や不一致(色がまったく同じではない、間隔が1〜2ピクセルずれている)は大したことではないように思われるかもしれませんが、デザインの不一致、つまり何かが正しくないという感覚につながります。UXデザイナーとして、それに気づき、顧客に見えないように修正するのが私たちの仕事です。

アマゾンも当然ながらこういうことに注視していて、我々と同じようにこういうことで悩んでいるのが知れて面白かった

アマゾンくらいになるとやはり、実装とデザインの間でデザイントークンの不整合が発生するとのこと

(もともとは、スポイトツールで色をとったり、機能ごとにコードに手動でコピーするとかやっていたのが驚き)

確かに、いまは小規模なので問題ないが、規模が大きくなったらこういうツールが必要になるかもしれないといことがわかった