How to convert Figma Design into Flutter Code | Function12.io
Вставка
- Опубліковано 6 сер 2024
- Figma design convater: function12.io/
Figma Travel UI: cutt.ly/H1uVoZJ
If you’re wondering how to convert Figma to Flutter without writing the code yourself, you’ve come to the right place. Today, I’ll show you how to export your Figma designs to Flutter in a few simple steps using function12.io.
► Nominate as a Github Star: bit.ly/3dLXFWJ (@abuanwar072)
►For the 3D intro, I'm using Rotato: bit.ly/3heGagj
►Support Us: / theflutterway
► Social Media
GitHub: github.com/abuanwar072
Twitter: / theflutterway
Twitter: / abuanwar072 (my personal profile)
Facebook: / theflutterway
► Timestamps
0:00 Intro
0:12 Figma design
0:20 Design to code convert
1:24 Export the code
Thanks for watching!
Make sure to like + Subscribe For More!
Thanks a lot. Exactly what you are looking for. It's really helpful
Fantastic tutorial! Your clear instructions made converting Figma to Flutter a breeze.
Grateful for your expertise!
Awesome ! Coding my first fews app by hands just saw I can know how to make changes to fit my needs
I will definitely try it now! Thanks man!
Mark my words. This video will go a long way. I tried it, and it's working.
what happend in last step? can you please help me
LOVE IT SO MUCH! ❤
Thanks for this precious information!
I just know it by now after all the UI design have been coded..
If I knew it in the first place, would've use it for sure!
But I think coding all the widget by the code yourself at first, is great to make we understand completely how the code works..
I experienced the same thing. Also, very agree with u
Within few months, we are going to add feature to detect, document, and manage Figma components into widgets like Widget Book. So please kindly wait for us :)
@@function12 glad to hear that!
the short cut way from backend engineer to frontend engineer. thanks for your sharing. loved it ^^
Lol accurate 😀
Man, this is really useful! Thanks a lot!
nice content bro. help us so much. ty
great tips, and nice tools
no but I actually thought this was a scam but turned out to be 100% legit !!! thanks a lot
THIS IS ABSOLUTELY AMAZING!!!!
it's so amazing, thanks
I will try it, hope this is very helpful
Let us know your feedback.
You just got a new subscriber
wow thank you so much
@The Flutter Way Thanks for such great knowledge but!
sir, i wonder if the app is functional too after the we get the ui code because one downside i see is that it has the repition of code which is not a good practice, further more like the 3rd description screen there is sliding functionality of images mostly we use packages or plugins to get things done easy and save ourself from writing code that is available so how it handles those stuffs...
i'd like to hear your thoughts on it and if you had experienced such things regarding this, i'd love the answer sir
Thank You!
amazing 🤩👍👍
wowwwwww ... big love , man ❤
This is an okay tool to get the boiler plate code, then you've to work on that code to optimize for production use. This is an intern-replacing tool.
yes👌
@@uiux.developer "This is an intern replacing tool. " wow this sent chills down my spine 🥶🥶🥶
Thank you Lalit for your feedback. We like the term 'intern-replacing' tool. Our final goal is to make the product to be a perfect front-end assistant to developers. Just like what JARVIS does to Tony Stark.
why?
how do i add logics for my app with this method
Awesome😀👍
LIFESAVER!
I am completely new to flutter could you also show how to add a link to one of the buttons
looks great but there's a lot of boilerplate, maybe could be useful if just separate components and extract them in files
bro just took my job in seconds !!!
Woww... great..
Anwar, Your voice upgraded to the next level.🙂
Thank you
I tried so many convert program but not working well but I will try this It look great thanks 🙏
Feel free to leave your feedback after using our product :)
Amazing
Nice
In my device all the code is red😢, how to fix it?
If we test it and try to figure out how functions work can we use this web site for learning flutter?
I tried similar tools but these tool not good for production at all . but it's good for POC(proof of concept).
Right!
Jogendra, thanks for your comment. More updates will be introduced in the coming months and we will make it good for production in near future. Please look forward to it. :)
Then which is good for production
why?
@@krishna90690for production level you have to learn to code
It's Great !
What font are u using in this video on figma template??
which shortcut key in mac to run flutter app using vs code ?
When I export the code, I get an error
the error says: export error: not exist
what is the solution, please?
how are you able to get a iphone mockup in there??
Million likes to u
Glad you like it a lot!
Is this impacted at all by Figma's move to Dev Mode?
awesome the package useful but i can`t use this package ... package need so many custom
How about animation?
Can I use this Method as a first step to learn Flutter by analyzing the generated code? or would it be a bad Idea? (i’m a complete noob to programming, zero knowledge by now)
It's not a bad idea. But i don't think that it will help. It can make u get confused on complex layouts. Just go through some basic layout tutorials. That'll have more benefits.
Wow ❤
not working for me either, all the files have error on every line.
can it convert 10 to 20 pages?
theres no flutter in the function12 io, can anyone recommend some other alternatives for it?
Can you show . Android native converter
Name of the song? really like it
can i download it as an apk and run it in my own phone?
how about the routes nya?
Bro please recode the same ui design with getx state old videos recode again
💯
i visited the website it shows a flutter logo and says "soon" meaning this feature is coming soon on flutter. Someone please help 😢
It has so much error after exporting plz how can I fix that
Very good tutorial.
But it's not good at all to convert figma design to flutter code. It takes more time to correct the source code for preparing it for production. Besides it doesn't have flexibility.
I have a doubt, do you know any tool that converts Framer Design into HTML Code? Because your platform currently works only with Figma, right? I have a design in Framer and I would like to take it out of Framer to customize it
Is that okay to use these tools in production sector?
As of now, with additional hand-coding on the generated code, you can use this tool in production sector. But we will continue to update more features in the product so that this gap can be reduced to the very minimal level.
i cant see ui to flutter conversion what happened
Please make a video on
Gradle error in Android studio, I am getting so many errors while building my flutter code for Android please help
Saw some great tips there
flutter is already there to make ui development easy tools like that generate lots of boilerplate code
Flutter file is not downloading in my Mac
i did it and had alot of ERRORS via vs code
looks like it doesnt convert to flutter web ??
Can I convert from figma into kotlin?
what you did while exporting the code i am unable to understand that part?????anyone please
Are you having an issue with code exportation?
Which part of it you find difficult to deal?
@@function12 i was not able to run it.
What did you do before running it?
@@mirhasyed4518 Have you tried clicking the 'Export' button on the top ribbon menu in our workspace? If you click 'Flutter' icon after clicking the button, you will get Flutter App package in zip file.
it just turns the screens into images, it cant create buttons or any other thing
o my
the code it generates there is fem variable, what does that mean?
Hi Saugat, we are utilizing 'fem' as one of the methods to provide responsive layout. We chose this method in order to make code react to screen size, while taking account of original pixel size of UI design. Figma provides design units in pixel only, so we chose this method. Additionally, fem is somewhat same as vw that converts units into pixel. Hope this explanation answers your question.
Can I please know about the extension or setting that gives the vertical-dashed-indentation-style at 2:26 in vscode? It looks like Android Studio and it's amazing.
Sorry, it's just setting in vscode. file -> preferences -> settings in search bar input "flutter ui". In "Experimental" tick the boxes
Its responsive with other mobiles?
I think it is.
We are providing a code that is responsive to all mobile devices.
In fact, the below is the code that we use to make that possible.
double fem = MediaQuery.of(context).size.width / baseWidth
Debugging and modifying code written by someone else is a real pain.
so we do't need code in again flutter just copy past figma design in f12
only for ur personal project because the code design is very linear
if u want to use it in a big project with different structure=u need to change the code manually
@@alexponco4753 if I small project can I do it perfectly
@@alexponco4753 Yes, we agree that as of now the code design is linear mostly. In near future, we will feature the code that takes account of widget code as well. With that, we believe the issue mentioned by you can be alleviated to certain extent.
It's not working well
It would be helpful if you gave them feedback on what they could improve.
I tried it, but vs code says over 1k errors, forget this program it’s junk
Hi Kevin, we are sorry that you are experiencing an inconvenience while using our service. Would you mind sharing more details about the error? If it is something sensitive, you may share more details via our Help Center.
is it free ??
it does not work at all
The code quality looks bad. Im wandering if it would actually take more time to fix it and it would be easier to write from scratch. Code looks somewhat ugly, uses constructs that are rarely used. Uses stuff like fem which is not quite correct thing and avoided, instead of making it truly responsive it tries to map all of the sizes which is not right thing for apps (for example, oftentimes sizes of items shouldnt get bigger if the width increases). Widgets way too deeply nested. No code reuse. Direct use of many resources. Names of classes and components are bad, they don't carry any meaningful information but little. I worked with figmas api and I know that it doesnt rly carry much of context, meaning it would be really hard in some cases to generate correct code unless it blindly follows some algorithm which increases nesting, which makes things harder to maintain and read. Idk maybe something good could be made out of it eventually, but as for now could play with for fun but definitely cant be used for real projects.
Bro , is this free ?
This is not a reliable tool. There will be too much fixing required and it's costly.
1. Transferring the project to a third-party service is DEFINITELY not safe
2. 1 glance at the code from the video was enough for me to understand that it is a garbage
This is a fairly simple scripted constructor that does not take into account the context of the project and in any case requires deep rewriting. This will not reduce the time for the task and will only help those who do not understand Flutter development at all.
Yeah, pure garbage. Like all the automated Figma-to-Flutter converters.
yeah, I've more cleaner code snippets in my trash can
I just wondering, is this a man who talk or Ai?
first
Thanks for watching!
Can I say FIRRRRSSSSSSTTTTTTT🤣🤣
Thanks you, those kind of comments really motivate us. Keep supporting us!
Woooooow, web front-end guys are losing jobs XD
Is this real? Seems like a scam.
No no no.. only Kotlin
Totalement inutile.
Now build a proper app.. please
This video made me sad for like 10 minutes.
Pure Garbage!
Too much of a boilerplate code that too with so many layout errors. Long way to go for figma to flutter apps like these.
Actually it is rubbish code, this tool think everyhing as image
The generated code in video is definitely not production-quality, with magical constants like baseWidth = 375, and an ugly code like `Container(margin: EdgeInsets.fromLTRB(0*fem, 0*fem, 0*fem, 0*fem,))`
I strongly discourage you from such automated solutions and recommend to create a responsive layout by yourself.
Hi Sergey, we will provide different ways by which a responsive layout can be processed. As of now, we are utilizing 'fem' as one of the methods. We chose this method in order to make code react to screen size, while taking account of original pixel size of UI design. Figma provides design units in pixel only, so we chose this method. Additionally, fem is somewhat same as vw that converts units into pixel. Hope this explanation clears some of your doubts about the code generated by our product.
Welcome to my pages 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰