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