UIを変えずに、デザインシステムだけ変えたーMOTA車買取デザインシステムの作り方｜Life at MOTA

UIは変えず、道具箱だけを整える

MOTAのデザイナー李博煒さんが、車買取サービスのデザインシステム整備を振り返った記事。入社時点では同じページのデザインデータが複数あって実装との対応が分からず、データが無いページもあり、コンポーネントライブラリは個人ファイルのままリンク切れという状態だった。そこで置いた方針が「UIは変えずに、デザインパーツを仕組み化する」。成長中のプロダクトでは、美しく統一された画面より整理された道具箱が先だという判断。

3階層の分類とFigma正本の運用

既存パーツはPrimitives（トークン・イラスト・ロゴ）、Elements（基本コンポーネント）、Patterns（複合コンポーネント）の3階層に再構成した。Atomic Designの用語は曖昧さを避けて採用していない。入社1ヶ月でプロダクト理解が浅い分は、フロントエンドエンジニアとデザイナーに協力を頼んで過去の経緯を補った。「Figmaが正本」という前提の管理ルールを決めて2026年1月から社内展開し、3ヶ月後のアンケートでは工数が30%ほど減ったという結果が出ている。今後はドキュメントを充実させ、一般公開を目指すとのこと。