DEV Community

loading...
Cover image for Sketch to Code in 2 minutes — Simple Card Case Study

Sketch to Code in 2 minutes — Simple Card Case Study

px2code profile image pxCode Updated on ・3 min read

In this 2 minutes video, you can learn how to code design to web code with pxCode.

In our experiment, the simple card can be completed within 1 minute with pxCode compared to hand-coding which takes around 15 ~ 30 minutes. In more complicated and practical cases, pxCode still empowers users to boost their productivity more than 10–20 times.

_

Let’s start with this simple card.

Alt Text

Firstly, you can select the root item and enable the X-Ray mode to see the main layout of its children at the left side of the toolbar

Alt Text

As you can see, the root layout is composed vertically

Alt Text

And for the next level, the header part is composed horizontally. And to the next level of the header, one is composed vertically, and another is composed horizontally.

Alt Text

The X-Ray mode gives you a rough idea of how to do the right group structure. So let’s do the grouping now. You can multi-select items by dragging the mouse or press SHIFT key. And group them via context menu or hotkey CTRL + G.

Alt Text

And provide a proper name for the new group, which makes your export code easier to understand.

Alt Text

After grouping is completed, you can recheck the structure via X-ray mode.

Alt Text

You might notice there’s a suggested hint at the root item. You can see the detailed description by hovering.

Alt Text

As you can see, the children of the root item are arranged in vertical order without overlapping, which can be converted into FlexGroup. The button of Convert to FlexGroup Column at the toolbar is also enabled. You can click the toolbar button or click the CONVERT button to apply the suggestion.

Alt Text

Let’s see the result across different resolutions by dragging the Resizer. For better code quality, you can provide more meaningful names to each item. You can click EXPORT CODE to preview the code via the right side of the toolbar.

Alt Text

After completed editing, you can switch to the Snapshot tab. You can create a snapshot to save your final result with a proper name. You can switch to the original version by choosing the first snapshot. Snapshot is useful for you to manage the revision of your editing results.

Alt Text

Now you have completed the simplest card within 2 minutes. In the future, we will try more complicated and practical cases.

_

You can download the sketch via Github: https://github.com/px2code/pxCode_sketch_file_example/blob/master/Example1.sketch

and you preview via preview shared link from pxCode:
https://www.pxcode.io/preview/5f3dfef725661b00193f576b/5f3e034013a8630019a80d53/5f44e3010fa10d001301d250

You can check the preview with code via codesandbox:
https://codesandbox.io/s/zealous-framework-xjswb?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FSimpleCard.js&theme=dark

_

We are in beta and glad to hear any feedback and suggestion.
Welcome to sign up via https://www.pxcode.io

Discussion

pic
Editor guide