字节又一开源力作，优雅的不行！

永恒君
发布日期:   2025-04-29

大家好，我是了不起！

说起字节跳动，大家首先想到的可能是抖音、今日头条这些火得一塌糊涂的应用。但你知道吗？字节跳动背后那些前端大佬们，也是技术界的扛把子！

今天了不起就给大家带来一个来自字节前端团队的超燃开源项目 - semi-design。

项目简介

semi-design顾名思义，就是“半设计”。别误会，这可不是说它设计得一半一半，而是强调设计与代码的完美结合，让设计师和开发者都能轻松上手。它是一套现代、全面、灵活的设计系统和UI库，专为React应用打造。无论是企业级后台管理系统，还是各类中台产品，semi-design都能帮你快速搭建出既美观又实用的界面。

功能特色

  • 60+高质量组件：按钮、表单、表格……你需要的，它几乎都有。而且每个组件都经过精心打磨，保证用起来顺手。

  • Code2Design：这可是个黑科技！你只需在Figma中设计好UI，semi-design就能自动生成对应的代码，设计稿和代码完美同步。
  • D2C（Design to Code）：一键将Figma设计稿转成真实代码，这效率，简直飞起！
  • 无障碍支持：遵循W3C标准，为所有组件提供键盘交互、焦点管理等，让应用更加人性化。
  • 设计系统管理工具：Semi DSM，提供2000+ Design Token，定制专属设计系统不再是梦。
  • 国际化支持：20+语言，多时区、RTL支持，全球化布局不在话下。
  • 质量保障：单元测试、E2E测试、视觉回归测试……多种测试手段齐上阵，确保代码质量杠杠的。
  • TypeScript加持：类型定义清晰，源码易于阅读和贡献，开发体验直接拉满。

安装使用

安装semi-design超简单，只需几行代码：

1
2
3
4
5
6
7
8
# 使用 npm
npm install @douyinfe/semi-ui

# 使用 yarn
yarn add @douyinfe/semi-ui

# 使用 pnpm
pnpm add @douyinfe/semi-ui

安装完后，在你的React项目中引入组件，比如一个按钮：

1
2
3
4
5
6
7
8
import React from 'react';
import { Button } from '@douyinfe/semi-ui';

const App = () => (
  <Button onClick={() => alert('Hello, Semi!')}>Click Me!</Button>
);

export default App;

就这样，一个漂亮的按钮就出现在你的页面上了！是不是超简单？

semi-design绝对是前端界的一颗新星。它不仅继承了字节跳动一贯的简洁、现代设计风格，还在开放性和自定义能力上做了大量优化。无论是对于设计师还是开发者来说，这都是一个不可多得的好工具。

1
项目地址：https://github.com/DouyinFE/semi-design
永恒君
  目录