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.
layers
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.
layout
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