Repolode
投稿する
DouyinFE

DouyinFE/semi-design

80以上のコンポーネント、Figmaのデザイン・コード連携、3000以上のデザイントークンを備えたReact UIコンポーネントライブラリ兼デザインシステム。

GitHub で見る公式サイト
スター
10,470
フォーク
853
未解決の Issue
626
最終コミット
一昨日

これは何？

Semi UIは、デザインと開発をつなげたいチーム向けのデザインシステムを備えたReactコンポーネントライブラリです。80以上のコンポーネントを提供し、各コンポーネントでキーボード操作、フォーカス管理、ARIAに対応するほか、多言語化、タイムゾーン、RTLへの対応やSSRとの互換性も備えています。

Figmaプラグインを使ったデザインからコードへのワークフローを提供しており、SCSS、Emotion、Tailwindを使ったJSX、またはJSON Schema DSLを出力できます。コードからデザインへの変換では、コードと同じテーマに沿ったFigma UI Kitを生成します。デザインシステム管理機能であるSemi DSMでは3000以上のデザイントークンを公開しており、チームはSemi UIをベースに独自のビジュアルシステムを定義できます。

ライブラリはTypeScriptで書かれており、Foundation/Adapterアーキテクチャを採用しています。DOMの分離が必要な用途向けに、Web Componentsとしてパッケージ化することもできます。npmから@douyinfe/semi-uiとしてインストールできます。

主な機能

  • 01キーボード操作とARIAに対応した80以上のReactコンポーネント
  • 02デザインをSCSS、Emotion、Tailwindを使ったJSXに変換するFigmaプラグイン
  • 03コードのテーマに合ったFigma UI Kitを生成するCode-to-Design機能
  • 04デザインシステムをカスタマイズできる3000以上のデザイントークン
  • 05TypeScriptの型定義、SSRとの互換性、RTL・多言語化への対応

ユースケース

  • すぐに使えるコンポーネントセットを活用した、管理ダッシュボードやReact製バックオフィスアプリの構築
  • 公式プラグインを使った、FigmaデザインからReactコードへの迅速な変換
  • デザインとコード間で同期を保つ、共通デザイントークンシステムの運用
  • Web ComponentsによるDOM分離が必要なブラウザー拡張機能やSDKウィジェットの作成

クイックスタート

  1. 1

    npmでパッケージをインストールします

    npm install @douyinfe/semi-ui
  2. 2

    READMEの例のように、パッケージからコンポーネントをインポートし、Reactアプリでレンダリングします

使う前に知っておきたいこと

  • Reactライブラリのため、Reactで構築されたプロジェクトでのみ使用できます。
  • READMEでは、主要な最新ブラウザーの直近2バージョンのみがサポート対象として記載されています。

トピック

#react#ui-library#design-system#design-tokens#figma#typescript#dark-mode#design-to-code#ai-friendly#code2design

よくある質問

semi-design とは？
80以上のコンポーネント、Figmaのデザイン・コード連携、3000以上のデザイントークンを備えたReact UIコンポーネントライブラリ兼デザインシステム。 Semi UIは、デザインと開発をつなげたいチーム向けのデザインシステムを備えたReactコンポーネントライブラリです。80以上のコンポーネントを提供し、各コンポーネントでキーボード操作、フォーカス管理、ARIAに対応するほか、多言語化、タイムゾーン、RTLへの対応やSSRとの互換性も備えています。
semi-design は無料で使えますか？ライセンスは？
semi-design は Other ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
semi-design は今もメンテナンスされていますか？
活発にメンテナンス中。semi-design の最終コミットは 2026年11月5日 です。
semi-design は何に使えますか？
すぐに使えるコンポーネントセットを活用した、管理ダッシュボードやReact製バックオフィスアプリの構築 公式プラグインを使った、FigmaデザインからReactコードへの迅速な変換 デザインとコード間で同期を保つ、共通デザイントークンシステムの運用 Web ComponentsによるDOM分離が必要なブラウザー拡張機能やSDKウィジェットの作成
semi-design のインストール方法は？
npmでパッケージをインストールします: npm install @douyinfe/semi-ui READMEの例のように、パッケージからコンポーネントをインポートし、Reactアプリでレンダリングします
semi-design はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/DouyinFE/semi-design

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト