Inspect

The design draft inspection can find layers in the design draft that do not conform to the transcoding specification, such as problems such as not using Semi components and instances not marked. After solving the problems, a more usable code product can be obtained.
If you don't know the design draft rules, you can check design draft rules.

Start inspect

In the "Design to code" Tab, click Start generate to inspect the design draft.

View inspection

Inspection include info, warning, and error types.
Generally speaking, you only need to care about the error and warning types, and info is the prompt information.
One 🌰, in the inspection results shown in the figure below, there are 10 Semi components and 1 image node info, and 1 unmarked instance node warning.

Inspection details

Click the inspection card to enter the inspection details page, and click "Locate Node" to locate the corresponding node.
If there is a repair operation, it will be displayed on the problem details page.

Inspect again

If you need to re-inspect, click to select a new layer, and click to start generate.

Go back to D2C

After confirming that there is no problem, click "Generate code now" to proceed to the next step, translating the design draft.

Default supported checks

Inspection NameInspection DescriptionInspection TypeRecommendation
tableInvalidTable contains unrecognized contenterrorUse Semi Table component, see Table documentation
instanceNoMarkThis node is an instance node and cannot be recognized as a Semi componentwarningUse the latest Semi UI Kit, replace this node or make a custom mark
semiComponentThis node is a legal Semi component or Semi Iconinfo
customMarkThe node has a custom markinfo
imageThis node will be translated into img after transcodinginfoView what situations will be converted into images
autoWrapperThis node will be created as a parent nodeinfoSee How to group automatically

Custom Inspection plugin

Implement custom prompts through custom inspection plugins. The plug-in has not opened this ability yet.

Plugin Type Definition

Write a check plugin

Take the image inspection plugin as an example.

Packaging of custom plugins

It is recommended to package plugins in UMD format.

Used in D2C plugins

TODO

© 2021 - 2023 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED

  • Start
    • Introduction
    • Quick Start
    • Comparisons
    • Terms
    • FAQ
    • Changelog
  • Design to Code
    • Code Translation
    • Mark Layer
    • Mark Table
    • Mark Component Library
    • Mark Icon Library
    • 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