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

The world’s first true design-to-code platform

Ever since the beginning of the first mobile apps, design has played an important role in the development process. The first apps were just text and a simple interface. Though useful, early apps weren’t wining awards for innovative graphic design. Then, sometime later, real design happened.

As design grew in complexity so did the knowledge and the code required to actually create them. But the tools? Tools never caught up.

Nowadays, the design process is completely disconnected from real development. Sometimes it feels as if one team was split into two groups, who don’t see eye to eye. Designers are trying to design apps that are impossible to code and developers are refusing to build pixel perfect apps — but neither is at fault.

There are tools that allow you to collaborate, leave the feedback and hand-off information about fonts and pixels. But ultimately the developer takes the design file and builds everything from a scratch.

It is time the entire development world steps into a new era — where automation connects people once again so they can enjoy their work and stop wasting time on things which have been already done.

Welcome to Supernova Studio.

Introducing Supernova Studio

What is Supernova Studio?

Supernova Studio is the first tool which truly bridges the gap between designers and developers. If today’s tools are a band-aid for the problem then Supernova is your personal team of medical robots straight from the future.

Here’s what Supernova delivers:

✅ 1:1 conversion of design from Sketch
✅ Fully native design components
✅ Creation of navigation chains and user flows
✅ Automatic creation of responsive layouts
✅ Automatic resource detection and export (no need for slices)
✅ Automatic localization to 30 languages
✅ Automatic handling of design resolutions
✅ Full-fledged multi-platform animation engine
✅ Export of code, assets, project, fonts, UI and everything you need for iOS, Android and React Native
✅ Supernova Cloud — one-of-a-kind collaboration platform
⭐ Bonus for all your late night sessions: Light/Dark UI mode

At this point, you’re probably wondering if all of this is just a dream? We can assure you it works. We’ve created an app that has been entirely coded using Supernova.

4 screens, animations, layouts and navigation. How long did it take us?
4 minutes.

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

Supernova + Sketch = 🚀

Supernova Studio has been in development for well over 3 years. We’ve built Studio with the vision that one day UI development will be completely automated and driven by designers.

To fulfill our vision, we haven’t interfered with the most important piece of the process, the tools. People love their tools and they know how to use them. This is why Supernova Studio is not a “design tool” and never will be. Instead, you’ll design the app in Sketch and then import them into Supernova for 1:1 conversion, bringing them to life.

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

When importing Sketch files, Supernova optimizes the design by removing redundancies, fixing colors, creating image resources from paths and shapes, applies masks. We’ve made hundreds of optimizations under the hood with the single goal — so you can’t tell if a developer or Supernova coded the designs.

After the design file is uploaded, everything becomes a native component — either view, image or text. These components are the basic building blocks for every design and you can convert them to more advanced components to extend their functionality.

Native Components & Interactive Preview

In most cases, basic building blocks like views aren’t enough so Studio allows you to convert them to advanced components such as: tables, buttons, collections, maps…to provide you with additional functionality, like scrolling or touch events.

To view the changes and how the application behaves, Studio features real-time preview. When you’re finished editing, simply switch to interactive mode and enjoy the full app experience exactly how your users would. The preview simulates all components, animations, interactions and the responsive layouts.

<a href="https://medium.com/media/321ee7b50a119d83d5b261521a0c6d4c/href">https://medium.com/media/321ee7b50a119d83d5b261521a0c6d4c/href</a>

Starlight — Automatic Responsive Layout Engine

By today’s standards creating responsive apps and supporting any display size is a must. Though building working layouts can be a really difficult process, especially ensuring it works on every device. So, we’ve automated it.

Supernova allows you to create layouts using Starlight for a one-of-a-kind automatic layout solution which is compatible with all platforms — be it iOS (generates as Auto Layout), Android (generates as Constraint Layout), or React Native (generates as FlexBox). You can either make the constraints by hand or let Starlight solve the design and customize the result.

Once your layouts are done, switch to interactive mode and preview them on any device size, down to the last device.

<a href="https://medium.com/media/3502aa454e1d92006612f847f75e97bc/href">https://medium.com/media/3502aa454e1d92006612f847f75e97bc/href</a>

Complete Animation Suite

Making engaging animations is complicated and having them just right is nearly impossible by hand. To ease your pain, Supernova features a full-fledged animation engine that translates what you design to native code for all platforms.

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

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

Navigation Chains

It’s nice to create single screens but not very useful for the user — they’d only see the initial screen. For this reason, Supernova allows you to create user flows — be it normal navigation from screen to screen or switching through tabs.

<a href="https://medium.com/media/2eb3fb86ab8683c2fbed77eee64ca867/href">https://medium.com/media/2eb3fb86ab8683c2fbed77eee64ca867/href</a>

Export to iOS, Android and React Native

So far we’ve highlighted some of the prominent features of Supernova Studio that allows you to bring designs to life — but that is only a prototype.

To truly automate the handoff, we’ve created exporters for each of the major platforms — iOS, Android and React Native. All supporting the entire range of features you’ll find in Supernova. Depending on your platform configuration, Studio delivers:

Source code in Swift, Java, Kotlin or JS, implementing the best practices
UI & Layout definitions like XIBs, Storyboards or XMLs
Assets in all resolutions
Required font files and other supporting assets
Buildable projects with all linked files and configurations
Lots of attention from your friends for practicing dark arts 🔮

<a href="https://medium.com/media/93fe292654e75a37e4a3aee8659c11ed/href">https://medium.com/media/93fe292654e75a37e4a3aee8659c11ed/href</a>

The exporter saves dozens of hours on every app you make — just by clicking a single button. But that is not all…

Introducing Supernova Cloud

We want to revolutionize the entire workflow because the current collaboration platforms still use static images. We’ve build Supernova Cloud — the world’s first collaboration platform that shows your mobile applications as they are. Responsive, localized, built using native components and with zero compromise.

Supernova Cloud is rather large subject so we’ve written a dedicated article. Enjoy!

The Future of Mobile Development Starts Now

We are beyond excited to be launching Supernova Studio and Cloud for everyone after 3 years of development and after nearly after 9 months of our public beta with over than 10,000 users. And this is just the beginning.

In a near future, Supernova will extend beyond mobile and automate frontend development — be it pure html-based or React-based websites. We want to make every designer and developer out there is happy and we are making leaps every day to achieve just that.

Supernova is available now for OS X 10.12+ with Windows support planned for later down the road.

Get your copy of Studio now https://supernova.studio/
Explore Supernova Cloud
Start with our amazing tutorial series — Creation of “Spacebook”
Join our Facebook and Slack communities to discuss anything and everything about Supernova like its upcoming features: websites, models and network creation, plugins and more!

With ❤️ from your friends at Supernova

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

Introducing Supernova Studio

Cool stuff, every week

More Articles