Ubie Vitalsは、Ubieらしいプロダクトを構築するためのガイドラインやツールをまとめたものです。 これからUbie Vitalsを使い始める方に向けて、各要素の使い方や情報源の場所などを紹介します。

デザインリソース#

Ubie VitalsのデザインリソースはすべてFigmaで管理されています。

• Ubie UI
• Design Tokens
• Icons

開発リソース#

Ubie Vitalsが提供する開発リソースはGitHubでOSSとして公開されています。 npmパッケージやVS Code拡張、このウェブサイトのソースコードなどが含まれています。

各リソースのインストール方法はGitHubリポジトリを参照してください。

• Ubie UI
• Ubie Icons
• Design Tokens
• Design Tokens for VS Code
• Chakra UI Theme

デザイントークンを適用する#

1. デザイントークンのパッケージをインストールします。

npm install @ubie/design-tokens

2. GlobalなCSSファイルでデザイントークンを読み込みます。これでCSS変数が利用可能になります。

@import url('../../node_modules/@ubie/design-tokens/dist/tokens.css');

Ubie UIをインストールする#

1. Ubie UIのパッケージをインストールします。

npm install @ubie/ubie-ui

2. Reactコンポーネントをインポートします。

import { Button } from '@ubie/ubie-ui';
import type { FC } from 'react';

const Default: FC = () => {
  return (
    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px', flexWrap: 'wrap' }}>
      <Button>ボタン</Button>
      <Button variant="secondary">ボタン</Button>
      <Button variant="accent">ボタン</Button>
      <Button variant="alert">ボタン</Button>
      <Button variant="text">ボタン</Button>
      <Button variant="textAlert">ボタン</Button>
    </div>
  );
};

export default Default;

各コンポーネントの詳細な使い方はコンポーネント詳細ページを参照してください。

Ubie Iconsをインストールする#

Ubie UIを利用している場合はIconコンポーネント経由でIconを利用できます。

import { Icon } from '@ubie/ubie-ui';
import type { FC } from 'react';

export const Button: FC = () => {
  return (
    <button type="button">
      <Icon icon="PlusAIcon" />
      Add Button
    </button>
  );
};

Ubie UIを利用していない場合は、Ubie Iconのパッケージを直接インストールすることも可能です。

npm install @ubie/ubie-icons

Reactコンポーネント以外にSVGファイルも利用可能です。詳細はGitHubリポジトリを参照してください。