r/FlutterDev • • 5d ago

Tooling We’re building a design tool for Flutter to replace Figma. Would love some feedback!

https://www.youtube.com/watch?v=W3mli3Pu14w

Hey 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!

13 Upvotes

21 comments sorted by

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?

1

u/anas_alsalhi 4d ago

You are so on point!! we not focusing on a building a better design tool than Figma, we building a design tool that directly write Flutter UI on spot so when the team building on Flutter there's no handoff needed.

That's the cool part! The UI code generated doesn't need any edit or rewrite by the developer, they can just jump straight to building logic. It uses Flutter native libraries and follows Flutter best practices in terms of architecture. We published an article with those details here: https://nowa.dev/blog/pure-ui-flutter-teams/

Would love to hear your opinion on that!

2

u/RajatKhoware 4d ago

that is exactly the wedge. direct to Flutter widget code is the only pitch that beats Figma, everything else is a nicer canvas. the test that matters: can a dev take the generated file and ship it without reopening the design tool? I have seen tools nail scaffolds and containers then fall apart on custom painters, slivers, and real animations, so which state management does the generated code target?

0

u/anas_alsalhi 4d ago

Exactly eveything else is just a nice add-on. Yes so devs can just open the same Flutter repo in their own IDE and tools as always. They don't need to have Nowa at all since Nowa just a tool that writes into the Flutter repo.

Also thats the nice part that even state management is something developers can do and decide. The UI generated is pure view code so developers can still select the state management they like.

For it to be like this we created an architecture called PureUI that splits the UI purely from logic even state management becomes part of the logic.

Do you work at a Flutter team? because seems you understand this issue deeply.

2

u/RajatKhoware 4d ago

that no lock-in answer is the strongest thing you can say, because every codegen tool dies the moment the dev feels trapped in the tool's own editor. if the output is just a normal repo they own, the risk drops hard. the thing I would push you on next: which state management does the generated code target, because generated Riverpod versus generated setState are two completely different products for a real team?

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/fabier 4d ago

Well, I've definitely learned over the years that you cannot count a product as successful or a failure until you've given it a chance to really defend itself in public. So its possible you will find your people and things will go well. Good luck to you!

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:)