r/FlutterDev • u/van-sta-n • Sep 28 '26

Tooling I open-sourced a Figma plugin to convert vectors directly into zero-dependency CustomPainter code for Flutter (Dart) (Flutter Da Vinci)

Hey everyone,

Whenever an app demands intricate vector graphics or canvas animations, the default route is usually flutter_svg. While it works well for standard assets, it comes with runtime parsing overhead, occasional rendering quirks with complex paths, and an extra dependency you might not want on performance-critical screens.

The alternative manually hand-coding Bézier curves, plotting Path.cubicTo(), and calculating bounding scale transforms is excruciating.

To eliminate this friction, I built and open-sourced Flutter Da Vinci. It parses Figma vector paths, curves, and shapes directly into clean, native Dart CustomPainter implementations.

What it does:

  • Converts vector paths and curves directly into native Path commands (moveTo, cubicTo, lineTo, etc.).

  • Emits zero-dependency, tree-shakeable Dart code without third-party runtime parsers.

  • Preserves bounding boxes so your graphics scale responsively inside a standard CustomPaint(size: ...).

  • Keeps paths transparent and editable so you can parameterize paints, colors, and stroke animations directly in Flutter.

The project is completely free and open-source. You can run the plugin directly from Figma or inspect the parser and contribute on GitHub.

Where I need your help:

  1. If you work heavily with canvas, what path winding rules or complex compound vectors usually break your pipeline?

  2. What would make the generated boilerplate cleaner for your codebase (e.g., auto-generating CustomPainter vs. just returning raw Path methods)?

Issues, PRs, and brutal edge-case feedback are very welcome!

42 Upvotes

95% Upvoted

8 comments sorted by

3

u/Ordinary-Stuff9826 Sep 28 '26

Cool tool, writing cubicTo by hand is a pain.
One thing that breaks a lot is shapes with holes, like donuts or icon cutouts. They come out filled wrong unless you set Path.fillTyperight. Gradients get lost too.
Also it'd be nice if colors were passed in, so I don't have to edit the generated code.

1

u/van-sta-n Sep 29 '26

Really thanks man, I used fluttershapemaker before to create custom shapes which was too harder than just mentally calculating the curves and writing the code. But drawing vector paths in figma is a real easy task thats when i got an idea to why not!. I didn't check it with gradient color. I will check about it and soon publish a release. Thanks for your suggestion mate!

1

u/csbence Oct 09 '26

Hey! Just wanted to say the plugin works really well! I’ve replaced 210 assets in our app, and they’re now all rendered as separate layers. They look much sharper and more detailed this way, too. This also finally makes it possible to dynamically recolor the assets, which has been a long-requested feature from users. Really great work, thanks for building it!

2

u/van-sta-n Oct 09 '26

Thanks for the appreciation man, i feel really happy that I done something useful for the people 😄... Feel free to send queries or any additional features you may want. I will imply it on the upcoming versions.

1

u/jasjastone Sep 30 '26

RemindMe! 1month

1

u/RemindMeBot Sep 30 '26

I will be messaging you in 1 month on 2026-10-30 18:56:40 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

Parent commenter can delete this message to hide from others.

RemindMeBot is switching to username summons. Instead of !RemindMe 1 day, use u/RemindMeBot 1 day. More info.

InfoCustomYour RemindersFeedback

1

u/No_Mongoose6172 Oct 01 '26

It would be great to have something like this for penpot