How to convert Figma Design into Flutter Code | Function12.io

  Рет қаралды 262,023

The Flutter Way

The Flutter Way

Күн бұрын

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!

Пікірлер: 134
@RamdanCode
@RamdanCode 6 ай бұрын
Fantastic tutorial! Your clear instructions made converting Figma to Flutter a breeze. Grateful for your expertise!
@anhpham6147
@anhpham6147 Жыл бұрын
Thanks a lot. Exactly what you are looking for. It's really helpful
@oscarmorales8451
@oscarmorales8451 Жыл бұрын
Awesome ! Coding my first fews app by hands just saw I can know how to make changes to fit my needs
@frankeestv3860
@frankeestv3860 Жыл бұрын
I will definitely try it now! Thanks man!
@akhmadnurmuhammad7148
@akhmadnurmuhammad7148 Жыл бұрын
the short cut way from backend engineer to frontend engineer. thanks for your sharing. loved it ^^
@inihood
@inihood Жыл бұрын
Lol accurate 😀
@MuhammadFaisal-ey5fr
@MuhammadFaisal-ey5fr Жыл бұрын
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..
@3050deskjet
@3050deskjet Жыл бұрын
I experienced the same thing. Also, very agree with u
@function12
@function12 Жыл бұрын
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 :)
@MuhammadFaisal-ey5fr
@MuhammadFaisal-ey5fr Жыл бұрын
@@function12 glad to hear that!
@uiux.developer
@uiux.developer Жыл бұрын
Mark my words. This video will go a long way. I tried it, and it's working.
@mirhasyed4518
@mirhasyed4518 Жыл бұрын
what happend in last step? can you please help me
@davibassani16
@davibassani16 Жыл бұрын
Man, this is really useful! Thanks a lot!
@Muuhammad1905
@Muuhammad1905 Жыл бұрын
THIS IS ABSOLUTELY AMAZING!!!!
@sorarose8360
@sorarose8360 Жыл бұрын
no but I actually thought this was a scam but turned out to be 100% legit !!! thanks a lot
@iasror
@iasror Жыл бұрын
nice content bro. help us so much. ty
@zepra2133
@zepra2133 Жыл бұрын
great tips, and nice tools
@andrilesmanahermawan1448
@andrilesmanahermawan1448 Жыл бұрын
it's so amazing, thanks
@omarsh.3056
@omarsh.3056 Жыл бұрын
wowwwwww ... big love , man ❤
@temidayooladele9856
@temidayooladele9856 Жыл бұрын
You just got a new subscriber
@user-ft2om3nu3c
@user-ft2om3nu3c Жыл бұрын
@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!
@marif5103
@marif5103 Жыл бұрын
LIFESAVER! I am completely new to flutter could you also show how to add a link to one of the buttons
@hoanglongle129
@hoanglongle129 Жыл бұрын
amazing 🤩👍👍
@MarsSsPlay
@MarsSsPlay Жыл бұрын
Awesome😀👍
@sedasavas7017
@sedasavas7017 Жыл бұрын
wow thank you so much
@tapobratapatra539
@tapobratapatra539 Жыл бұрын
bro just took my job in seconds !!!
@mirxtremapps
@mirxtremapps Жыл бұрын
looks great but there's a lot of boilerplate, maybe could be useful if just separate components and extract them in files
@DreeHardwareID
@DreeHardwareID Жыл бұрын
I will try it, hope this is very helpful
@TheFlutterWay
@TheFlutterWay Жыл бұрын
Let us know your feedback.
@galacticashunnek1354
@galacticashunnek1354 Жыл бұрын
Anwar, Your voice upgraded to the next level.🙂
@TheFlutterWay
@TheFlutterWay Жыл бұрын
Thank you
@diwayafniwar
@diwayafniwar Жыл бұрын
Woww... great..
@lalit.1
@lalit.1 Жыл бұрын
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.
@uiux.developer
@uiux.developer Жыл бұрын
yes👌
@abdulhaadialhassan3851
@abdulhaadialhassan3851 Жыл бұрын
@@uiux.developer "This is an intern replacing tool. " wow this sent chills down my spine 🥶🥶🥶
@function12
@function12 Жыл бұрын
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.
@sweetalert480
@sweetalert480 Жыл бұрын
why?
@parshvsheth-rj2vq
@parshvsheth-rj2vq Жыл бұрын
how do i add logics for my app with this method
@fauzanabdillah3661
@fauzanabdillah3661 Жыл бұрын
Amazing
@sarinasaheli5440
@sarinasaheli5440 Жыл бұрын
If we test it and try to figure out how functions work can we use this web site for learning flutter?
@khaleddawa7
@khaleddawa7 Жыл бұрын
When I export the code, I get an error the error says: export error: not exist what is the solution, please?
@utrodussaidalbaqi9556
@utrodussaidalbaqi9556 Жыл бұрын
Nice
@huangsteven8111
@huangsteven8111 Жыл бұрын
It's Great !
@rajivtiwari.Flutterdev
@rajivtiwari.Flutterdev Жыл бұрын
Wow ❤
@nobitanobi432
@nobitanobi432 5 ай бұрын
which shortcut key in mac to run flutter app using vs code ?
@dokajunior
@dokajunior Жыл бұрын
not working for me either, all the files have error on every line.
@angefallen2024
@angefallen2024 11 ай бұрын
What font are u using in this video on figma template??
@ijogendrajat
@ijogendrajat Жыл бұрын
I tried similar tools but these tool not good for production at all . but it's good for POC(proof of concept).
@TheFlutterWay
@TheFlutterWay Жыл бұрын
Right!
@function12
@function12 Жыл бұрын
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. :)
@krishna90690
@krishna90690 Жыл бұрын
Then which is good for production
@sweetalert480
@sweetalert480 Жыл бұрын
why?
@idontcare9811
@idontcare9811 Жыл бұрын
​@@krishna90690for production level you have to learn to code
@abdulsametaybaz3321
@abdulsametaybaz3321 Жыл бұрын
I tried so many convert program but not working well but I will try this It look great thanks 🙏
@function12
@function12 Жыл бұрын
Feel free to leave your feedback after using our product :)
@kindcode
@kindcode Жыл бұрын
awesome the package useful but i can`t use this package ... package need so many custom
@zahwaoktaviawibowo9442
@zahwaoktaviawibowo9442 7 ай бұрын
In my device all the code is red😢, how to fix it?
@Lucky-cu9rt
@Lucky-cu9rt 6 ай бұрын
how are you able to get a iphone mockup in there??
@reem3063
@reem3063 Жыл бұрын
Million likes to u
@TheFlutterWay
@TheFlutterWay Жыл бұрын
Glad you like it a lot!
@flutterdeveloperabir1782
@flutterdeveloperabir1782 Жыл бұрын
Bro please recode the same ui design with getx state old videos recode again
@nishangiri5857
@nishangiri5857 Жыл бұрын
flutter is already there to make ui development easy tools like that generate lots of boilerplate code
@loadmusics7142
@loadmusics7142 Жыл бұрын
It has so much error after exporting plz how can I fix that
@joshuamervinbatiancila170
@joshuamervinbatiancila170 3 ай бұрын
theres no flutter in the function12 io, can anyone recommend some other alternatives for it?
@kevinbeach8743
@kevinbeach8743 11 ай бұрын
Is this impacted at all by Figma's move to Dev Mode?
@saifahmad2243
@saifahmad2243 Жыл бұрын
How about animation?
@abcdefg-yg3gc
@abcdefg-yg3gc Жыл бұрын
Can you show . Android native converter
@fallhydrangea9627
@fallhydrangea9627 Жыл бұрын
can i download it as an apk and run it in my own phone?
@rikusswart1573
@rikusswart1573 Жыл бұрын
💯
@prismasasepaloalto1917
@prismasasepaloalto1917 Жыл бұрын
can it convert 10 to 20 pages?
@puchamon76
@puchamon76 Жыл бұрын
Name of the song? really like it
@mamikonpapikyan2716
@mamikonpapikyan2716 Жыл бұрын
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.
@juliusjohan
@juliusjohan Жыл бұрын
how about the routes nya?
@9th_tech
@9th_tech Жыл бұрын
it just turns the screens into images, it cant create buttons or any other thing
@elpathdigital4391
@elpathdigital4391 Жыл бұрын
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)
@alikayar429
@alikayar429 Жыл бұрын
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.
@UmairBokhari
@UmairBokhari 3 ай бұрын
i visited the website it shows a flutter logo and says "soon" meaning this feature is coming soon on flutter. Someone please help 😢
@khadijatahira043-a7
@khadijatahira043-a7 Жыл бұрын
Flutter file is not downloading in my Mac
@Sy06274
@Sy06274 Жыл бұрын
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
@drplxrd
@drplxrd Жыл бұрын
Saw some great tips there
@PetWhisperer290
@PetWhisperer290 11 ай бұрын
i did it and had alot of ERRORS via vs code
@crisantus_ik
@crisantus_ik 4 ай бұрын
i cant see ui to flutter conversion what happened
@arunbm123
@arunbm123 10 ай бұрын
looks like it doesnt convert to flutter web ??
@ghulammurtaza7959
@ghulammurtaza7959 Жыл бұрын
Is that okay to use these tools in production sector?
@function12
@function12 Жыл бұрын
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.
@rawan2053
@rawan2053 Жыл бұрын
Can I convert from figma into kotlin?
@minikasesempai-ytb
@minikasesempai-ytb 4 ай бұрын
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
@abhi_survase
@abhi_survase 11 ай бұрын
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.
@arlecchino2907
@arlecchino2907 11 ай бұрын
Sorry, it's just setting in vscode. file -> preferences -> settings in search bar input "flutter ui". In "Experimental" tick the boxes
@muhibmallick7708
@muhibmallick7708 Жыл бұрын
o my
@saugatjarif8272
@saugatjarif8272 Жыл бұрын
the code it generates there is fem variable, what does that mean?
@function12
@function12 Жыл бұрын
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.
@vishusingh008
@vishusingh008 Жыл бұрын
Debugging and modifying code written by someone else is a real pain.
@mirhasyed4518
@mirhasyed4518 Жыл бұрын
what you did while exporting the code i am unable to understand that part?????anyone please
@function12
@function12 Жыл бұрын
Are you having an issue with code exportation? Which part of it you find difficult to deal?
@mirhasyed4518
@mirhasyed4518 Жыл бұрын
@@function12 i was not able to run it. What did you do before running it?
@function12
@function12 Жыл бұрын
@@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.
@sporteffort
@sporteffort Жыл бұрын
so we do't need code in again flutter just copy past figma design in f12
@alexponco4753
@alexponco4753 Жыл бұрын
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
@sporteffort
@sporteffort Жыл бұрын
@@alexponco4753 if I small project can I do it perfectly
@function12
@function12 Жыл бұрын
@@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.
@bilalbilu1661
@bilalbilu1661 Жыл бұрын
It's not working well
@TheFlutterWay
@TheFlutterWay Жыл бұрын
It would be helpful if you gave them feedback on what they could improve.
@jsergio8683
@jsergio8683 Жыл бұрын
Its responsive with other mobiles?
@TheFlutterWay
@TheFlutterWay Жыл бұрын
I think it is.
@function12
@function12 Жыл бұрын
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
@AhmedAdel-nr6sc
@AhmedAdel-nr6sc Жыл бұрын
it does not work at all
@kevinsteig7772
@kevinsteig7772 Жыл бұрын
I tried it, but vs code says over 1k errors, forget this program it’s junk
@function12
@function12 Жыл бұрын
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.
@sherlockholmes8096
@sherlockholmes8096 Жыл бұрын
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.
@faisal-anqoudi
@faisal-anqoudi Жыл бұрын
is it free ??
@parkerchen8192
@parkerchen8192 Жыл бұрын
Woooooow, web front-end guys are losing jobs XD
@user-wv4ms4qs4j
@user-wv4ms4qs4j Жыл бұрын
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.
@sergey_molchanovsky
@sergey_molchanovsky Жыл бұрын
Yeah, pure garbage. Like all the automated Figma-to-Flutter converters.
@alikayar429
@alikayar429 Жыл бұрын
yeah, I've more cleaner code snippets in my trash can
@yapyh2872
@yapyh2872 Жыл бұрын
This is not a reliable tool. There will be too much fixing required and it's costly.
@puuserr
@puuserr Жыл бұрын
Bro , is this free ?
@mahmoodali1871
@mahmoodali1871 Жыл бұрын
I just wondering, is this a man who talk or Ai?
@Felipe-ib5sh
@Felipe-ib5sh Жыл бұрын
This video made me sad for like 10 minutes.
@anoninfo97
@anoninfo97 Жыл бұрын
No no no.. only Kotlin
@LANCESEBASTIANLIMBARO
@LANCESEBASTIANLIMBARO Жыл бұрын
first
@TheFlutterWay
@TheFlutterWay Жыл бұрын
Thanks for watching!
@faheemahmad3957
@faheemahmad3957 Жыл бұрын
Now build a proper app.. please
@destiny2jannat
@destiny2jannat Жыл бұрын
Can I say FIRRRRSSSSSSTTTTTTT🤣🤣
@TheFlutterWay
@TheFlutterWay Жыл бұрын
Thanks you, those kind of comments really motivate us. Keep supporting us!
@justinfleagle
@justinfleagle Жыл бұрын
Is this real? Seems like a scam.
@mariofrancois2575
@mariofrancois2575 Жыл бұрын
Totalement inutile.
@aloksingh4244
@aloksingh4244 Жыл бұрын
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.
@abdurahmon2827
@abdurahmon2827 Жыл бұрын
Actually it is rubbish code, this tool think everyhing as image
@sergey_molchanovsky
@sergey_molchanovsky Жыл бұрын
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.
@function12
@function12 Жыл бұрын
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.
@S-Lomar
@S-Lomar 8 ай бұрын
Welcome to my pages 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰
How to convert Figma Design into Flutter Code | DhiWise.com
7:13
The Flutter Way
Рет қаралды 1 МЛН
Figma design to Mobile App using Flutter and Flutlab
12:02
Tech Builder
Рет қаралды 50 М.
Best KFC Homemade For My Son #cooking #shorts
00:58
BANKII
Рет қаралды 66 МЛН
Mom's Unique Approach to Teaching Kids Hygiene #shorts
00:16
Fabiosa Stories
Рет қаралды 34 МЛН
Получилось у Миланы?😂
00:13
ХАБИБ
Рет қаралды 4,1 МЛН
WORLD'S SHORTEST WOMAN
00:58
Stokes Twins
Рет қаралды 68 МЛН
Plant App - Flutter UI - Speed Code
30:30
The Flutter Way
Рет қаралды 1 МЛН
Figma to Real App Quickly - This is Amazing! | Design Weekly
15:51
Punit Chawla
Рет қаралды 297 М.
Using Figma content | Supernova.io
7:49
Supernova
Рет қаралды 3,4 М.
How to convert your Figma design to React?
10:06
FEWV
Рет қаралды 46 М.
How To Convert Figma Design Into Flutter Code - 2024
3:36
Dear Programmer
Рет қаралды 9 М.
Convert Figma UI Design Into Flutter in 5 Minutes
5:25
Dear Programmer
Рет қаралды 70 М.
How to convert Figma Design into Flutter Code بالعربي
15:48
MR.ABDULRHMAN
Рет қаралды 20 М.
🖥📱Responsive Dashboard UI • FLUTTER Tutorial ♡
29:33
Mitch Koko
Рет қаралды 141 М.
Convert Figma Design ke Flutter Code | Function12.io
8:22
Bauroziq
Рет қаралды 12 М.
Best KFC Homemade For My Son #cooking #shorts
00:58
BANKII
Рет қаралды 66 МЛН