@serendie/design-token
Advanced tools
Design tokens as part of Serendie Design System by Mitsubishi Electric
デザイントークンはSerendie Design Systemを構成する最小単位です。コードベースとデザイン(Figma)でデザイントークンを共有することで、Single Source of Truthを実現することを念頭において設計されています。
デザイントークン(@serendie/design-token)は、Serendie UI(@serendie/ui)に同梱されますが、単独で使用することもできます。単独で使用する場合は、HTML/CSS環境など React以外でも使用できます。
最もシンプルな使い方を紹介します。
npm install @serendie/design-token
@import "@serendie/design-token/tokens.css";
h1 {
font-size: var(--sd-reference-typography-scale-expanded-large);
color: var(--sd-system-color-impression-primary);
}
Serendie Design Systemには5つのカラーテーマがあり、デザイントークンもそれに対応します。htmlタグなどに、data-panda-theme属性 (konjo, asagi, sumire, tsutusji, kurikawa)を付与することで、CSS 環境であってもテーマを切り替えることができます。
各テーマについてはこちらを参照してください。
<html data-panda-theme="asagi"></html>
デザイントークンの設計思想はドキュメントサイトを参照してください。提供するリファレンストークンおよびシステムトークンの一覧もあります。
またカラーロールやタイポグラフィロールといった、デザイントークンの役割についても解説しています。デザイントークンをベースに独自のUIコンポーネントを作る際に参照してください。
デザイントークンはリファレンストークンとシステムトークンの2種類で構成され、W3C Design Token Format Moduleの仕様に沿ってJSON形式で定義します。/tokensに置かれたJSONファイルをビルドした後、Serendie UIやFigma Variablesに展開します。
[!IMPORTANT] W3C Design Token Format Moduleではテーマの扱いがまだ定まっていません。そのため次のような独自の命名規則を採用し、Figma Variablesとの整合性を考慮しています。 ここでテーマとは、カラーテーマの変化や、ブラウザ幅によるフォントサイズの変化など、コンテキスト毎のデザイントークンセットを指します。 またFigma Variablesではテーマを、Varialbeモードと呼びます。
命名規則
typography.compact.jsonやcolor.konjo.jsonのように2重拡張子でテーマ名を表現する
.default.jsonとする.default.jsonは、Figma Variablesのデフォルトモードとして扱う@serendie/style-dictionary-formatterによってデザイントークンのJSONファイルを各プラットフォームに合わせて加工します。成果物は /dist に配置され、Serendie UI から利用されます。
npm run build
@serendie/figma-utilsによって、デザイントークンJSONファイルをFigma Vairablesに同期します。
npm run sync-json-to-figma
なお、/tokensに変更が入るとGitHub Actionsにて自動で実行されます。
[!WARNING] この仕組みは三菱電機社内向けです。Figma REST APIを利用しており、Figmaのエンタープライズプラン契約が必要になります。
FAQs
Design tokens as part of Serendie Design System by Mitsubishi Electric
We found that @serendie/design-token demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.