Semi Design 设计转代码 - 社区版

About this plugin

Created by the ByteDance - Douyin FE and UED team. Official supports D2C with Semi UI, one-click conversion of design drafts into front-end codes.

Features

1. Code Generation. Supports React + SCSS, React + Tailwind, React + @emotion/css, abstract code output JSON Schema
2. Sandbox Preview. Supports preview code in CodeSandbox
3. Component Support. Provides a set of out-of-the-box UI Kits that can be recognized by D2C and strictly aligned with the code（semi-design）, and support marking third-party component libraries
4. Image Export. Supports custom image upload interface
5. Dev Mode Support. Supports developer to use plug-in transcoding without editing permission of design draft

How to use

1. Install plugin
2. Select a layer and start transcoding. (If you don't have editing permission, you can use the plugin in Dev Mode)
3. Draft inspects
4. Copy and paste, save code file to local or preview code in sandbox

Tips

1. For better layout effect, please use Auto Layout
2. The CSS class name in the code is named after the layer name
3. Try to keep the layer structure as simple as possible to avoid overlapping layers

Advanced usage

1. Mark component library. Use plug-ins to mark components or component sets to realize D2C identification of third-party component libraries.

Limitations

1. Radial, Angular, Diamond Linear are not supported

Support

Official Website - Feedback - 中文站点

Follow us

Twitter - Medium - Dev.to - Bilibili