Hey everyone, need some help here!
I’m pretty comfortable doing the usual workflow of taking Figma designs and turning them into Flutter apps. I’ve been doing that for a while now and it’s become second nature.
But now I’m facing the opposite challenge. My client wants me to take some existing Flutter code and create Figma design files from it. Basically the reverse process of what I normally do.
Has anyone dealt with this before? Are there any tools or methods that can help me recreate the visual designs in Figma based on Flutter widgets and layouts? I’m not sure where to start with this backwards workflow.
Any suggestions would be really appreciated. Thanks in advance!
Ugh, such tedious work! I used Flutter Inspector to pull widget info, then manually rebuilt everything in Figma. No automated way unfortunately. Pro tip: check the widget tree first to understand the layout structure - way easier than trying to recreate components from screenshots alone.
Been there! Had a client six months ago who needed their Flutter app handed off to a new design team. No magic tool exists to convert Flutter back to Figma - you’re doing this by hand. Here’s what worked: run the app on different screen sizes and screenshot everything systematically. Use those as reference while rebuilding in Figma. The annoying part is pulling exact colors, fonts, and spacing from your code. I kept the codebase open in one window, Figma in another, and matched the styling properties. Takes forever but totally doable. Plus side? You’ll get way cleaner design files since you’re building them knowing how they actually work.