Start · Design to Code
Design to Code
Introduction
Design to code (D2C) is a design draft conversion code tool provided by
Semi Design, which supports one-click recognition of layer layout + Semi components in Figma pages, restores design drafts at the pixel level, translates them into JSX and CSS codes, and quickly previews them.
No need to start from 0.From now, you can let the tool take care of UI restoration, focus more on your business logic.
Abilities
Support basic UI layout transcode
Support flex layout, absolute layout
Support Semi components
Support the identification of Semi components and Semi Icons, covering 28+ components in form and table scenarios
Support exporting different stack codes
Multiple code style output：React + Scss, React + Tailwind and JSON Schema
Support to identify other theme components
Support for identifying components behind custom themes
Nested components and custom content recognition
Recognize what the designer has modified to identify it as a ReactNode
How to use
Please move directly to semi.design/code
Application scenario
Basic page transcode
Restore the layout of the basic page, suitable for landing page rapid development
Card transcode
One-click to restore the card, no need to care about the card layout
Form page transcode
Use Semi Variants to build the operation table page, D2C helps you automatically identify the table column content
Form page transcode
Use Semi Variants to build an operation form page, and restore the Semi Form form with one click
Access to custom build platform
Customize consumption JSON Schema and create template code suitable for your project
Examples
Here is a link to the Figma example mockup and its corresponding Codesandbox transpiled using the Semi Figma plugin.
| Screenshot & Figma URL | Draft Type | Desciption | Codesandbox |
|---|---|---|---|
 | A module with simple content without components | Can be used to quickly restore layout and content | Link |
 | Modules that do not contain components, have more content, or have a slightly more complex layout | Can be used to quickly restore layout and content | Link |
 | Module with Semi Form Components | Can be used to quickly restore the layout and content, and identify the Props of the Semi component | Link |
 | Module with Semi Table Components | Can be used to quickly identify table columns, create Table | Link |
 | Full landing page | Can be used to quickly restore layout and content | Link |
Comparisons
More in line with the designer's usage habits
We investigated the common C2D tools in the industry in 2021~2022. They all draw the component as an instance on the canvas. Whether it is creating an instance or switching variants, it needs to be operated within the plug-in.
However, in the actual design process, designers are not used to opening a plugin to create and update components. The solution provided by Semi is that designers continue to use variants in the native way of Figma, which is consistent with the original design process.
Powerful Design Components
There are some tools in the industry that support converting arbitrary component libraries into design components, but these components currently do not have auto layout capabilities and cannot meet the standards available to designers. In addition, their components do not use design variables, which makes it difficult for designers to customize this set of components.
Component identification does not depend on annotations
Semi focuses on supporting Semi components. The Semi D2C solution does not require R&D to manually label components. If you have custom requirements, you can also use labeling to identify layers as components. There are some tools in the industry that provide powerful component labeling capabilities, but since there is no component library provided by default, it is necessary to manually label components and component properties in actual use.
Transcoding supports flex layout
We have researched some common D2C tools on the market, and some of them have relatively good flex layout support, but there are certain problems in some details. Semi supports reverting Figma's auto layout to flex layout. In addition, if certain rules are met between layers, it will also be automatically recognized as a flex layout.