Semi Design: a React UI library with design tokens and a Figma to code plugin

The problem Semi Design targets: components plus a themeable token layer

Most React component libraries stop at components. You get a Button, a Form, a Table, and then you spend weeks overriding SCSS variables to make them match your brand. Semi Design takes the opposite position: the component set and the design system are the same product. The README describes it as a design system and UI library that connects DesignOps and DevOps, and the repository carries a DESIGN.md file alongside the component packages, which tells you the token layer is treated as a first-class artifact rather than documentation.

The audience is specific. It is a team with designers in Figma and engineers in React and TypeScript, where the same Button has to exist in both places and stay in sync. The README lists two features aimed exactly at that gap: design to code, which converts a Figma draft into code, and code to design, which generates a Figma UI Kit from a theme. A solo developer building a marketing page does not need either of those, and will pay for them in bundle weight.

How the monorepo and the Foundation/Adapter split actually work

The repository is a Lerna monorepo. The root package.json is private and declares workspaces under packages/**, and the build scripts run through lerna run build:lib scoped to individual packages such as @douyinfe/semi-json-viewer-core and @douyinfe/semi-webpack-plugin. So the published @douyinfe/semi-ui is assembled from several packages in this repository, not from a single source tree.

The README names the internal architecture: Foundation/Adapter. The practical consequence is that component logic lives in a foundation layer and the React rendering lives in an adapter layer. The README states this is what makes the library "easy to read and contribute", and it is also the mechanism behind the claim of compatibility with web components, since a different adapter could target a different renderer. Nothing in the repository layout shows a shipped non-React adapter, so treat that as an architectural opening rather than a delivered feature.

Styling runs on design tokens. The README advertises 3000+ tokens through Semi DSM, and the root build pipeline runs scripts/designToken.js to emit static/designToken.json before the documentation site builds. That file is the bridge: tokens are generated at build time and consumed both by the components and by the Figma side.

Installing Semi Design and rendering a first form

The README gives npm, yarn and pnpm as equivalent install paths. Pick one; they install the same package.

npm install @douyinfe/semi-ui

The README's quick example imports Button and Form from the package and renders them into a root created with react-dom/client. Note that the components are imported by name from a single entry point, and that Form.Input takes a field prop and an initValue prop rather than being a controlled input you wire yourself.

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 />);

After mounting, you should see a labeled input pre-filled with the string semi design and a submit button next to it. That is the whole first-run experience; there is no provider you must wrap the tree in for this example to work. The README points to the documentation site for editable examples and live preview, which is where you should go next rather than reading source.

Design to code through the Figma plugin, and what it does not remove

The design to code path is not part of the npm package. It is a separate Figma community plugin, linked from the README, that reads a selected layer and produces code. The README describes two ways to use it: inside Figma devmode, where selecting a layer shows the corresponding code on the right panel, and a jump to CodeSandbox to keep editing. Output formats listed are JSX with SCSS, Emotion or Tailwind, plus a JSON Schema DSL.

That last detail matters more than it looks. The plugin does not emit a single canonical output; it emits one of several, and the choice has to match how your project already handles styles. A team on CSS Modules will not find a CSS Modules option in that list. The README does not document how the generated code handles state, data binding or component composition beyond the layout, so the realistic use is turning a static frame into a starting skeleton, not generating a working feature.

Code to design runs the other direction: the README says a Figma UI Kit is generated from a theme so that design and code stay consistent. This is the more unusual half, and it depends on the token layer being the source of truth in both directions.

Where Semi Design is the wrong choice

The library is React only. The related searches show people looking for Semi Design Vue, Semi Design mobile and Semi Design Avalonia, and the repository does not answer any of them: the packages are React components, and the README's web components note describes an adaptation approach for DOM isolation in SDKs and browser plugins, not a Vue or Avalonia binding. If your stack is Vue, this is not a candidate.

A second boundary is the documentation and release channel. The most recent GitHub release in the repository is v2.88.2, published on 2025-11-18, and its own title says subsequent versions will no longer be updated there and points readers to the official website. The repository itself is not archived and the last push was on 2026-09-17, so the code is moving, but the GitHub releases page is no longer the place where versions are announced. Anyone pinning to a version by watching that page will fall behind.

Third, the token count is a cost as much as a feature. Over 3000 tokens means retheming is possible at a granularity most teams never need, and it also means the surface you must understand before a theme change behaves predictably is large. A project that only needs to change a primary color will find a CSS variable override faster than a DSM configuration.

Semi Design against Ant Design and Arco Design

The closest alternatives are Ant Design and Arco Design, and the difference is not the component list, which overlaps heavily at this level of maturity. It is the design tooling. Ant Design's ecosystem centers on the component library and its theme algorithm; the Figma side is a separate community file you reconcile by hand. Semi Design puts the Figma plugin in the README as a headline feature, with devmode integration and a CodeSandbox handoff, and pairs it with code to design so a theme change can regenerate the Figma kit.

Arco Design is the nearer comparison in origin and audience, and the related searches put it next to Semi Design directly. Both are TypeScript React libraries with token-based theming. The distinction the README draws for Semi Design is the Foundation/Adapter architecture and the explicit web components adaptation story, which Arco does not describe in the same terms. If neither design tooling nor DOM isolation matters to you, the deciding factor will be component coverage for the specific widgets you need, and that is a question only your own component inventory can answer.

Maintenance, licence and upgrade cost

Maintenance is active by the only measure available here: the repository is not archived, and the last push was on 2026-09-17. The commit history includes a CONTRIBUTING.md and a CONTRIBUTING-en-US.md, and the root scripts expose lint, unit test, and storybook targets, so a contributor has a defined path. Releases are frequent enough that v2.88.1 and v2.88.2 landed on the same day, 2025-11-18.

Upgrade cost is the part to plan for. The release notes themselves say the GitHub releases page will stop receiving new versions, so an upgrade process built on GitHub release notifications will silently stall. The documentation site's changelog, linked from the README, is the channel the project now points to.

The licence is the open question. The repository has a LICENSE file, but the metadata reports NOASSERTION, meaning the licence could not be classified automatically. Read the LICENSE file in the repository root before you ship anything, and if your organisation has a policy on permissive versus copyleft terms, get it reviewed. This is not legal advice; it is a statement that the machine-readable licence field does not tell you the answer.

Editorial conclusion

Adopt Semi Design if you are building a React app in TypeScript and want components plus a token layer you can retheme, and if your designers already work in Figma, because the plugin is the part that differs from a plain component library. Do not adopt it if you need Vue, mobile or Avalonia bindings: the related searches for those exist, but the repository only ships React. Before committing, check the license file, verify that the version you install matches the one on the documentation site, and confirm which output format the Figma plugin produces for your styling setup.

Frequently asked questions

Official sources

1. DouyinFE/semi-design on GitHub
2. Issues
3. Project website
4. README
5. Releases