Where Design & Dev Work Together

UI Kit

A library of Figma components with code-scanned layer variants aligned with the code API

Use UIKit

Figma Plugin

Use the Semi Design figma plugin to search efficiently, or convert the design draft into front-end code with one click

Install plugin

@tuotuo: for a long time, Semi has been trying to optimize the daily workflow through various automation methods, helping design and R&D to improve the efficiency of cooperation.

We found that the different origins of designer and R&D are the root cause of many problems - designers and R&D do not use the same language and environment.

How to narrow the gap between design and R&D, and combine it into one, is the direction we will continue to explore.

Learn the thinking behind the Semi Design solution

Designer: Component design using code generation

Clone UIKit, out of the box, no need to change habits, API-aligned variants and component structure
Synchronized regularly to be consistent with the online version

Use UIKit

R&D: One-click conversion of design draft to code

Receive the plan, select the design draft, and use the plugin to generate maintainable code with one click
Automatic recognition of components and layouts

Install plugin

Before

Designer manually creates and maintains UI Kit
Limited variant properties, inconsistent with API
The naming of component layers is difficult to standardize
Auto layout settings missing
Inconsistency increases over time
The design draft is developed from scratch, and UI restoration is a waste of energy

Now

Scan code to automatically generate UIKit
The variant attribute is increased by +98%, which corresponds exactly to the API
Layer structure symmetrical with code
More complete auto layout support
After the component is released, UIKit can be synchronized with one click
One-click conversion of design draft to front-end available code
Figma sync DSM custom theme
Support new features of Figma component properties
To achieve full coverage of 50+ components
More page templates based on real components

Let design and development have the same origin

Design based on real component code, the front-end code can be transferred with one click
* This page is automatically generated by Semi Design

Start using

上传报告

文档中文名

*

文档英文名

文档链接

*

报告标签

结论

备注

连续上传
React Component LibraryFigma UIKit

Theme & DSM

GitHub

© 2021 - 2024 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED