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..
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 :)
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.
@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!
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.
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. :)
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.
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
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.
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.
@@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.
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 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.
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.
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
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.
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.
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.
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.
![[DRAGON BALL LEGENDS REVEALS ＆ STUFF] LEGENDS FESTIVAL 2024 Special Edition Part 1](http://i.ytimg.com/vi/mV5bGIswTtQ/mqdefault.jpg)
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
the short cut way from backend engineer to frontend engineer. thanks for your sharing. loved it ^^
Lol accurate 😀
no but I actually thought this was a scam but turned out to be 100% legit !!! thanks a lot
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!
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
Fantastic tutorial! Your clear instructions made converting Figma to Flutter a breeze.
Grateful for your expertise!
Thanks a lot. Exactly what you are looking for. It's really helpful
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!
bro just took my job in seconds !!!
@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!
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.
LIFESAVER!
I am completely new to flutter could you also show how to add a link to one of the buttons
How can you make the tool recognize and convert the input widgets properly?
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
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 :)
nice content bro. help us so much. ty
You just got a new subscriber
looks great but there's a lot of boilerplate, maybe could be useful if just separate components and extract them in files
THIS IS ABSOLUTELY AMAZING!!!!
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.
Debugging and modifying code written by someone else is a real pain.
In my device all the code is red😢, how to fix it?
Bro please recode the same ui design with getx state old videos recode again
not working for me either, all the files have error on every line.
Man, this is really useful! Thanks a lot!
When I export the code, I get an error
the error says: export error: not exist
what is the solution, please?
I will try it, hope this is very helpful
Let us know your feedback.
great tips, and nice tools
Is this impacted at all by Figma's move to Dev Mode?
Anwar, Your voice upgraded to the next level.🙂
Thank you
Name of the song? really like it
If we test it and try to figure out how functions work can we use this web site for learning flutter?
i visited the website it shows a flutter logo and says "soon" meaning this feature is coming soon on flutter. Someone please help 😢
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
awesome the package useful but i can`t use this package ... package need so many custom
which shortcut key in mac to run flutter app using vs code ?
how are you able to get a iphone mockup in there??
flutter is already there to make ui development easy tools like that generate lots of boilerplate code
theres no flutter in the function12 io, can anyone recommend some other alternatives for it?
wow thank you so much
Million likes to u
Glad you like it a lot!
It has so much error after exporting plz how can I fix that
wowwwwww ... big love , man ❤
it's so amazing, thanks
looks like it doesnt convert to flutter web ??
i cant see ui to flutter conversion what happened
What font are u using in this video on figma template??
Flutter file is not downloading in my Mac
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.
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
Can you show . Android native converter
i did it and had alot of ERRORS via vs code
it just turns the screens into images, it cant create buttons or any other thing
How about animation?
Nice
can i download it as an apk and run it in my own phone?
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
Woww... great..
amazing 🤩👍👍
can it convert 10 to 20 pages?
how about the routes nya?
Amazing
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.
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.
💯
Can I convert from figma into kotlin?
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.
Awesome😀👍
Wow ❤
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
It's Great !
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.
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
o my
Woooooow, web front-end guys are losing jobs XD
it does not work at all
This is not a reliable tool. There will be too much fixing required and it's costly.
This video made me sad for like 10 minutes.
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.
is it free ??
Bro , is this free ?
I just wondering, is this a man who talk or Ai?
No no no.. only Kotlin
Is this real? Seems like a scam.
Now build a proper app.. please
Totalement inutile.
first
Thanks for watching!
Can I say FIRRRRSSSSSSTTTTTTT🤣🤣
Thanks you, those kind of comments really motivate us. Keep supporting us!
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
Welcome to my pages 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰
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.