Serendie Design System
デザイントークン設計のアドバイスとFigma Variablesへの同期の仕組みづくり
UX Engineering
UI Design
Serendie Design Systemは、三菱電機のデジタル基盤「Serendie」のために、Takramと三菱電機が設計・開発したデザインシステムです。私は業務委託として参加し、デザインシステムアドバイザーとしてデザイントークンの設計を支援しました。プロジェクトは2025年度グッドデザイン賞のグッドデザイン・ベスト100に選ばれています。
デザイントークン設計のアドバイス
Serendieのデザイントークンは、値そのものを定義する「Reference Tokens」と、役割を定義する「System Tokens」の2層で構成されています。事業部ごとのカラーテーマや、様々なデバイスへの対応を見据え、これまでのデザインシステム構築の経験をもとに、トークンの構造や命名の考え方についてアドバイスさせていただきました。
Figma Variablesへの同期
デザイントークンはJSONファイルで管理されています。私は、このJSONファイルからFigma REST APIを使ってFigma Variablesへ同期する仕組みの実装を担当しました。コード側のトークンを変更すればFigmaにも反映されるため、デザインと実装で値がずれることを防ぎ、トークンをSingle Source of Truthとして扱えるようになっています。
