semi-design

环境要求

• Node.js 环境（需支持 npm / yarn / pnpm 中任一包管理器）
• 已有 React 项目，示例基于 React 18 的 createRoot API
• 页面中存在一个挂载节点（示例使用 #app）
• 需要定制设计系统或设计转代码时，需有 Figma 账号

安装与启动步骤

1. 1安装 Semi UI

   在项目根目录执行安装命令，把 @douyinfe/semi-ui 加入依赖，npm/yarn/pnpm 任选其一。

   npm install @douyinfe/semi-ui

   复制

2. 2编写组件示例

   新建组件文件，从 @douyinfe/semi-ui 引入 Button 与 Form，按 README 示例组合表单。

   import React from 'react';
   import { createRoot } from 'react-dom/client';
   import { Button, Form } from '@douyinfe/semi-ui';
   
   const App = () => (
       
   
           
           submit
       
   );
   
   const root = createRoot(document.querySelector('#app'));
   
   root.render();

   复制

3. 3启动项目查看

   用你项目原有的开发启动方式运行，打开页面确认表单正常渲染；README 未给出固定启动命令。

4. 4安装 Figma 插件

   在 Figma 社区安装 Semi Design 设计转代码插件，选中图层即可在右侧拿到代码。

5. 5用 DSM 定制体系

   通过 DSM 一键定义自有设计系统，可用 3000+ tokens 配置细节并保持 Figma 与代码同步。

如何确认成功

页面出现含 name 输入框（默认值 semi design）与 submit 按钮的表单并能提交，即接入成功。

常见问题

注意事项

• README 示例使用 React 18 的 createRoot，若项目为 React 17 及以下需改用 ReactDOM.render。
• README 未提供项目启动、构建命令，请沿用你现有工程的启动方式。
• 主题定制与深色模式依赖 DSM 与 Design Tokens，需在 Figma 与代码间保持同步。