Global Settings

design to code global settings

Configuration items

You can set transcoding and image-related configurations on the configuration page.
Configuration itemDescriptionType definition
Transform modeDifferent style framework, scss, tailwind or emotion. After tailwind is turned on, you will not be able to preview in CodeSandbox'jsx+scss' | 'jsx+tailwind' | 'jsx+emotion'
Transform optimizationOptional Scss repeated styles are extracted into Mixin, redundant nodes are removed, layer structure is corrected, and rectangular background is corrected. Documentation
BoxSizingaffects the calculation of width and height and needs to be consistent with your project settings. In Tailwind projects, it is generally necessary to enable'content-box' | 'border-box '
Color formatOptional hex or rgb. When hex has no transparency, the last two digits are not added. The syntax used by rgb is rgb(R G B[ / A])
Transform scale
Used to proportionally scale CSS size when outputting code, suitable for scenarios where the design draft is 2 times the draft or n times the draft. Documentationnumber
Use margin instead of gapUse margin to replace column-gap or row-gap when outputting
Copy code modeAffects the content copied when the copy button is clicked. The entire file contains components and references, JSX only contains template code'file' | 'template'
Image interfaceSelect custom when customizing the image upload interface'default' | 'extranet' | 'custom'

Tailwind configuration

After the transcoding mode is selected as jsx+tailwind, the style will match the default class of tailwind.
After tailwind is opened, Tailwind's config.js file can be configured in the plug-in. During the D2C process, the actual values of color and size are automatically mapped to the theme of tailwindcss.
The following figure shows the difference between using the Tailwind configuration file and the default generated class. After using the configuration file, it will match the preset class name and css variables in the project.

Custom image interface

The image upload interface is used to upload images, js, css, and json files during transcoding. Files uploaded through the default interface of the community version plug-in will only be saved for 3 hours. If you need to store them for a longer period of time, you need to customize the image upload service.
The D2C plug-in will directly request your image address and will not store your image config information.

Authentication method

You can choose the following methods for authentication. After configuration, it will be transparently transmitted to the interface you requested:
  • Query: Splice the authentication token directly into the URL
  • header: Pass the authentication token through the header
  • body: Pass the authentication token through the body
If you do not configure authentication, please be careful not to expose your image interface to the outside world.

return value

The interface return value needs to contain the URL of the image, the type is as follows.

Type definition


  • Note that the request body is encoded by multipart/form-data, so you need to have the corresponding library to parse the request body
  • When processing files, please note that the key of the file is file. Other fields in the request body are customized by you
  • Configure Cross-domain response header
    • Access-Control-Allow-Origin:
    • Access-Control-Allow-Methods: POST, GET, OPTIONS
  • The interface must be https protocol. The browser does not have this restriction on localhost during debugging.


  • 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