Today we celebrate import from Sketch

When an experiment turns into a feature

Tom Parandyk
learnDX
4 min readJan 20, 2017

--

This is the first story from a new series “Today we celebrate…”. Starting today, we will share our small wins with you hoping this insight will make you feel part of the process. We were making things in the dark for long enough. It’s time to open up to your feedback and criticism.

Today, 20th of January 2017, we are celebrating our first successful attempt at importing graphical files from Sketch to ViewsDX.

The drill

Here’s a short list of steps we had to take to make this happen.

On the left, the preview of implemented view; in the middle, the Views syntax; on the right, the initial Sketch design
  • Adjust the folder tree of the artboard designed in Sketch to fit the ViewsDX syntax. The gist of it is: group elements into functional sections. In our example above we have: a card, an image, actions, and comments.
Sketch document restructured and ready to be imported in ViewsDX.
  • Name each group using two words. The first should one be something meaningful to you so you can recognise it later. The second word has to be either Vertical, Horizontal or Svg.
    A Vertical organises grouped elements vertically, one on top of the other. A Horizontal does the same, only horizontally, ie, one element next to the other, filling the available space. These two groups are the building blocks of our simplified layout system in Views.
    Svg helps us understand where your icons are.
  • If an icon is a single shape, group it in a folder, and use the convention we described above: a custom name as a first word and Svg as the second one. If the icon is made out of more than one shape, it will be already grouped in the folder, in that case just rename the folder to match the convention.
  • Icons need to be marked as exportables. Do this by selecting the icon folder and then click Make exportable on the right bottom corner. After that, choose SVG export as the format for each group containing an icon.
  • Finally, wrap each icon, in Vertical or Horizontal to later make them interactive in Views by adding an onClick property, hover over styles or animations.

That’s all we had to do in Sketch. We are already working on streamlining the process with some shortcuts.

Next, we exported the Sketch file as JSON file and SVGs using sketchtool and processed that file with our importer which converted the Sketch output into a View and pasted the output into an empty view editor.

Since we were using Google fonts in our test design, Views automatically recognised and applied them to the view code.

The only thing left at this point was to add paddings and margins since our experimental morph is not yet adding for us.

That’s it!

Why is it a big thing to some of us?

We want to be as flexible and permissive when it comes to your creative workflow as possible.

We imagine most designers may still want to use their current visual tools to make initial wireframes and layouts. Redoing them from scratch in Views wouldn’t be ideal in that case, hence the integration.

There is also a contra argument, so we are a bit split: is it an enhancement or a crutch? Starting from Sketch sounds appealing to all creatives who already know how to use it. I met many design students at Thinkful who don’t have any experience in interface design, and for them, it’s a tough space to get in to. Not only it’s a new tool they need to learn, but the concept of making flat layouts, fake prototypes, and lack of interactions sounds wasteful and unnecessary.

Most of my students are not afraid of writing code, and in fact, would like to implement their applications without all that current hustle we, experts and working professionals, are used to.

Does it mean we should be building Views for the next generation of creative makers instead of trying to accommodate experts used to tools like Sketch or Illustrator, made in the legacy era of print and hand-off processes?

The final benefit

The reason why you would want to use ViewsDX as your creative implementation environment is to morph simple Views syntax to React and React Native. This allows designers to own the UI and UX of their applications more than ever. Developers can then take each morphed View and plug it directly into their development environment.

Here’s the React code as the result of morphing the test view we saw above. As a part of ViewsDX, you won’t need to worry much about it as it gets automatically synced to your application’s codebase and compiled on the fly, so you always have the latest version.

--

--

Tom Parandyk
learnDX

Product designer, eager engineer, strategist, wild innovator, proud dad, creative leader, aspiring musician.