Transform plugin

Realize custom transcoding products through transcoding plug-ins

plugin type

Plugin NamePlugin DescriptionRuntimeInputOutputStatus
inspectPluginCheck the problems and tips on the design draftBefore transcodingJSONSchemaD2CInspect[]🚧
schemaPluginIntervention in schema before JSX generationBefore JSON Schema outputJSONSchemaJSONSchema🚧
generatePluginCustom transcoding output contentBefore outputting code productsGeneratePluginInputGeneratePluginOutput
Check out the Design Inspection custom plugins section.


Plugin packaging configuration


browser, the plug-in package runs in the browser environment, and should not contain node-related APIs after packaging.


UMD format, preferably standalone, can introduce common third-party packages through global variables to reduce package size.


externals means a package provided globally, and third-party plug-ins do not need to be packaged into the plug-in.
The reference path of the package in the source codeConverted to the name of the reference global variable after packaging


  • The packaged product does not contain node API
  • The packaged product should not require third-party packages, modules should be built-in or use packages contained in externals
  • The supported externals package will be mounted on the global variable, and each package has a specific name, which should be configured when packaging, otherwise the corresponding package may not be found

Plugin usage

The settings page adds custom plugins by configuring the URL.

Error handling

When using the Figma plugin, if the custom plugin reports an error, perform the following actions.
  • Skip the plugin without affecting the next conversion logic
  • Perform the following conversion on the content originally input to the plug-in
  • Show error message

© 2021 - 2024 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