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.
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.
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.
Animations
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.
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.
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 🔮
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.
- Sign up to get your copy now: https://supernova.io/download
- Get started: https://supernova.io/
- Learn with our awesome documentation: https://docs.supernova.io/
- Join our Facebook and Slack to discuss all you wish to know and hear all about upcoming features, like React, automated model and network creation, service integration, plugins, and more!
With ❤️ from your friends at Supernova
Looking forward to seeing you in beta right now!
