Figma for Flutter: it’s finally here!
A new tool for designing with Figma style, but with clean flutter code generated for free
We all love Figma, regardless if you are a designer or even a developer, its ease of use and flexibility make us able to create wonderful designs with no effort.
But, as a Flutter developer, when you see a great design and it’s time for you to write UI code for it, your usual reaction usually is “Oh no, here the struggle begins”.
It’s no secret that writing UI code is a pain, especially when you hit the Flutter UI system and get errors like:
- RenderFlex children have non-zero flex but incoming height (or width) constraints are unbounded.
- A RenderFlex overflowed by X pixels on the right/bottom
Until you find out that you can’t have widget X inside widget Y without adding extra widgets and code or changing other stuff. Or when there’s no error, but the UI looks weird, the widget positions are a mess, or some widgets aren’t even visible.
We all looked for tools to convert Figma into Flutter code, but we all been very disappointed with the results.
Ladies and gentlemen, allow me to introduce you to the real Figma for Flutter: Nowa 🔥
Nowa is a completely new and modern no/low-code tool that works very similarly to Figma: it allows you to design easily and freely while converting your designs (and even logic) into clean Flutter code, or even exporting Flutter apps directly. It’s time to get the full power of the amazing Flutter framework, without having to fight coding every pixel.
Let’s have a look at how Nowa and Figma compare :
Easily draw in the Canvas 🎨
With no struggle or constraints, Nowa gives you the same free-style design feeling that Figma does, allowing you to get your creativity to the max with no limit
As in Figma, you can add elements, draw shapes and screens, and move objects around freely, but even better, you can drop and customize Flutter widgets directly.
Create advanced designs with components 🖋️
Nowa offers also advanced design features that are needed for creating stunning designs easily. For example, you can create a UI component in just a few clicks, customize it as you need, and duplicate it in different places where they are all linked to each other.
Create responsive apps 📲
Since your Flutter apps can run on so many devices with different screen sizes, having a responsive design is not an option, it’s a must.
Nowa allows you to have full control of the responsiveness of your designs, with advanced layout options that organize your elements as you wish, so your layout will defeat any screen size trying to mess it up!
Add Animations and make them react to events 👀
With Nowa, you can add different types of animations like Lottie and Rive. You can also make them react to events. See how the bear freaks out when the user enters the wrong credentials
Test your application 🤳🏻
The “Play mode”, similar to the figma preview, is a powerful way to test your app to make sure it looks perfect.
Nowa spice it up even more: you can select the exact device and platform you want to preview your app on, and even set the orientation and other device settings. This way you can really make sure of how your apps will be perceived by users.
Easily to get the code of your designs (or export an App directly)🧑🏽💻
While you are being creative and doing things, Nowa is converting that work into Flutter code in real-time. The code is clean and ready to be used!
With one click only, you can download the full project as Flutter code. You can even view the code itself inside Nowa before downloading it or to checl the code for specific screen or component.
If you are not a source-code fan, you still can export directly the app from Nowa itself with a click! You can export as web app (HTML, CSS, JS), Android (aab/apk) or even deploy directly to App store for iOS
Or you can have a local Flutter project, and connect VSCode and Nowa to the same project while using them both side by side (Possible with Nowa Desktop version).
Not just a designer, it goes beyond that
You can make your designs alive by adding variables to the design itself and using Nowa’s logic editor to build custom logic. You can do state management, create callbacks for UI fields, and more.
With also has tools to integrate REST API requests, Supabase, and soon Firebase into the app with few clicks and without the need to code or dive into some messy and complicated documentation.
Future updates 🚀
Nowa is at the beginning of making professional app development easy and creative. With more features coming on the way like an expanded widget library, plugins, SVG support, animation editor, and more features related to the logic. You can take a look at the roadmap for more details.
Try it now for free! 💸
You can use the full editor and download the Flutter code for free. Sign up now and give it a shot here
Lean more about Nowa
Check out Nowa’s YouTube channel, and documentation, and join the community on Discord.
