本文へスキップ
2023リリース済み· デザインシステム· ツール

Meridian

ライブラリではなく、言語のように振る舞うデザインシステム。

担当
シニアプロダクトデザイナー(デザインシステム)
年
2023
ステータス
リリース済み
チーム
デザイナー3名、エンジニア6名
技術
FigmaStyle DictionaryReactMDX

概要

Meridian を引き継いだとき、基盤には11種類のグレー、4種類のボタン高さ、そして18か月前から正確でないドキュメントがありました。誰も手を抜いていたわけではありません。共有語彙が粗すぎて、チームが本当に必要なものを記述できず、同じ問題が何度も個別に解かれていたのです。

名付けこそが仕事

より大きなコンポーネント集ではなく、小さな文法を中心に作り直しました。すべてのトークンは三つの問いに答えます。どの役割を担い、どの文脈にあり、どの状態か。surface トークンは「グレー200」ではなく、パネルの中で最も静かな面であり、テーマによって変わります。

この文法はすぐに元を取りました。デザイナーは見たことのないトークンを推論でき、エンジニアは名前を予測でき、レビューでは同じ一文で議論できるようになりました。

唯一の正解を持つ

トークンは一つの JSON に置き、Style Dictionary で CSS カスタムプロパティ、Swift 定数、Figma 変数に変換しました。ドキュメントは同じソースから生成されるので、古いページは発見ではなくビルド失敗になります。ツールはわざと退屈にしました。運用するサービスも、忘れられるダッシュボードもありません。

システムは社会契約

コンポーネントよりガバナンスが重要でした。2週間のコメント期間を持つ軽い RFC、誰も強制されない週次のオフィスアワー、必ず代替を提示する非推奨ポリシー。貢献は増え、そして静かなローカルフォークは減りました。

持ち帰ったこと

デザインシステムはライブラリとしてではなくプロダクトとして失敗します。採用曲線は信頼の曲線です。「正しく使う」が「迂回する」より楽になったときに動き出します。仕事の半分は本当に読まれるドキュメントを書くこと、もう半分は荒いアイデアを送りたくなる同僚でいることです。

成果

プロダクトチーム
40+
仕様作成時間の削減
−50%
管理するトークン
312

プロセス

03

次のプロジェクト

Kite

お金がメッセージの速さで動く。