Serendie Design Systemは、多様な事業と人々をつなぎ、新たな価値を生み出すための三菱電機によるオープンなデザインシステムです。
デザイントークンやSerendie Symbolsなど複数のリポジトリから構成され、本リポジトリはSerendie UIを扱います。
Serendie UI Kit (Figma)と対となるReactベースのUIコンポーネント集です。Figma Code Connectにも対応しており、Storybookと同等の内容がFigma Devモードでも確認できます。
デザイントークンも同梱されます。
npm install @serendie/ui
rootのCSSに対して下記を指定してください。1行目は、Serendie UIに対して、スタイルを適切に当てるためにカスケードレイヤーの指定をするもの、2行目は同梱のデザイントークンやデフォルトスタイルを読み込むものです。
@layer reset, base, tokens, recipes, utilities;
@import "@serendie/ui/styles.css";各Componentのpropsについては、ドキュメントや、Storybook、Figma Code Connectを参照してください。
import { Button } from "@serendie/ui";
<Button size="medium">Login</Button>;Serendie Design Systemには5つのカラーテーマがあり、デザイントークンもそれに対応します。htmlタグなどに、data-panda-theme属性 (konjo, asagi, sumire, tsutusji, kurikawa)を付与することでカラーテーマを切り替えることができます。
各テーマについてはこちらを参照してください。
<html data-panda-theme="asagi"></html>マージンを微修正したいなど、Serendie UIのスタイルをカスタムしたいシーンでは、プロジェクト側にスタイリングライブラリ(CSS-in-JSなど)を導入してください。どのスタイリングライブラリでも併用は可能ですが、ここではSerendie UIの内部でも使用しているPanda CSSの例を紹介します。
Panda CSS導入後に生成されるpanda.config.tsに下記を追記することで、Panda CSSのPresetとSerendie Design Systemのデザイントークンを繋ぎこみます。
+import { SerendiePreset } from "@serendie/ui";
export default defineConfig({
+ jsxFramework: "react",
+ presets: [SerendiePreset],
});
より実践的な例は、こちらのサンプルプロジェクトを参考にしてください。
Serendie UIはヘッドレスUIとして、Ark UIを内部的に利用しており、各コンポーネントのAPIはArk UIを継承します。Selectコンポーネントなどインタラクションが複雑なコンポーネントは、Ark UIのAPIリファレンスを合わせて参照してください。
Serendie UIに新しくコンポーネントを追加する場合は、Ark UIをベースにしてください。
npm run dev
npm run build
Serendie UIでは、Figma Code ConnectをStorybookと繋ぎこむ形で導入しています。下記のコマンドで各コンポーネント毎のstoriesファイルの内容を、Figmaにpublishします。
npm run connect:publish
storiesファイルに変更が入ると上記がGitHub Actionsによって実行されます。
Serendie Design Systemは、Serendie UI (本リポジトリ) のほか以下の関連リポジトリから構成されています。
| Package name | Location | Description |
|---|---|---|
@serendie/design-token |
serendie/design-token | W3C Design Token Format Moduleの仕様で定義されたSerendie UIのベースとなるデザイントークン |
@serendie/symbols |
serendie/symbols | Serendieらしい300種類以上のSVGアイコン集 |
@serendie/figma-utils |
serendie/figma-utils | Figma REST APIを用いて、@serendie/design-tokenとFigma Variablesの同期を行うためのユーティリティー集 |
@serendie/style-dictonary-formatter |
serendie/style-dictonary-formatter | デザイントークンを各プラットフォームに展開するためのamzn/style-dictonaryのフォーマッタ |
主要パッケージの導入サンプルとして、serendie/bootcampを用意しています。また三菱電機内ではハンズオン形式で使い方を紹介するブートキャンプを開催しています。
Serendie Design Systemは三菱電機の有する多様な事業に適応することがコンセプトの一つです。
@serendie/desigon-tokenおよび@serendie/uiは、デフォルトでSerendieのVisual Identity (VI)を継承しますが、各事業ブランドのVIに合わせてテーミングできるよう社内向けにserendie/subbrands-templateを整備しています。
詳しくはSerendie Design Systemチームまでお問い合わせください。
各パッケージはMITライセンスの下で配布されています。 詳しくはLICENSEを参照してください。