Semi Design - ByteDance発、デザインと実装を一致させるReact UIライブラリ

はじめに

「デザイナーが作ったFigmaのモックと、エンジニアが実装したUIが微妙に違う」——そんな経験はありませんか。デザインシステムを導入していても、デザインツールとコードの間には常にギャップが生まれがちです。

Semi Designは、TikTokの開発元として知られるByteDanceが自社プロダクト群で培ったノウハウを詰め込んだデザインシステムです。単なるReactコンポーネント集ではなく、デザイン言語そのものからコンポーネント実装、テーマ設計までを一気通貫で提供している点が特徴です。この記事では、Semi Designの魅力と使い方を実例を交えて紹介します。

Semi Designとは

Semi Designは、ByteDanceが開発・公開しているオープンソースのデザインシステムです。React向けのUIコンポーネントライブラリ@douyinfe/semi-uiを中核に、Figma向けのデザインリソースやアイコンセット、そしてテーマをコードで管理できるトークンシステムまで揃っています。

エンタープライズ向けの管理画面やSaaSプロダクトで求められる、フォーム・テーブル・ナビゲーションといった複雑なコンポーネントが最初から高品質な形で用意されているため、大規模な業務アプリケーションの開発と特に相性が良いライブラリです。

主な特徴

豊富なコンポーネント数 - フォーム、テーブル、カレンダー、Transfer、Treeなど、業務アプリでよく使う複雑なUIパーツが網羅されています
柔軟なテーマカスタマイズ - DSM（Design Token）によりCSS変数ベースでテーマを切り替えられ、ダークモード対応も標準でサポートされています
国際化(i18n)対応 - 多言語プロジェクトを前提に設計されており、ロケール設定を差し替えるだけで表示言語を切り替えられます
アクセシビリティへの配慮 - キーボード操作やARIA属性への対応が組み込まれており、業務システムに求められる品質基準を満たしやすくなっています

インストール

npm、yarn、pnpmのいずれでもインストール可能です。

# npm
npm install @douyinfe/semi-ui

# yarn
yarn add @douyinfe/semi-ui

# pnpm
pnpm add @douyinfe/semi-ui

アイコンを個別に使いたい場合は、アイコン専用パッケージも用意されています。

npm install @douyinfe/semi-icons

基本的な使い方

まずはボタンとフォームを使った、シンプルな例から見ていきましょう。

import React from 'react';
import { Button, Form, Toast } from '@douyinfe/semi-ui';

interface LoginFormValues {
  username: string;
  password: string;
}

export function LoginForm() {
  const handleSubmit = (values: LoginFormValues) => {
    Toast.success(`ようこそ、${values.username}さん`);
  };

  return (
    <Form onSubmit={handleSubmit} style={{ maxWidth: 400 }}>
      <Form.Input
        field="username"
        label="ユーザー名"
        placeholder="ユーザー名を入力してください"
        rules={[{ required: true, message: 'ユーザー名は必須です' }]}
      />
      <Form.Input
        field="password"
        label="パスワード"
        type="password"
        placeholder="パスワードを入力してください"
        rules={[{ required: true, message: 'パスワードは必須です' }]}
      />
      <Button htmlType="submit" theme="solid" type="primary">
        ログイン
      </Button>
    </Form>
  );
}

Formコンポーネントにはバリデーションルールを宣言的に渡すだけで、入力チェックとエラーメッセージ表示が自動的に行われます。独自にstateやバリデーションロジックを書く必要がない点は、フォームを多用する業務システムでは大きな時短につながります。

実践的なユースケース

続いて、管理画面でよく使われる「テーブル+検索フォーム」を組み合わせた例を紹介します。

import React, { useState } from 'react';
import { Table, Input, Space, Tag } from '@douyinfe/semi-ui';
import { IconSearch } from '@douyinfe/semi-icons';

interface UserRecord {
  key: string;
  name: string;
  role: string;
  status: 'active' | 'inactive';
}

const dataSource: UserRecord[] = [
  { key: '1', name: '田中太郎', role: '管理者', status: 'active' },
  { key: '2', name: '佐藤花子', role: 'メンバー', status: 'active' },
  { key: '3', name: '鈴木一郎', role: 'メンバー', status: 'inactive' },
];

export function UserTable() {
  const [keyword, setKeyword] = useState('');

  const filteredData = dataSource.filter((item) =>
    item.name.includes(keyword)
  );

  const columns = [
    { title: '名前', dataIndex: 'name' },
    { title: '役割', dataIndex: 'role' },
    {
      title: 'ステータス',
      dataIndex: 'status',
      render: (status: UserRecord['status']) => (
        <Tag color={status === 'active' ? 'green' : 'grey'}>
          {status === 'active' ? '有効' : '無効'}
        </Tag>
      ),
    },
  ];

  return (
    <Space vertical align="start" style={{ width: '100%' }}>
      <Input
        prefix={<IconSearch />}
        placeholder="名前で検索"
        value={keyword}
        onChange={(value) => setKeyword(value)}
        style={{ width: 240 }}
      />
      <Table columns={columns} dataSource={filteredData} />
    </Space>
  );
}

Tagコンポーネントでステータスを視覚的に表現しつつ、テーブルとフィルタリング用の入力欄をSpaceで整列させています。管理画面でよくある「一覧+検索+ステータス表示」というパターンを、レイアウト調整にほとんど手間をかけずに実装できるのがわかると思います。

テーマを切り替えたい場合は、CSS変数を上書きするだけでブランドカラーに合わせたカスタマイズが可能です。

:root {
  --semi-color-primary: #4d53e8;
  --semi-color-primary-hover: #3940d6;
}

まとめ

Semi Designは、大規模プロダクトの開発現場で磨かれたコンポーネント設計と、テーマ・国際化・アクセシビリティまで見据えた設計思想を兼ね備えたデザインシステムです。フォームやテーブルといった業務アプリの定番パーツが最初から高品質に揃っているため、管理画面やSaaSプロダクトの開発スピードを大きく引き上げてくれます。

まずは公式サイトのライブコード例を触りながら、自分のプロジェクトに組み込めそうなコンポーネントを探してみてはいかがでしょうか。