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

Our biggest update has arrived. Now with 100% more awesome code generation.

Since launch last month, we’ve released 1 major and 9 minor patches. That averages out to a release every 4 days. And with that — here’s another jam-packed release full of amazing features!

Real-time code preview for the entire screen. One of many things V2 brings!

We’ve been hard at work making code generation as customizable as possible. We’ve listened to all your feedback (thank you!) and believe these changes have made Supernova significantly more powerful. Here are some of the highlights:

🔥 Real-Time Platform Mode (iOS, Android, React Native)
🔥 Code Customization
🔥 Real-Time Code Preview
🔥 Machine-Generated Code for iOS
🔥 Powerful Studio Settings & Preferences
🔥 Performance Settings
🔥 And Finally.. Import Preview and Selection

Now, designers and developer will have a much easier time building apps faster than before while customizing app to their specific needs (or person coding it). Let’s review what these features do for you!

Real-Time Platform Mode

Platform mode allows you to change Studio to a specific platform. This affects dozens of things, most importantly labeling (iOS: Table View, Android: Recycler View, React: Flat List) and behavior of certain actions and properties.

In reality, the experience is much improved because it is now unique for the specified platform. We plan to expand this feature heavily in the coming months to bring you platform specific preview and other sweet things!

Different captions in each platform-specific mode. The circle signifies that the property is required for that platform and will get autogenerated if not provided — one of the many things that changes real-time

Studio Settings & Code Customization

Supernova is a vast and powerful system but it was missing one crucial element — while we, the developers, could modify the behavior of pretty much anything we like, our users couldn’t.

This was particularly problematic when generating code. Every developer prefers his own style and it’s something that changes over time or even by project. For this reason, we’ve prepared the extensive Studio Settings. Not only does it allow to change the behavior Studio but it allows for complete control over the generated code, for all the platforms. YAY!

Let’s take a look at the comparison between two completely different styles of the code that are now both achievable in Studio Settings.

The same screen, the same functionality but a completely different output — how you set it up, is up to you.

Real-Time Code Preview

Real-time code preview shows the code preview for every platform and all the screens right in the interface of the Studio. Generated precisely as they will show in the full export. And you can copy the code too, making it easier if you want to do a smaller changes without the full export. 😃

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

Machine-Generated Code

The ultimate goal of Supernova is to allow for flawless machine translation of the UI to the code and seamless integration with the rest of the codebase that is created by the developers afterwards. With today’s update, we are one step closer to fulfilling our dream.

Machine generated code allows developers to create code that is completely independent of the codebase using subclassing and method heavily used when generating model classes, for example. When enabled, Supernova generates 2 files per each screen:

ClassName — The file where custom code resides
_ClassName — The file which regenerates with every UI change

This allows for extremely quick replacement of the new UI iterations — simply by replacing the entire folder Supernova generates with the new version.

Additionally, we’ve created several options to generate the folder structure of each project. In total, 12 folder structure combinations will cover the vast majority of how the projects can be structured.

Without the machine code, it is hard to extend the generated code because it would get overwritten.With machine code, prepared code is completely clean and ready to be extended. The /generated folder can easily be replaced 1 to 1 with the newly generated version while the codebase is built.

Currently, this features is available for the iOS and we’ll be bringing it to Android and React Native very soon.

Performance Settings

Many users asked for performance settings so we’ve reworked the rendering engine to allow for additional settings. V2 allows for 3 different rendering settings for each category of rendering tasks:

Normal — Formally the V1 default
High — Resolution dependent setting, x1, x2 or x3
Ultra — GPU-powered vector rendering that is independent of resolution

We’ve ensured settings are performant enough, even on the lower-spec machines as ultra is becoming the default settings for all users. Here is the comparison image between each mode:

Comparison: Normal, high and ultra settings. Ultra looks especially sharp with large zoom factor.

And Finally…Import Preview

The highly anticipated improvement of V2, is the ability to preview designs pre-import. This allows you to filter and choose screens from your app, instead of importing all screens.

The preview has also been reworked with the new rendering engine so it will now be much faster than before.

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

Your Trial Has Been Extended ❤️

In celebration of V2, we’re extending the trial of all registered users on Tuesday, April 24th by 7 days. We want you to use the new features and experience the improvements for yourself.

You can read the full list of improvements on our new dedicated release page which includes the details of all updates since launch.

Hope you like what you see and happy coding!

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

With ❤️ from your friends at Supernova

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

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

Introducing Supernova V2

Cool stuff, every week

More Articles