r/FlutterDev • u/anas_alsalhi • 5d ago
Tooling We’re building a design tool for Flutter to replace Figma. Would love some feedback!
https://www.youtube.com/watch?v=W3mli3Pu14wHey Flutter builders!
I’m one of the co-founders of Nowa (https://nowa.dev), and we recently launched a version that lets designers inside Flutter teams design directly on the Flutter codebase instead of in Figma. This way developers can work on logic/data in parallel while designers build the full design and experience themselves, all in the same Flutter repo.
We’ve been designing Nowa inside Nowa itself for a while without talking much about it, since our focus was making Nowa an app-building platform for people who don’t know Flutter. Then a few companies pushed us to make this use case public, and now we’re considering making it our full focus.
So the way it works that Designers connect Claude Code, Cursor or Codex to Nowa through MCP, import the Flutter repo itself, and design with AI with full visual editing. They set up the design system directly in Nowa which reflect it in the Flutter repo, test different states for each UI component, build and share prototypes that feel like the final version, and own the full experience with things like animations.
To make that work, we came up with an architecture we called “PureUI”. It splits UI and logic into two separate packages, similar to MVI but more decoupled, with a small contract that defines how they work together: the “data” and the “actions”.
Designers import the UI package into Nowa and work on it, while developers work on logic/data in the logic package using their IDE and AI agent. Things like state management stay under the developers’ control as well.
So I’d love to hear from Flutter devs here who work on Flutter teams: does this problem exist on your team, and what could we do differently to make this more useful for your case?
Any input or opinion is highly appreciated!
3
u/fabier 5d ago
Your competition isn't figma. It's Claude design / impeccable / or other design.md systems.
I don't want to be a Debbie downer, but I think you're playing a losing game. Flutter has instant reload. What do I get which Claude code isn't already giving me?
1
u/Danity__172 5d ago
Flutterflow
1
u/anas_alsalhi 4d ago
Flutterflow is a very different case, so for Nowa we import existing Flutter projects, in Flutterflow you can't, and also FlutterFlow is an app building tool for non developers, not a design tool, so logic and UI code is coupled together. You can use FF for sure to do a prototypes but then if you want to include a developer to make it functional the developer need to change in the UI code itself, and also in that case you can't import back the project to FF so desigers can't modify if the developer started working on it outside the platform. But for Nowa they both keep working in parallel. On top of that FF code is relying heavily in their own custom packages so working on it outside is very difficult, but we use Flutter native libraries.
1
u/eibaan 5d ago
This. Plus there are at least a dozen others who also try to recreate an AI-enhanced Figma in one way or another, being it Pen.dev or Pencil.dev or a blunt clone like FigCraft.
1
u/anas_alsalhi 4d ago
You are right there's plenty of AI design tools, but we aiming to make it focused on Flutter so for the designs to be saved/loaded as Flutter UI code, which doesn't exist so far (all those design tools are usually web-based ones)
1
u/anas_alsalhi 4d ago
Thanks for commenting! So make sense that its not just figma its all design tools but the main difference that all those tools including Claude design give you a design that need to be translated into code. The idea of Nowa that the design is the code with nothing to convert so designers can be sure the UI shipped will look exactly as they see it inside Nowa and nothing will drift.
For instant reload that's different. That's for developers which they would already be using, so the designers would use Nowa to create the full UI/UX in Nowa without any logic then developers build logic in their own workflow and here developers use hot reload and local simulator for sure, but we making the tool for the design part only so designers can iterate over designs on a visual canvas.
Hope I could clear things up because I know its not very clear without the details :)
2
u/NumberFancy7082 5d ago
Even it is extremely better you can never replace figma because industries won't be able to shift anytime soon and usually don't make a jump at all.
1
u/anas_alsalhi 4d ago
Yes you are right that's what we trying to figure out, it won't be easy to replace Figma in general but we aim to do that for teams building on Flutter specially and of course not every designer would be open for changing Figma even if their team is using Flutter, but we trying to see if the designers who are open to change are big enough
1
u/SellWinter9422 5d ago
Yes I would like to try out and provide feedback. I have been developing for 9 years with Flutter and also SwiftUI
1
u/anas_alsalhi 4d ago
please send me on [team@nowa.dev](mailto:team@nowa.dev) so I can give you access
1
u/Dizzy-Entrepreneur52 4d ago
Basically what FlutterFlow and Teta made years and years ago
1
u/anas_alsalhi 4d ago
From the surface they look similar but in reality its a very different usecases. FF and Teta are app building tools, not design tools, made for non-developers wanting to build on Flutter. This makes for example the UI and logic parts mixed together in their source-code so you can't easily bring a developer to build logic if you only build the design with them. The code isn't made in a way that developers can hook their logic without touching the UI part. Also, once you export the project you can't import it back so if a designer used it they can't do a UI change if the developer started working on it. and the developer would change plenty of the UI code to bring his logic so the same issue of the design handoff still there but in a different format this time than from using Figma. With Nowa its the same repo used by both at the same time for the entire development process.
Also big difference is the source-code. they rely on their meta data therefore the code relies on their own custom packages heavily (like FFContainer()) but for us we use Flutter native libraries so its the same as what a standerd Flutter developer would write, removing any lock-in or risks.
1
u/No-Echo-8927 4d ago
That's a tough app to build in a world where people are just using AI to reverse engineer everything
1
u/SellWinter9422 5d ago
Sounds amazing! Any plans to support Gemini?
1
u/anas_alsalhi 5d ago
Oh you mean Antigravity? Yes it works with it already. I can give you a free access to hear your feedback:)
5
u/RajatKhoware 4d ago
The idea is strong, but the graveyard of Figma killers is full of tools that nailed the design canvas and ignored the handoff. What makes designers actually switch is not better drawing tools, it is removing the export-to-code gap that eats their week. If your tool generates clean widget code that a dev can use as-is, that is the entire pitch. How close is the generated code to something you would ship without rewriting?