Typical Workflow

Working with Supernova closely follows the current workflow of most teams - preparing screen designs, making high-level prototypes based on those designs and then converting them to real apps. Supernova sits between design and development tools and automates this process.

Here we'll outline a suggested workflow that works especially well with Supernova. Note that this is not a mandatory workflow we're forcing upon you - there are other ways to incorporate Supernova into your workflow - but if you are searching for a seamless way to use Supernova, here is a guide.

1. Preparing your design files

To get started, designs from either Adobe XD or Sketch need to be prepared for use in Supernova. Usually, this just means keeping things well-organized, named and structured.

Supernova doesn't put any constraints on the user - the naming or the structure is completely up to you - as long as you keep the design clean. In general, the more structured the design is, the faster you will get to production code and the easier it will be to do future iterations on the design itself.

Learn more about how to prepare your designs here.

2. Converting components to more complex types

When a design is imported, all layers become atomic, production-level components - views (groups), text containers (labels) and image containers (bitmaps or shapes). Every component in every app out there, such as a calendar, is made from a combination of those 3 atomic components.

Since Supernova is a semi-automatic system, it prepares what it can on its own - but you still need to tell it the exact behavior you want. For example, it is possible to take a layer group and "convert" it to a button - visually preserving the information, but extending the functionality in the process.

Read about how components give your designs superpowers here.

3. Making the app responsive

Making responsive apps is hard - layout systems differ for each platform and are generally only supported by design editors in a limited or incomplete fashion.

Supernova's Starlight layout engine configures and simulates layout behavior in real-time and exports the layout rules correctly for iOS (Auto Layout), Android (Constraints Layout), React Native and Flutter (Flexbox).

The best part about using Starlight is that it is fully automated - just importing the design to Supernova makes the app fully responsive with nearly 100% accuracy, with the option to change any assumed behavior at any point during the development process.

Read about how to make your app responsive here.

4. Adding animations, navigation and other prototyping options

Having separate screens full of production components, albeit very powerful, is not enough to make a great app. Users need to navigate from screen to screen and small touches like micro-animations go a long way to make the experience more enjoyable. After you are done converting components to their final types, it is wise to turn the screens into a full-fledged app prototype.

Supernova boasts complete, state-of-the-art animation editor fully backed by a production code for iOS, Android, React Native or Flutter, options to create navigation connections from components to other screens, localize the app either manually or automatically using a powerful neural-network-based translator and many other options to make your app prototype as close to reality as possible.

Read about how to make your application feel great here.

5. Testing

Since Supernova is backed by production-ready code, it can immediately compile the app for your device - either a real one connected to your computer or a simulator for each supported platform. This is especially great for identifying the design differences between platforms - each platform inevitably has its own quirks, and while Supernova tries its best to capture them, additional validation never hurts.

Learn about working with simulators and using preview mode here.

6. Obtain the production code

There are multiple ways to get production code out of Supernova - which one you should choose depends on your current use case.

  • CodeX - Our real-time code generation engine that gets engaged when you open its split-screen or floating window inside Supernova Studio. This allows you to do design modifications while always having access to up-to-date code. We've made it super-easy to copy-paste the code with some nice additions like highlighting all the code required to code a selected component, scrolling to selection, and more.

  • Exporting Screens - If you don't need the entire project, or you are iterating or adding screens one by one, you usually want to export just a single screen. Exporting a specific screen will give you all the required code and assets to add it to your existing project.

  • Exporting Projects - Lastly if you are starting a new app, it is usually best to export the entire project. This option exports a fully-working project, depending on the platform of choice, in many pre-defined variations - allowing for heavy customization of how the project looks at the end.

Learn more about exporting production code here.

Iterations

No project is ever truly complete - there are always iterations, fixes or changes along the way. Supernova allows for easy merging of design changes done in external design editors while preserving everything done within Supernova on your project. There is a wide array of customization options for codebase export as well - so it is easy to merge code changes with existing codebases.


What’s Next

It is time to get to work! Let's dive into the details and master Supernova.