Import & Export

Last updated: Jul 11th, 2017 (for version 0.7)

Import

Supernova needs the initial design data of the application - after all, the primary purpose of Supernova is to transform the design data to native components. We've decided to support the Sketch first, simply because it offers currently unmatched options and it is open format for the developers.

Supernova's importer does not import the design as it is, but runs it through multiple stages of optimization to ensure that it is imported as close to real application as possible. That means removing redundant layers, optimizing the grouping, flattening the components to become images and more.

Supernova supports version 4.0+ of Sketch, and most of its functionality, including symbols, gradients, masks and many many more. Don't hesitate to use whatever you want, it can handle it.

Supernova uses our own heavily optimized import engine that is both blazing fast and extremely precise, so it can handle dozens of the screens without breaking a sweat. It does not use network or cloud processing, everything runs locally on your machine, providing you with the highest possible security even for the most sensitive projects. Check it out.

Supernova large file import

Future plans note:

We are working to bring full support of more input format than just Sketch. At the end, our goal is to help everyone, and we don't want any designer or developer to feel left out just because of their choice to use a particular tool. Stay tuned for annoucements soon.

Saving & Loading

You can save any project in the Supernova to the disk as you would with Sketch file. This will produce new file called filename.snproject. The file project contains meta-information about your project but it also contains the copy of the Sketch file in the time of the creation of the project.

This is to ensure that the image and data operations can run smoothly and we also do a lot of stuff in the background as you work on your application. You should keep the Sketch Files clean, so the .snproject files are not overly large.

Supernova file format is not open, because we are still working on it and finalizing the specification. Once we are ready, we will open it for public so you can start native building plugins for Supernova. Did we say plugins? Native?

Export

Once you've done all the steps like component conversion, animations, layout and navigation, it is time to finally export the project to a native platform, either for iOS or for Android (and soon, for React as well). Each exporter produces completely different output.

You are able to not only generate entire projects, but also parts of it - Supernova is written as a modular system and as such it is possible to use each exporter (code, assets, UI generators) independently of each other. This is useful when you changed only singular thing, like a layout, and you only want a new storyboard.

Supported platforms

iOS

iOS exporter generates following assets:

  • XC Project with configured targets, schemas, folder structure, and assets from other exporters
  • Universal storyboards with all screens, configured with autolayout and using the native components, including navigation maps
  • Image assets, either in simple directory or in XCode asset catalog in all resolutions
  • Swift source codes describing each screen

Android

Android exporter generates following assets:

  • Gradle project with all the configuration needed to build the Android app
  • Layouts in XML files using native components and constraint layout
  • Image assets in all resolutions
  • Value files (strings, colors, dimensions)
  • Drawables for shapes and clickable backgrounds

React (coming soon)

React exporter is already being tested and should be available within few weeks. Stay tuned.

Image resources

Image resources are generated when Supernova first imports the Sketch file. Supernova ignores the export information (export slices or whatever you use) and instead uses its own heuristics to know what the image resource is and what not.

It is extremely precise (95%+ precision and still improving), although sometimes it can and will over-optimize or under-optimize the layers. You are always able to decompose the layers to the basic elements (use right click > decompose image layer), or to merge layers to an image resources use right click > merge as image. Note that this can only be done with layers created by importing, and not by Supernova.

You are able to change what resources get generated and how they are named in the resources tab (the last left tab).

Simulators

Supernova allows you to test the application on the simulator, assuming you have them installed on your system. To run your application in the simulator, click on the "Simulator" option in the top toolbar, and pick either iOS or Android platform.

Simulators are part of the IDEs that the developers use for the development of the mobile apps. In order to use them within Supernova, you need to satisfy the following:

For iOS Simulator
  • Have the latest XCode installed (Currently XCode 8). If you are using XCode 9 beta, have it installed alongside the XCode 8
  • XCode has to be installed in the default directory. We will allow for customization in the future versions
For the Android Simulator
  • Have the latest Android SDK installed in the default directory
  • Have at least one simulator configured through your IDE

Inline code export

When you select the component, be it an image or table, Supernova generates the code snippet defining the component and all its attributes for you immediately in the right component panel. You can use that code to just quickly orient yourself, say if you want to know the font name and sizes, or to copy paste it to your project. Supernova supports the base format for each platform and we will be bringing a lot more soon.

Swift code
screenshot
Swift + then code
screenshot
Android code
screenshot

That's it, you've done it! Unfortunately, we are out of . Thanks.

At this point, you should have all the design work done and saved a ton of time by simply exporting the final project. The dark age of doing everything by hand is over. Thank you for using Supernova. You rock! Check the news, story unfolds..

Spread the for Supernova - the world's first true design-to-code platform.

AppKit Theme

Enjoying the Supernova?

Thank you for your interest in Supernova. Would you mind to spread the ? Supernova is free in beta, for everyone.

Our goal is to help all the developers out there - and we want everyone to know what we are trying to achieve. We can only do that with your help.