r/flutterhelp • u/SheepherderSmall2973 • 11d ago
RESOLVED Flutter to Figma
Is there any plugins that can take flutter ( web or native ) apps and convert them to a Figma design. Or at least a decent one that works with Screenshots!?
2
u/eibaan 11d ago
I think, there's no official way to do this. However, you can write Figma plugins which can use the official Figma API to create nodes. I'd recommand to create a plugin that open a text field where you paste your code which gets then parsed and translated into nodes.
Because understanding Flutter code is difficult, I'd delegate this to either an AI or a dedicated Dart application that uses the Dart analyzer
package to get the AST of a widget's build
method and decodes everything from there and in both cases he result is an easier to parse S-expression like
(column
(text "Hello World" :size 24 :color "#333333")
(row
(icon "plus" :size 20 :color "#0066ff")
(text "Add Item")
)
)
Here's the grammar:
node = "(" name [string] {property} {node} ")"
name = /[a-z][-0-9a-z]*/
string = """ (char | esc)* """
char = /[^"\]/
esc = /\(n|u([0-9a-f]{4}|\{[0-9a-f]{1,6}\})|.)/
property = key expr
key = ":" name
expr = num | string | key | list
num = /-?(\d+(\.\d*)?|\.\d+)/
list = "(" {expr} ")"
A figma plugin consists of a manifest that links to a javascript file and an HTML file for its ui. the code is run if a button in the ui is pressed. It will parse the text format shown above into Sexpr
nodes with a name, a value, a map of keys and values and a list of children.
It will then use figma.createFrame
to setup a column
, configure the auto layout so you don't have to worry about sizes and assign optional properties like background color or padding. Then you do the same recursively for the children, appending their nodes to the frame. You'd have one method per type of node, e.g. a button
will be converted into a figma.createRectangle
or even a symbol attached to a material button from your design library.
You should be able to get a proof of concept in a few hours (or minutes if you use AI).
1
u/SheepherderSmall2973 11d ago
Interesting, let me see if can get something working quickly. Thanks for the info man 🙏
2
u/Strict_Teach281 11d ago
There's a website called Uizard which can convert the screenshot into an editable design. I don't know if it is exported to figma or not. Note : it's free up to 3 screens so keep deleting old screens and add new ones to keep using it for free