Terminology and terminology used in the site


Code to Design (C2D for short), refers to code to design draft. What: As a pre-process of D2C, Semi C2D inputs Semi components and outputs Figma design assets Why: Save the cost of designers maintaining Figma variants, manual maintenance -> automatic code generation. Keep design and code in sync


Design to Code (D2C for short), refers to the conversion of design drafts into codes. What: Identify the Semi component and the page in the Figma design draft, convert the code with one click, and automatically generate the corresponding JSX and CSS Why: Save JSX, layout and style-related coding manpower, R&D only needs to focus on interaction logic and event binding

Figma Terminology


Same component, collection of different API types. In Figma, different variants are usually distinguished by different layer names For example, the Button component has a combination of multiple different states such as disabled and type, so each independent state is a variant For detailed definitions, please refer to Figma official document

Auto Layout

It can be simply understood as the flex layout in Figma, which is called Auto Layout in Figma. Component variants support AutoLayout, which is more convenient when implementing business design drafts. There is no need to pay extra attention or manually adjust the position changes of the internal elements of the component after the component size changes.


A copy of the component, and modifications to the component will also be synchronized to the instance

Detach Instance

After the instance is unbound, it can modify itself without affecting the component itself
  • When it is not unbound, Figma will restrict the modification of the instance (you cannot modify the layer content freely), and you can only modify limited preset properties through the right operation panel
  • After unbinding, you can modify the layer content or order or layout at will...
  • Start
    • Introduction
    • Quick Start
    • Comparisons
    • Terms
    • FAQ
    • Changelog
  • Design to Code
    • Code Translation
    • Mark Component Library
    • Mark Icon Library
    • Mark Layer
    • Inspect
    • Transform plugin
    • Troubleshooting
    • Basic D2C logic
    • Supported Components
    • Global Settings
  • UI Kit
    • Import UI Kit
    • Create Variants
    • Design draft rules
    • Table Usage
    • Form Usage
    • Variant Update Notes
  • About
    • Contact Us
    • Road map
    • JSON Schema
    • Known issues