semi-design/content/start/design-to-code/index-en-US.md

---

category: Getting Started title: Design to Code subTitle: Dark Mode icon: doc-code localeCode: en-US

order: 4

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 flex layout, absolute layout Support the identification of Semi components and Semi Icons, covering 28+ components in form and table scenarios Multiple code style output：React + Scss, React + Tailwind and JSON Schema

Support for identifying components behind custom themes Recognize what the designer has modified to identify it as a ReactNode

How to use

Please move directly to semi.design/code

Application scenario

Restore the layout of the basic page, suitable for landing page rapid development One-click to restore the card, no need to care about the card layout Use Semi Variants to build the operation table page, D2C helps you automatically identify the table column content Use Semi Variants to build an operation form page, and restore the Semi Form form with one click 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.