Published on | Prototyping: From UX to Front End — Medium Supernova

Learn how to enhance your designs with the power of the new Supernova Sketch plugin

Since the absolutely unbelievable launch two weeks ago, we’ve been heads down coding and resolving issues, responding to thousands of people pouring in from all over the globe, building the greatest community.

But we are builders, we’ll never stop creating new and sweet stuff, and today we are ready to roll out our first two brand new features — persistent components right within Sketch, and the option to refresh already existing designs.

Persistent components right within Sketch using Supernova plugin

Introducing Refresh

Refresh is a brand new option in Supernova that allows anyone — be it designer or developer — to merge changes done to the original Sketch file. This brings the option to iterate on the designs quickly without losing the hard work already put into the project.

Using the refresh option is very easy. Simply select it from the main toolbar and point to the updated Sketch file. The compare window will open and it will allow you to select the artboards to replace.

The artboards that have been removed from the Sketch file will be removed from Supernova automatically as well. Let’s see it in action:

<a href="https://medium.com/media/87964f2f1bd0c5a221251da7d61b4f3e/href">https://medium.com/media/87964f2f1bd0c5a221251da7d61b4f3e/href</a>

Introducing Supernova Sketch Plugin

As you’ve probably noticed, Supernova replaces the old screen with the new one. This means that the changes done to that screen need to be done again — but even though making designs in Supernova is a matter of seconds, it can still get annoying.

Supernova Sketch Plugin (available for download here or directly within the Studio, supports Sketch 48+) allows you to mark components with their respective data types as they should appear in Supernova, or when exporting.

The great news — it works for symbols and libraries as well, so you can mark your master symbol as a button and everything that uses it will be a button as well.

But the best thing is to use the Sketch plugin with the refresh functionality — immediately building the working app screen by screen just by refreshing and marking the components with appropriate types.

<a href="https://medium.com/media/6b4bad245b0e22b80aea8c205f600204/href">https://medium.com/media/6b4bad245b0e22b80aea8c205f600204/href</a>

Important note: the basic components such as views, labels and images aren’t available in the list of components, because they are recognized by the Supernova automatically — to save you a ton of work.

Component mode

In order to easily see the marked components, especially for large screens, we have prepared the component mode. You can bring up the component mode by selecting the artboard of your interest and then enabling it in the advanced options of the plugin > component mode.

This creates an overlay over your design that will show you precisely where your components are, and what will they become once converted.

<a href="https://medium.com/media/4004ceec6826a70c9b2ac076e7efd5ad/href">https://medium.com/media/4004ceec6826a70c9b2ac076e7efd5ad/href</a>

Bonus — Wireframe mode

We know just how important it is to get your designs right — and we are pixel perfectionists ourselves. For this reason, the plugin has “one more thing”, the wireframe mode.

Wireframe mode allows you to select an artboard and it will render visible bounding boxes for all your components on the screen. This allows for absolutely precise preparation of the designs and components.

<a href="https://medium.com/media/31fa6cc0631093ee034db79622c2411b/href">https://medium.com/media/31fa6cc0631093ee034db79622c2411b/href</a>

Hope you like what you see and we are back to work — as this is just the beginning.

In the future, Supernova will get a much more powerful merging, with the vision of doing the iterations in real-time, completely synchronized with the Sketch.

Don’t have a copy of Studio yet? Get it now at https://supernova.studio/
Download the Sketch plugin now
Join our Facebook and Slack to discuss all you want to know about Supernova and its upcoming features!

Until next time!

With ❤️ from your friends at Supernova

Introducing Design Components was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introducing Design Components

Cool stuff, every week

More Articles