"Focus on Pixel Chef and leave the heavy lifting to me "👉

Gossip do not speak, next we look at the words ~

This time bring you XD cutting map + automatic annotation + online collaboration < 1 minute!

XD imports at least 5 times faster than the previous version

So let’s have a look at how to play XD cut map!!

Greatly improve work efficiency

  • Export the cut diagram to PxCook

You can activate the “Add Export Mark” icon in Adobe XD layer, or select “Add Export Mark” in the last column of the right sidebar in Adobe XD. In Adobe XD, export the current design to PxCook.

In the new version, we’ve added cutmap support for Adobe XD and completely optimized the import process from XD to PxCook, making it 5 times faster!! Make the connection between designers and engineers closer and more efficient

  • Define the scope of the cut diagram

In some cases, it may be necessary to specifically define the scope of the cut diagram to fix the size of the cut diagram. We can do this by placing a “description scope” shape layer in the group that needs to be cut and then making the shape layer transparent, as shown below:

Support for automatic labeling

  • Support engineers to view automatic annotations

In PxCook software development mode, engineers can directly view the spacing between elements “Figure 1” by clicking on the elements in the artboard. At the same time, the detailed size, style and corresponding code “Figure 2” of this element can be viewed in the right bar of the software. Finally, engineers can directly select and download the corresponding cutting figure “Figure 3”.

  • Switching percentage labeling

In development mode, the engineer can activate the percentage notation mode by using the switch in the lower right corner of the palette. The reference layer for the percentage annotation is calculated automatically by looking at the two elements of the annotation. You can also set the currently selected element as the reference layer for the percentage annotation by right-clicking on the artboard. Note that only one manual reference layer is allowed in the same artboard.

Online collaboration efficiency is improved

Designers can add collaborators into the project, the completed design draft and cut diagram can be directly imported into the PxCook collaboration project, and automatically adapt to the size required by engineers, engineers can directly view the corresponding code, one key copy required code!

IOS: Supports objective-C Swift and ReactNative code generation.

Android: Supports XML and ReactNative code generation.

Web: Supports CSS style code generation.

-End-

The above is the optimization result of PxCook XD cutting function.

Interested partners come to experience it! For “production ● set ● research” and born!

Wechat official account: Pixel Chef PxCook

Get more design information and tips for drawing