@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
The npm package @serendie/design-token receives a total of 111 weekly downloads. As such, @serendie/design-token popularity was classified as not popular.
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
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.