Design draft rules

Some specifications or suggestions are listed below. More standardized design drafts will be transferred to more usable codes during D2C. Other than that, you can sketch the way you are used to.
👍🏻 It is recommended to use the Design Draft Inspection function to check the design draft.
Icon meaning:
  • ✅ Please use it like this
  • 👍🏻 recommended
  • ❌ not recommended

UI Kit

✅ If you use Semi components, please use the latest version of Semi Variants or Custom Variants.


Layer grouping

👍🏻 It is recommended to use Frame to aggregate visually hierarchical layers.
❌ It is not recommended to tile all layers.

Layer naming

👍🏻 For layers with obvious aggregation functions, it is recommended to use semantic layer names, such as header, confirm-btn, etc.

background padding

👍🏻 It is recommended to fill the background color to the Frame node.
❌ It is not recommended to use a rectangle as a background color carrier.

Layer mask

👍🏻 For layers with a mask relationship, it is recommended to put the mask layer and the masked layer at the same level.


Auto Layout

👍🏻 It is recommended to use auto layout.

Special components

Table component

👍🏻 It is recommended to view Table component documentation

Form component

👍🏻 It is recommended to view Form component documentation
  • 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