Preparing designs

Having properly structured, well-organized designs is a must in order to successfully use Supernova to its fullest potential. The good news is that you are probably already doing everything you need to do anyway, since we just expect typical best design practices - this document mostly highlights these best practices and explains what Supernova does behind the scenes.

Removing Extraneous Layers

The first thing to do is to remove everything that is not useful for the final design - e.g, any messy layers that are not visible or extraneous layers with no real purpose should be gone. You can hide them as well - hidden layers will not be imported into Supernova.

📘

Pro Tip

Be diligent when clearing the layers - often there are a lot of layers that slow down even the design process itself. Making sure the design is clean is a great way to make your process easier going forward - both in your design environment and in Supernova.

Naming

Naming is another often-overlooked part of the design process. While names in the design are not controlling factors in import and will be imported exactly as presented in the design editor, they are extremely important for the export part - initial names of the layers are used to actually name properties that developers use to access the code components.

📘

Pro Tip

Name layers after you've structured your design first, saving yourself a lot of time. Also, use meaningful names as you would use to describe the thing the layer or group represents to a real person. For example, if there is a list of data that should show user messages, name it "message list" - your developers will thank you later.

Structuring & Grouping

Structuring is the most critical part of the entire preparation process. Flat designs are usually not great for either design work or development - in fact, some structures are simply impossible to code when not structured correctly. Structuring designs is very easy - follow these easy rules:

  • Group everything that logically belongs together. This means things like navigation bars, tab bars, headers, lists, all should belong to their own separate (properly named) group
  • Group paths that make up an asset - these are automatically picked up by Supernova’s asset extraction engine. There is no need to mark them as exportable/slices, those directives are ignored because Supernova already knows what needs to be extracted
  • You can use boolean operations for vectors instead of grouping as well
  • Don't create unnecessary levels of nesting - for example, if you group the same layer twice, Supernova will remove the unnecessary group anyway so there is no point in doing that in the first place

Preparing Assets

There is no need to prepare assets in any way. Just make sure that your icons are properly named - the rest will be done through Supernova’s asset extraction engine. In fact, the engine is so powerful that it even handles things like duplicates for you (no more scrolling through 20 identical back buttons that you have to remove manually). This goes for both bitmap and vector assets. Slices and "exportable" configuration from your design editor are unnecessary and are therefore ignored.

Navigation Flows

Navigation flows from design editors are ignored for now and need to be created in Supernova. The reason for this is that design tools use hotspots to drive prototyping flows - hotspots do not actually translate to the development world, however. In Supernova, navigation connections never start from "areas" but from components instead.

If you create navigation exclusively in Supernova, you'll get additional access to many tools (like tab bars) that design tools usually don't handle well or at all. As an added bonus, if you change your design and use the refresh functionality, navigation connections will stay intact so you'll never lose your work.

Layout Data

Supernova takes your layout data as a suggestion - it is not imported 1:1. The Starlight engine we've created is nearly flawless at inferring how the layout should work even when you don't provide any hints.

📘

Pro Tip

If the only reason you’re setting your layout in your design editor is to transfer it to Supernova, don't spend time on it - the inference engine in Supernova is smart enough to do all the layout work for you when the design is imported. Set the layout within your design editor only if you are planning to use it for different purposes.

Symbols

Supernova supports the entire range of features that symbols in Adobe XD and Sketch offer. We encourage you to use them as often as possible, as they make your job significantly easier.

🚧

Reusable Components

When you import symbols to Supernova, they are reconstructed back to their original form and are no longer shared instances. We are however working on reusable, production-quality components which will convert symbols into actual components that can be reused throughout the app. So using symbols extensively now will get you ready for this. Stay tuned, we'll let you know when it is ready!

Watch the video

We've prepared a video explaining exactly how to prepare your design. Enjoy!