Quick Start

Installation and project initialization

Install the plugin

ByteDance User:D2C Service
Click Try it out to open the plug-in. After the plug-in is opened, there will be a playground for you to experience the transcoding function.
You need to log in to Figma for the first time use
Or select the sample design draft below to transcode.

start using

🧙🏻‍♂️ I am a designer

  • For designers, if they want their own design to support Design to Code and correctly identify the Semi components and their configuration parameters, they only need to import the latest Asset to use
  • The rest of the production process is no different from the Figma process you are familiar with before

🧑🏻‍💻 I am R&D

  • We have prepared some Figma sample designs and their corresponding Codesandbox links using the Semi D2C plugin
  • After installing the plugin, you can quickly experience the capabilities of D2C based on these existing design drafts
If you do not have the permission to edit the design draft and cannot open the plug-in, you can copy the design draft or use the plug-in to transcode in Dev Mode.
copy design draft
or in Dev Mode use
Screenshot & Figma URLDraft TypeDesciptionCodesandbox
A module with simple content without componentsCan be used to quickly restore layout and contentLink
A module with simple content without componentCan 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
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 Form ComponentsCan be used to quickly restore the layout and content, and identify the Props of the Semi componentLink
Full landing pageCan be used to quickly restore layout and contentLink
Module with Semi Table ComponentsCan be used to quickly identify table columns, create TableLink
  • Start
    • Introduction
    • Quick Start
    • Comparisons
    • Terms
    • FAQ
    • Changelog
  • Design to Code
    • Mark Component Library
    • Mark Icon Library
    • Mark Layer
    • Inspect
    • Transform plugin
    • Questions and Solutions
      New
    • Basic D2C logic
    • Transform settings
      New
  • UI Kit
    • Import UI Kit
    • Create Variants
    • Inspect
    • Best Practice of Design
      New
  • About
    • Contact Us
    • Road map
    • JSON Schema
    • Known issues