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 URLDraft TypeDesciptionCodesandbox
A module with simple content without componentsCan be used to quickly restore layout and contentLink
Modules that do not contain components, have more content, or have a slightly more complex layoutCan be used to quickly restore layout and contentLink
Module with Semi Form ComponentsCan be used to quickly restore the layout and content, and identify the Props of the Semi componentLink
Module with Semi Table ComponentsCan be used to quickly identify table columns, create TableLink
Full landing pageCan be used to quickly restore layout and contentLink

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.