ブランド・デザインシステム

実際に使われるデザインシステム。デザインと実装が同じトークンを共有する形にします。開かれないPDFは作りません。

こんなときに

同じボタンが三つのページで三種類の青になっているとき。引き継ぎのたびに五往復するとき。ブランド規定がPDFで、エンジニアの画面では一度も開かれていないとき。

白紙からではなく、既存のプロダクトからトークンを逆算します。最初は棚卸しです —— 実際に本番で使われている青は何種類か、余白は、文字サイズは。その数字はたいてい驚かれ、統合を説得する最良の材料になります。アイデンティティの話はその後です。

デザインと実装が共有する一組のトークン、動作するコンポーネントライブラリ、前景と背景の全組み合わせでWCAG AAを満たす配色検証、そして「どんなときに規則を破ってよいか」を記したガイドです。

Figmaの中だけに存在するデザインシステムは納品しません。対応するコードのないトークンは三か月で形骸化し、形骸化した規定は規定がないより悪い —— 全員に合意があると思わせるからです。

まず棚卸しから。公開中のプロダクトを走査し、実際に使われている色・余白・文字サイズ・コンポーネントの派生を数えます。その一覧がそのまま提案書になります。

成果物

2営業日以内に、担当する本人から返信します。