@serendie/ui NPM

Serendie Design Systemは、多様な事業と人々をつなぎ、新たな価値を生み出すための三菱電機によるオープンなデザインシステムです。デザイントークンやSerendie Symbolsなど複数のリポジトリから構成され、本リポジトリはSerendie UIを扱います。

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の例を紹介します。

SerendiePresetの追加

Panda CSS導入後に生成されるpanda.config.tsに下記を追記することで、Panda CSSのPresetとSerendie Design Systemのデザイントークンを繋ぎこみます。

+import { SerendiePreset } from "@serendie/ui";

export default defineConfig({
+  jsxFramework: "react",
+  presets: [SerendiePreset],
});

より実践的な例は、こちらのサンプルプロジェクトを参考にしてください。

APIを詳しく知る

Serendie UIはヘッドレスUIとして、Ark UIを内部的に利用しており、各コンポーネントのAPIはArk UIを継承します。Selectコンポーネントなどインタラクションが複雑なコンポーネントは、Ark UIのAPIリファレンスを合わせて参照してください。

Serendie UIの開発

Serendie UIに新しくコンポーネントを追加する場合は、Ark UIをベースにしてください。

npm run dev
npm run build

Figma Code Connect

Serendie UIでは、Figma Code ConnectをStorybookと繋ぎこむ形で導入しています。下記のコマンドで各コンポーネント毎のstoriesファイルの内容を、Figmaにpublishします。

npm run connect:publish

storiesファイルに変更が入ると上記がGitHub Actionsによって実行されます。

Resources

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のフォーマッタ

Examples

主要パッケージの導入サンプルとして、serendie/bootcampを用意しています。また三菱電機内ではハンズオン形式で使い方を紹介するブートキャンプを開催しています。

サブブランド対応

Serendie Design Systemは三菱電機の有する多様な事業に適応することがコンセプトの一つです。

@serendie/desigon-tokenおよび@serendie/uiは、デフォルトでSerendieのVisual Identity (VI)を継承しますが、各事業ブランドのVIに合わせてテーミングできるよう社内向けにserendie/subbrands-templateを整備しています。

詳しくはSerendie Design Systemチームまでお問い合わせください。