Introducing Supernova

Turn Sketch designs to working native apps in minutes

Jul 19, 2017 · 5 min read

When it comes to building a mobile application, it is still a painfully slow and cumbersome process. Why create the design and then code it again by hand, when someone worked so hard to make sure all pixels are just right? We said no.

Introducing Supernova, a native tool aimed to seamlessly bridge the gap between developers and designers, allowing designers to create functioning native apps for the first time (not prototypes!), or helping developers cut down the development time by removing the UI work altogether.

Supernova is an all-in-one suite automating the following:

  • ✅ Conversion of design layers to native components 🔥
  • ✅ Component styling
  • ✅ Creation of navigation chains
  • ✅ Fully automatic creation of responsive layouts 🔥
  • ✅ Resource detection and export (no need for slices)
  • ✅ Creation of basic and advanced animations
  • ✅ Export of the code, assets, project, fonts, UI and everything you need for iOS, Android and (very soon) React Native projects as well 🔥
  • ⭐ Bonus for all those late night sessions: Light / Dark UI mode

Best of all? It works with any polished mobile design. Let’s dive in, shall we?

Sketch to Supernova

Supernova does not import layers as they are in Sketch. Instead, layers are converted to the basic building blocks of every application — images, labels, and views, preserving all the design information you provided.

Not only that, but it also optimizes the design — removing redundancies, fixing colors and transparencies, creating and smart-merging paths, exporting image resources, applying masks… everything programmers would otherwise need to do manually.

Image for post
Image for post
Importing Sketch file creates all application screens — optimization is done immediately

Native components & interactive preview

Basic building blocks alone are not enough in most cases — more complex components group them instead and provide additional functionality, like scrolling, loading of data, or touch events. Supernova allows seamless switching between different types of components, or merging multiple components to form complex elements like tables.

To show the changes and how the application behaves, Supernova features real-time preview — When done editing, simply switch to interactive and enjoy the full application exactly how it will look to your users. This preview simulates all components, animations, interactions and of course the responsive layout.

Image for post
Image for post
Converting layers to complex components — buttons, textfield, tables, you name it.

Starlight — Automatic responsive layout engine

By today’s standards, making applications responsive and supporting any display size is a must. We’ve automated it for everyone.

Supernova allows you to create layouts using the same system as iOS Auto Layout or Android Constraint Layout but removes the hard work — calculating the constraints for you, using positioning information, margins, but also the type of components, their styles and content and more.

Once you have created all components like buttons or tables, simply click solve, and the layout is done for you. Switching to interactive mode allows you to preview it on any device size.

Image for post
Image for post
“Solve screen” option creates all constraints for you


Making great animations is complicated and to have them just right is nearly impossible to do by hand. To ease the pain of their creation, Supernova features a full-fledged animation engine that translates what you design to native code, integrating everything for you.

You are able to build and preview animations directly from within the studio, either by hand or by using pre-defined templates, including all the sweet stuff like keyframe and spring animations. All animations are immediately shown to you, including their interactions.

Image for post
Image for post
Making buttons little more alive

Navigation chains

Supernova allows you to visually connect screens to create the navigation maps. Navigation can be invoked from buttons, tables, cells or views, or you can just connect the screens together and eventually use that connection in code yourself.

Image for post
Image for post
Creation of the navigation map

Native export

Once you are happy with what you’ve created, it is time to export either for iOS or Android (and soon, React Native). Depending on your settings and platform, you will get:

  • Source codes (Swift, Java, Kotlin) created using the latest best practices
  • UI & Layout definitions (Storyboards, XMLs)
  • Assets in all resolutions
  • Required fonts
  • Buildable project with all linked files and configuration
  • Lots of attention from your friends for practicing dark arts 🔮
Image for post
Image for post

Welcome to public beta — its free, for everyone

We are super excited to be launching Supernova for everyone after many months in private beta and years of development. You can get it now for free for the entire duration of the beta — and that is until we see that everyone is happy with it and that it handles just about anything.

Supernova is available for OS X 10.12+ with Windows support planned for later.

With ❤️ from your friends at Supernova

Looking forward to seeing you in beta right now!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store