Handoff Panel

1. View Property Value

On the Handoff panel, programmers can view and copy the property values of the selected layer. The values include object size, layout constraint, shadow and stroke.  Besides, the content and layout properties like font, font size and row height, of the text layer, can also be accessed.

In the Fill section, programmers can view the color values of Hex、RGB、CSS、HSL and HSB.

2. View Spacing

In developer mode or switch to the Handoff panel, programmers can select layer A first, then move cursor to another place to measure the distance between them.

3. Generate Code Automatically

Pixso automatically generates code for the design. You can switch to the Handoff panel and slide down to the code module to see the reference code. Click the drop-down icon to switch between CSS, iOS, and android reference codes.

4. Switch Development Platform

Developers need to choose corresponding units based on different development platforms. Currently Pixso provides 3 units: iOS, Android and Web.

5. Custom Scale Conversion

If there is a custom requirement for the unit conversion of properties, then you can convert the value and unit according to your development needs.

If the pixel of a design draft is 750px and the development requirement of a program is 375dp, then you can set the conversion multiple to 0.5, and the unit px is changed to dp. After confirmation, the selected design draft will be automatically multiplied by the custom multiplier.

6. Convert to the Specified Width

Specifying the width can support users to adjust the conversion rules more flexibly. For example, developers need to convert the designer's 750px design manuscript into 375 width in line with the small program specification. In addition to customizing 0.5 times, they can also directly select the frame and specify the width as 375 to complete the conversion.

Pixso calculates the magnification based on the artboard you selected and the values you filled in and applies it to other layers of the design.

Note: The settings here will not affect the size of the draft itself.

7. Set Selection Preference

Pixso is now able to ignore the components and layers inside the slice, so as to avoid the fact that the developer always selects some tiny elements.

In observer mode or developer mode, developers can enable the option through the icon on the upper right of the page.

Note: Pixso lets users select elements at the bottom by default.

Developers can uncheck the setting of Allow to select layers in the component/slice based on needs.

If unchecking the Allow to select layers in the component/slice option, then Pixso will only select the entire slice on the canvas and will not select the layer inside the slice.