Extracting Assets

Preparing assets is usually a really tedious process. You have to mark layers as exportable or create slices that will be then used to identify them. This process not only adds additional overhead but also additional problems. Assets have to be properly scaled, precisely cut out and many other tasks, not to mention exporting for different platforms.

It can take hundreds of hours to prepare the assets for production. With Supernova, however, you don't have to do any of it.

Automatic Asset Detection

Supernova introduces a fully automatic system for exporting the assets, one completely independent on any input preparation at all. There is no need to mark anything as exportable, nor create slices out of layers.

Supernova can smartly detect what the assets are and extract them on import for immediate use. Not only that, but it fixes all the issues that are usually present in the process - duplication of the assets, scaling, working with bitmaps and vectors, different formats for different platforms and so on.

The naming of the assets is taken from the original names of the layers, however, if you don't like what was created, you can override the name by going into the resource panel on the left, selecting the asset and renaming it to your liking in the right panel.

Bitmap and Vector Assets

Supernova can extract both vector and bitmap assets for you. The recognition engine extracts vector assets first - bitmaps are only created if they can't be represented by vectors, for example, an actual image put into the screen. It is of course completely up to you if you want to use vectors for exported projects - you can always disable that option on export and all the vectors will be rasterized.

The solution also handles duplicates. When importing, assets are compared to already existing ones and duplicates are thrown away, referencing the existing ones instead.

Same assets are detected and merged together, so only one reference is created. 
This is extremely useful for iconography, such as back buttons, profile icons and othersSame assets are detected and merged together, so only one reference is created. 
This is extremely useful for iconography, such as back buttons, profile icons and others

Same assets are detected and merged together, so only one reference is created.
This is extremely useful for iconography, such as back buttons, profile icons and others

Automatic Import Scaling

Supernova handles scaling of imported designs for you. Are can design in 1x, 2x or 3x of the normal size and Supernova will make sure everything is scaled down to an appropriate size that is used inside the app.

For example, let's say you are designing for iPhone 8 which has a size of 375x667px. However, you are designing at 2x size, 750x1334px. Supernova will detect that this is the case and will scale everything down by a factor of 2 (that not only means sizes of elements but also things like font sizes, line heights and many more.

By doing this, it always ensures that your designs are in the correct size when exported for production.

Automatic Export Scaling

You can configure all the exporters to produce asset sizes which you'd like to get. Supernova supports all asset sizes for the targeted platform. The full list of supported asset sizes is as follows:

  • Flutter: @1x, @2x, @3x
  • iOS: @1x, @2x, @3x
  • Android: mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi
  • React Native: @1x, @2x, @3x