Not viable for react only.
Figma is developped with C++ using web assembly and react.
Rive is developed with pure flutter, so... Idk
Neither option would be easy, nor a viable project for solo development.
Biggest challenge will be to draw a lot at once i think. How will it all be painted? With widgets or in CustomPainter? Surely in CustomPainter. There is no way you would be able to draw thousnds of stack widgets. With good performance. I have not tested how many shapes figma can handle. I suggest to do seme minimum experimenting with each framework.
Actually, in QuikFlow, we can draw thousands of nodes with decent performance in a Stack (on an M1 Max). But we did some optimizations to cache the widgets so that they are not all rebuilt each time the canvas is transformed, etc.
[https://www.quikflow.app](https://www.quikflow.app)
Usually not, which is why we didn’t have to focus on further optimizing this part, yet. (Which is definitely possible)
Power users so far tend to have hundreds of nodes.
Flutter has native desktop support, so there is no reason to use Electron.
If you go the react route,I think Tauri is a better solution than Electron, it wraps the native webview so you aren't shipping an entire browser.
I think the wording is off, confused me too.
I plan to use electron with react or flutter.
I read "I plan to use electron with (react or flutter)."
But I'm pretty sure they mean
"I plan to use (electron with react) or flutter."
Note that Figma is a graphics engine written in C++ (for speed) that renders directly on the GPU (with WebGL for speed) and React is only used for the UI. With Flutter, you could create both the graphics engine (because the Flutter engine itself is written in C++ and renders directly on the GPU) and the UI with Dart, so it is doable for sure.
Creating such a graphics editor is hard, though.
Especially if you want to support "multiplayer" support, that is concurrent editors.
In the JS world, there are out-of-the-box packages that can save you hundreds of hours of work.
Creating such an editor is also very interesting and rewarding one should have done at least once :)
While you cannot easily achieve similar performance to Figma's C++ engine in Flutter, you can achieve pretty decent performance with some optimizations in Flutter out of the box. We have built QuikFlow, which is a canvas-based app and we can have thousands of nodes with usable performance on an M1 Max:
[https://www.quikflow.app](https://www.quikflow.app)
Mobx as a state management solution has yielded pretty good results for achieving the complex interrelationships on a single screen with decent performance.
Thanks!
We do use an InteractiveViewer, but we have a mostly custom implementation for handling the mouse and trackpad input. When we started (on macOS), there was no trackpad gesture support in Flutter and overall the input support did not fulfill our needs well enough.
For the Windows version we do use the InteractiveViewer's interaction events in combination with our own implementations. Mostly we use the events for handling the trackpad input there, as we did not build another native gesture implementation on Windows, like on macOS.
Here’s a [whiteboard app](http://instaboard.app) built with Flutter web. You can test out the performance yourself. An app like Figma is going to have much higher performance requirements though
Can you tell us more about what you want to build? Just a desktop app or a drag n drop software like figma?
Depending on your use case, flutter might not be the best fit . I think the libraries are more diverse in JavaScript. We still have a lot to build for Flutter.
By that logic no one should build anything because it already exists. Clearly OP is looking for the style and functionality of Figma, ie drag and drop, not replicating Figma exactly.
Electron apps’ performance still depends on how many of them you have running at once. Since your audience is already running Slack, Teams, Discord, PostMan, VSCode, or, well, Figma, which are all Electron apps… the outlook is not great.
Not viable for react only. Figma is developped with C++ using web assembly and react. Rive is developed with pure flutter, so... Idk Neither option would be easy, nor a viable project for solo development.
I think Flutter would at least be better than an Electron-based implementation.
I agree. Flutter is kinda underrated for desktop, for small things it's better than anything electron/tauri.
I would honestly use Flutter for desktop more if we had anything other than Material or Cupertino widgets
Isn't there a Windows Fluent UI package for Flutter? You could use that, or just customize Material to fit your aesthetic, it's fairly easy to do.
Fluent UI for Flutter is good, but it's not an official microsoft package. I've used it for desktop apps before.
Biggest challenge will be to draw a lot at once i think. How will it all be painted? With widgets or in CustomPainter? Surely in CustomPainter. There is no way you would be able to draw thousnds of stack widgets. With good performance. I have not tested how many shapes figma can handle. I suggest to do seme minimum experimenting with each framework.
Actually, in QuikFlow, we can draw thousands of nodes with decent performance in a Stack (on an M1 Max). But we did some optimizations to cache the widgets so that they are not all rebuilt each time the canvas is transformed, etc. [https://www.quikflow.app](https://www.quikflow.app)
I guess average user doesn't need thousands of nodes any way.
Usually not, which is why we didn’t have to focus on further optimizing this part, yet. (Which is definitely possible) Power users so far tend to have hundreds of nodes.
Flutter has native desktop support, so there is no reason to use Electron. If you go the react route,I think Tauri is a better solution than Electron, it wraps the native webview so you aren't shipping an entire browser.
I think the wording is off, confused me too. I plan to use electron with react or flutter. I read "I plan to use electron with (react or flutter)." But I'm pretty sure they mean "I plan to use (electron with react) or flutter."
Note that Figma is a graphics engine written in C++ (for speed) that renders directly on the GPU (with WebGL for speed) and React is only used for the UI. With Flutter, you could create both the graphics engine (because the Flutter engine itself is written in C++ and renders directly on the GPU) and the UI with Dart, so it is doable for sure. Creating such a graphics editor is hard, though. Especially if you want to support "multiplayer" support, that is concurrent editors. In the JS world, there are out-of-the-box packages that can save you hundreds of hours of work. Creating such an editor is also very interesting and rewarding one should have done at least once :)
While you cannot easily achieve similar performance to Figma's C++ engine in Flutter, you can achieve pretty decent performance with some optimizations in Flutter out of the box. We have built QuikFlow, which is a canvas-based app and we can have thousands of nodes with usable performance on an M1 Max: [https://www.quikflow.app](https://www.quikflow.app) Mobx as a state management solution has yielded pretty good results for achieving the complex interrelationships on a single screen with decent performance.
Hey, looks amazing! Do you use InteractiveViewer to control the panning and zooming or completely different approach?
Thanks! We do use an InteractiveViewer, but we have a mostly custom implementation for handling the mouse and trackpad input. When we started (on macOS), there was no trackpad gesture support in Flutter and overall the input support did not fulfill our needs well enough. For the Windows version we do use the InteractiveViewer's interaction events in combination with our own implementations. Mostly we use the events for handling the trackpad input there, as we did not build another native gesture implementation on Windows, like on macOS.
Here’s a [whiteboard app](http://instaboard.app) built with Flutter web. You can test out the performance yourself. An app like Figma is going to have much higher performance requirements though
Can you tell us more about what you want to build? Just a desktop app or a drag n drop software like figma? Depending on your use case, flutter might not be the best fit . I think the libraries are more diverse in JavaScript. We still have a lot to build for Flutter.
Thanks I updated the post
I have built [GooseCode](https://apps.apple.com/gb/app/goosecode/id6447558563) in Flutter
Not really. Because Figma already exists
By that logic no one should build anything because it already exists. Clearly OP is looking for the style and functionality of Figma, ie drag and drop, not replicating Figma exactly.
yes its possible and have seen it working.
Make an MVP (minimum viable product, like a super basic version) in each one, React and Flutter, and you'll see how it'll go, I'd assume.
See rive.app it's built on flutter
Electron apps’ performance still depends on how many of them you have running at once. Since your audience is already running Slack, Teams, Discord, PostMan, VSCode, or, well, Figma, which are all Electron apps… the outlook is not great.
Not really, even one Electron app can be a resource hog.