Check the layers in the design draft that do not meet the transcoding specifications, such as unable to be transcoded into components, colors without token values, etc. After solving the problems, you can get more usable code products. After solving the problems, you can get more usable code products.
You can view Design Draft Best Practice. In addition, you can also customize inspection rules for your team.

Start checking

In the "Design to Code" plug-in tab, click Inspect.
Checks include three types: errors, warnings, and information. Generally speaking, you only need to worry about error and warning types. If there are no errors or warning types, the following picture will be displayed and the check has passed.
Click the inspection card to enter the inspection details page, and click "Locate Node" to locate the corresponding node.
Start checkingView checkCheck details

Default supported checks

Check descriptionCheck nameCheck typeProcessing method
The Table contains unrecognized contenttableInvaliderrorUse the Semi Table component to view the Table documentation
This node is an instance node and cannot be recognized as a Semi componentinstanceNoMarkwarningUse the latest Semi UI Kit to replace the node or make custom marks
The node is a legal Semi component or Semi IconsemiComponentinfo
The node has been custom markedcustomMarkinfo
After the node is converted to code, it will be translated into imgimageinfoView which situations will be converted into images
The node will be created as a parent nodeautoWrapperinfoView How to automatically group

Custom inspection rules

Custom inspection rules can be implemented using the inspectDraft hook of the transcoding plug-in. It is suitable for scenarios where you need to check whether there are components in the design draft or the style does not meet the specifications.
We provide an example , you can implement your own check hook function based on this example.
  • 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