Developer Mode

Pixso releases the developer mode and slide show mode for better collaboration between UI designers and developers.

1. Enter Developer Mode

You can enter developer mode by clicking the button on the right side panel. After that, all the top frames will be displayed by default. On the right side panel, you can also see the slice details and download all slices created by the designer.

Please note that only top frames are displayed, and text layers, vector shapes and components on canvas will all be hidden. However, you can create a parent frame(shortcut: Command/Ctrl + Option/Shift+G) to display them.

2. Share Developer Mode

Pixso supports sharing the canvas in developer mode directly to others. Click the Share button on the top corner to copy the sharing link. And the permission is the same as that of the design file.

3. Enter Slide Show Mode

As it is troublesome for developers to check more design details by dragging and scaling the canvas, Pixso releases the slide show mode. Double click the frame or click the Locate button. Then the selected frame can be automatically displayed in the center of the viewport for developers to work immersively.

In single frame mode, you can still select an element to check its code and slice, or download it. If you need to switch to other frames, click the switch button in the bottom or select one from the frame list on the left panel.

To exit single frame mode, you can click the Exit button in the top left corner.

Review and export slices

The slice panel collects assets prepared for export on the current page. Use it to download the assets a designer has marked for handoff.

1. Open the design file in Developer Mode.
2. Open the slice panel on the right to review the assets on the current page.
3. Select all slices or choose only the ones you need.
4. Check the export scale and format, then select Export.

If the expected asset is missing, inspect the relevant layer and its export settings. A designer can add an export setting to the layer or use the slice tool to define the required area. See Slice for export presets and asset settings.

Inspect the box model

The box-model view helps developers inspect a selected layer's dimensions, border, padding, and spatial relationship to other layers. It presents these values in a layout familiar from browser developer tools.

1. Select a layer in Developer Mode.
2. Open the box-model view in the right-hand panel.
3. Inspect its size, border, corner information, and spacing relationships.

Use these measurements with the properties and reference code in the handoff panel when implementing the design.

Share the handoff view

Choose Share while in Developer Mode and copy the link. The link opens the handoff view, while the underlying design file's access permissions still apply. Sending a developer-view link does not grant access to someone who lacks permission to the file.