When we first started Supernova, the only supported platform was iOS. Eventually, as we added full support for the most important technologies like storyboards etc., we’ve started to expand to different platforms, such as Android and React Native.
For a long time, those 3 platforms basically owned most of the market share, but a new and very exciting player has emerged — straight from sunny California — Google with their new Flutter platform.
Today, we are happy to introduce full support for Flutter in Supernova, including all the sweet things that people love to use: micro-animations, transitions, localizations and more. More importantly, the Flutter exporter is fully-customizable based on best practices.
Let’s dive into what the new exporter has to offer.
From Sketch to Flutter in a few minutes
Supernova allows for the seamless conversion of designs made in Sketch (more platforms coming soon) to native code for a specific platform — all in real-time. Sounds impossible? Well, you better see it for yourself! Supernova is especially useful for small-to-medium sized applications where you can iterate extremely quickly, all while getting production-ready code in the process.
First, create the design in Sketch. Once that is done, it is time to import into Supernova! Supernova takes the design and does some really clever optimizations on top of it, converting the design layers to something that is very close to the mobile app. Let’s see it in action.
When the design is opened in Supernova, it immediately generates the underlying application and the code for it. It is possible to switch between specific platforms and always get the code for it. Optionally, it is possible to export the code for the entire project (or specific screens) to the disk as well.
It is also possible to convert a group of design layers into more complex components, such as buttons, list views etc. Supernova intelligently understands what information is needed to build which component and seamlessly transfers the data between them.
Learn to code in Flutter using Supernova
Because Supernova generates underlying code in real-time, it is an absolutely phenomenal tool to start learning “How to Flutter.” And, because Flutter is really different from most other platforms today — especially because the container structure might take a bit of time to get used to — playing around with the design in Supernova might be the quickest way to get to know the concepts.
Do any change, and it immediately propagates to the code. Change the structure, remove or add new components, and see how it changes. Or feel free to experiment with it however you like. All the actions are always undoable :)
A lot to come in the next few months
While we are really excited about the state of the Flutter exporter now, it is really just the beginning. We’ll be adding a lot more features in the next couple of months such as styles and reusable components both to the Flutter and other exporters, and we can’t be more excited to see what you’ll build with it.
Let us know what you think and happy building!
Until next time,
Team Supernova ❤️
- Get a copy of Supernova Studio now at https://supernova.io/download
- Start with our amazing tutorial series — Creation of “Spacebook”
- Join our community Slack to discuss all you wish to know about Supernova and its upcoming features, like websites, model and network creation, plugins and more! Our community is what we are the proudest of. It is lively and everyone there is amazing. Come join us.
- Follow us on Twitter and Facebook to get the latest and greatest updates not only about Supernova but about design in general as well.
