Quick Start

To use the Dev View "D2C Plus" feature (hereinafter referred to as D2C⁺), you need an Enterprise Edition account with a Full-feature Seat or Dev Seat.

Enable Dev View

First, enter Pixso and open any design file. Click the Dev View toggle in the top right corner to enter Dev View.

Select D2C⁺ and Generate Code

In Dev View, click the D2C option dropdown menu in the right panel and select D2C⁺. Then select any design or element to generate the corresponding code.

Tip

If you do not need to bind the component instances in the design with a codebase, you don't need to write any configuration files.

Parsing and Mapping

If you need to customize the parsing of generated code, you can configure it in DSM (Design System Management).

Open DSM

Click the dropdown menu in the top bar to open the DSM panel.

Tip

DSM can only be opened in design mode, and edit configuration requires edit permissions.

Create/Edit Configuration File

We currently provide component parser configurations. Creating configuration files based on your needs can help you save time.

Component Parsers: Used to map component instances in the design to frontend code component tags and properties.

Component Parsers

The following configuration demonstrates how to generate code for a frontend component (for specific configuration methods, please refer to Component Parsers):

{
  "Button": {
    "name": "el-button",
    "props": { "filter": ["md", "default"] },
    "text": { "nodeName": "_text" },
    "icon": {
      "nodeName": { "name": "icon", "deepFind": true },
      "attrName": "icon"
    }
  }
}

Start Using in Any File

Now you can start using the D2C⁺ feature in Pixso files to generate high-fidelity code. Go ahead and try it out!