App design

While Supernova allows you to make visual changes to every component, it is not meant to be a design tool. Instead, Supernova helps you to leverage the power of your current design tool and enhances it with powerful features like prototyping and animations - but most importantly, it allows you to convert what you created into a fully functional, production-ready app.

The usual initial workflow:

  1. Design the app inside Sketch or Adobe XD
  2. Import the created design into Supernova, which optimizes the design for you
  3. Convert the layers to components and enhance the design with animations, navigation, and other interactive components
  4. Export the complete project to a production-ready codebase, ready for you to add your app logic

When changes are made:

  1. Design the changes inside your design editor (Sketch or Adobe XD)
  2. Hit the `Refresh’s button and merge changes automatically
  3. Continue from (2)

Importing for the first time

When importing for the first time, a new project is created. To import your design file, either go to File > New > Import Design .. in the top menu or click on the Import Sketch or XD option on the welcome screen.

Lastly, on the lefthand side of the welcome screen, you can select from the list of recent files you've imported from either XD or Sketch. You can also open your recent Supernova save files from here as well.

When you select the Sketch or XD file, you'll be presented with an option to select which artboards you want to import. This is a great way to filter out content that might not be needed - for example it is not recommended to bring multiple states of the same screen to Supernova - just choose the most representative one (because you'll be exporting one screen to the codebase).

If you don't want the preview to be shown on import, you can disable it in Preferences > New Projects > Import Preview

Iterating on designs

No application is ever done - and Supernova makes it really easy to do design iterations. Supernova allows you to seamlessly merge changes made in both your design tool and Supernova.

In order to merge the changes, select the left-most button - Refresh - in the top toolbar. You'll be asked to provide the source file you want to use to merge. This can be the same file you originally imported to create the Supernova project (common), or it can also be a completely different design file - Supernova will either detect that screens were already there (and provide an option to merge the changes), or that they will be added as new screens.

Merging rules

Supernova uses a state-of-the-art recognition engine to understand what changes were done to the original file. Because of the sheer complexity of all the possible outcomes, the exact rules can't be written down. In general though merging shows the following behavior that will always be true, no matter what:

For new screens previously unknown to Supernova

  • Screens will be imported as they are, without changes
  • They are imported using the same optimizations as the initial import of the project (layers are merged together, optimized, converted to atomic components, assets are extracted and so on)

For existing screens already known to Supernova

  • Component types will be preserved
  • Animations will be preserved
  • Navigation (both tabs and navigation bars) will be preserved
  • Changes to names of components will be preserved
  • All component code properties will be preserved
  • Screen dimensions won't change from the original
  • Layout rules will be preserved
  • If a component was added to the source file, it will be added in Supernova to the same place in the component tree. If that place (let's say a group) is missing, it will be under the root view
  • If a component was deleted in the source file, it will be preserved in Supernova. You can then remove it by hand if you truly wish for it to be gone
  • Any design change to a component will override any visual information in Supernova. We consider your source file to be the source of truth for visual information
  • If Supernova is not 100% sure what to do with the component, it will ignore the merging. Usually, this happens when the component is moved to a very different place in the component tree, or modified by external plugins that change its underlaying data heavily. This situation is uncommon, however.

📘

Pro Tip

You can merge multiple design files together and the system will still work. This is great if you are working in a team, with each person responsible for different parts of the app - just split the design file into multiple parts. You can even do really crazy stuff like design one part of the app in Sketch, another part in Adobe XD, and merge them together using Supernova. The refresh system will handle this gracefully.


What’s Next

Learn how to best prepare your designs for Supernova. Hint: You are most likely already doing it.