semi-design README

The project's README from github.com/DouyinFE/semi-design. As one markdown file: README.md.

Semi-UI

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps.

Twitter Follow

LICENSE NPM CONTRIBUTORS Design Token FIGMA CODECOV Chromatic Cypress

English | 简体中文

🎉 Features

🔥 Install

npm install @douyinfe/semi-ui

yarn add @douyinfe/semi-ui

pnpm add @douyinfe/semi-ui

👍 Component Usage

Here is a quick example to get you started, it's all you need:

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

const App = () => (
    <Form>
        <Form.Input field='name' initValue='semi design'></Form.Input>
        <Button htmlType='submit'>submit</Button>
    </Form>
);

const root = createRoot(document.querySelector('#app'));

root.render(<App />);

Semi UI Doc Site has hundreds of editable examples and live preview, welcome to play with those examples.

⚡️ Design to Code Usage

Install Semi Figma Plugin. Translate Figma to real code in seconds. Support multiple output formats: JSX + SCSS / Emotion/Tailwind, or JSON Schema DSL

design2code

codesandboxdemo

🎨 DSM Usage

Define your own design system based on Semi UI with DSM in one click, Provide more than 3000 tokens for you to configure every detail. Sync between Figma and Code always.

dsmintro

📰 News about Semi UI

📌 Documentation

📝 Blogs

👌 Platform Support

Semi UI supports all major modern browsers.

chrome
chrome		 firefox
firefox		 safari
safari		 IE/Edge
IE/Edge		 electron
Electron
latest 2 versions latest 2 versions latest 2 versions Edge latest 2 versions

👨‍👨‍👧‍👦 User Group

Join User Group on Feishu / Lark

💖 Thanks

Chromatic

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.

Cypress

Thanks to Cypress for providing E2E testing.

VisActor Logo VisActor Logo

Thanks to VisActor for providing the data visualization solution.

👐 Contributing

Thanks to all the people who already contributed!

Read the contributing guide to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes to Semi UI.

See CONTRIBUTING documentation.

🎈 License

Semi UI is MIT Licensed

Star History

Star History Chart

semi-design (DouyinFE/semi-design)

Searching Database…

10.4K ·GitHub
Semi-design
Что это такое?Semi Design — это полноценная дизайн-система и UI-библиотека для React: более 80 компонентов готового продакшен-качества, стабильных с 2019 года, плюс инструменты, связывающие дизайн и код — официальный Figma-плагин Design-to-Code и платформа DSM для настройки дизайн-токенов.
Это фреймворк, на котором строится всё приложение, или библиотека компонентов, из которой я беру что нужно?Это библиотека, а не фреймворк — вы ставите @douyinfe/semi-ui из npm и импортируете в уже существующее React-приложение только нужные компоненты. Код написан на TypeScript, а визуальная часть и логика разнесены по пакетам semi-ui и semi-foundation.
Как подключить её к своему проекту?Выполните npm install @douyinfe/semi-ui, импортируйте файл стилей и начинайте использовать компоненты. На официальном сайте документации есть сотни редактируемых примеров с живым предпросмотром, которые можно копировать.
Нужно ли что-то ещё, кроме React?Нет — компоненты представляют собой обычные npm-пакеты для React, поэтому подойдёт любое React-приложение. Node.js 20+ и lerna нужны только если вы сами собираете сайт документации или весь монорепозиторий.
В каких браузерах это работает?Во всех основных современных браузерах: две последние версии Chrome, Firefox и Safari, а также Edge и Electron согласно таблице поддержки. IE в списке нет — минимум это Edge.
Может ли она превращать мои макеты из Figma в работающий React-код?Да — это официальная поддержка Design to Code. Плагин Semi Figma Plugin переводит макет из Figma в настоящий код за секунды: JSX + SCSS, Emotion или Tailwind, либо JSON Schema DSL. В Figma devmode при выборе слоя подходящий код показывается прямо в панели, и можно перейти в CodeSandbox, чтобы продолжить редактирование.
Что такое Semi DSM?Это платформа управления дизайн-системой, построенная на Semi UI: она даёт более 3000 дизайн-токенов для настройки каждой детали, так что вы в один клик превращаете Semi в собственную дизайн-систему, причём Figma и код остаются синхронизированными.
А работает ли это в обратную сторону — из кода обратно в Figma?Да, это называется Code to Design (C2D): автоматически генерируется UI Kit для Figma по вашей теме, так что файлы дизайна и код остаются согласованными.
Насколько компоненты доступны (accessibility) из коробки?Полностью — Semi заявляет полную поддержку A11y по стандартам W3C: для всех компонентов предусмотрена работа с клавиатуры, управление фокусом и ARIA.
What are similar projects?arc-library, chakra-ui, ux-ui-agent-skills, boardui, open-claude-ui, fluentui, styled-components, astryx
Which topics is it in?design-tokens, web-components, figma, scss, ssr, dark-mode, design-system, theme, accessibility, tailwindcss, component-library, i18n
Creator
DouyinFE
Size
65.1 MB
Stars
10.4K
Updated
CommitOct 09Releasev2.88.2Nov 18
Age
4y
Commits · 90 Days