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

Поділитися
Вставка
  • Опубліковано 23 гру 2024

КОМЕНТАРІ • 135

  • @uiux.developer
    @uiux.developer 2 роки тому +48

    Mark my words. This video will go a long way. I tried it, and it's working.

    • @mirhasyed4518
      @mirhasyed4518 2 роки тому +2

      what happend in last step? can you please help me

  • @sorarose8360
    @sorarose8360 2 роки тому +5

    no but I actually thought this was a scam but turned out to be 100% legit !!! thanks a lot

  • @akhmadnurmuhammad7148
    @akhmadnurmuhammad7148 Рік тому +11

    the short cut way from backend engineer to frontend engineer. thanks for your sharing. loved it ^^

    • @inihood
      @inihood Рік тому

      Lol accurate 😀

  • @lalit.1
    @lalit.1 2 роки тому +62

    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 2 роки тому

      yes👌

    • @abdulhaadialhassan3851
      @abdulhaadialhassan3851 2 роки тому +17

      @@uiux.developer "This is an intern replacing tool. " wow this sent chills down my spine 🥶🥶🥶

    • @function12
      @function12 2 роки тому +20

      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

  • @RamdanCode
    @RamdanCode 11 місяців тому

    Fantastic tutorial! Your clear instructions made converting Figma to Flutter a breeze.
    Grateful for your expertise!

  • @MuhammadFaisal-ey5fr
    @MuhammadFaisal-ey5fr 2 роки тому +36

    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 2 роки тому +4

      I experienced the same thing. Also, very agree with u

    • @function12
      @function12 Рік тому +5

      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 Рік тому +1

      @@function12 glad to hear that!

  • @tapobratapatra539
    @tapobratapatra539 Рік тому

    bro just took my job in seconds !!!

  • @anhpham6147
    @anhpham6147 Рік тому +9

    Thanks a lot. Exactly what you are looking for. It's really helpful

  • @frankeestv3860
    @frankeestv3860 2 роки тому +4

    I will definitely try it now! Thanks man!

  • @MuhammadArsalan-v8l
    @MuhammadArsalan-v8l Рік тому +4

    @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!

  • @zahwaoktaviawibowo9442
    @zahwaoktaviawibowo9442 Рік тому +2

    In my device all the code is red😢, how to fix it?

  • @HikaruAkitsuki
    @HikaruAkitsuki Місяць тому

    How can you make the tool recognize and convert the input widgets properly?

  • @temidayooladele9856
    @temidayooladele9856 Рік тому

    You just got a new subscriber

  • @oscarmorales8451
    @oscarmorales8451 Рік тому

    Awesome ! Coding my first fews app by hands just saw I can know how to make changes to fit my needs

  • @ijogendrajat
    @ijogendrajat 2 роки тому +83

    I tried similar tools but these tool not good for production at all . but it's good for POC(proof of concept).

    • @TheFlutterWay
      @TheFlutterWay  2 роки тому +6

      Right!

    • @function12
      @function12 2 роки тому +16

      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 Рік тому +3

      Then which is good for production

    • @sweetalert480
      @sweetalert480 Рік тому

      why?

    • @idontcare9811
      @idontcare9811 Рік тому +4

      ​@@krishna90690for production level you have to learn to code

  • @iasror
    @iasror 2 роки тому +2

    nice content bro. help us so much. ty

  • @Lucky-cu9rt
    @Lucky-cu9rt 11 місяців тому

    how are you able to get a iphone mockup in there??

  • @elpathdigital4391
    @elpathdigital4391 2 роки тому +7

    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 2 роки тому +2

      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.

  • @Muuhammad1905
    @Muuhammad1905 Рік тому

    THIS IS ABSOLUTELY AMAZING!!!!

  • @nobitanobi432
    @nobitanobi432 10 місяців тому

    which shortcut key in mac to run flutter app using vs code ?

  • @sarinasaheli5440
    @sarinasaheli5440 Рік тому

    If we test it and try to figure out how functions work can we use this web site for learning flutter?

  • @marif5103
    @marif5103 Рік тому +1

    LIFESAVER!
    I am completely new to flutter could you also show how to add a link to one of the buttons

  • @kevinbeach8743
    @kevinbeach8743 Рік тому

    Is this impacted at all by Figma's move to Dev Mode?

  • @dokajunior
    @dokajunior Рік тому +1

    not working for me either, all the files have error on every line.

  • @omarsh.3056
    @omarsh.3056 Рік тому

    wowwwwww ... big love , man ❤

  • @angefallen2024
    @angefallen2024 Рік тому

    What font are u using in this video on figma template??

  • @puchamon76
    @puchamon76 2 роки тому +1

    Name of the song? really like it

  • @mamikonpapikyan2716
    @mamikonpapikyan2716 2 роки тому +9

    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.

  • @davibassani16
    @davibassani16 Рік тому

    Man, this is really useful! Thanks a lot!

  • @galacticashunnek1354
    @galacticashunnek1354 2 роки тому +4

    Anwar, Your voice upgraded to the next level.🙂

  • @joshuamervinbatiancila170
    @joshuamervinbatiancila170 8 місяців тому

    theres no flutter in the function12 io, can anyone recommend some other alternatives for it?

  • @UmairBokhari
    @UmairBokhari 8 місяців тому

    i visited the website it shows a flutter logo and says "soon" meaning this feature is coming soon on flutter. Someone please help 😢

  • @minikasesempai-ytb
    @minikasesempai-ytb 9 місяців тому

    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

  • @khaleddawa7
    @khaleddawa7 2 роки тому +1

    When I export the code, I get an error
    the error says: export error: not exist
    what is the solution, please?

  • @DreeHardwareID
    @DreeHardwareID 2 роки тому +1

    I will try it, hope this is very helpful

  • @ghulammurtaza7959
    @ghulammurtaza7959 2 роки тому +1

    Is that okay to use these tools in production sector?

    • @function12
      @function12 2 роки тому

      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.

  • @zepra2133
    @zepra2133 2 роки тому +2

    great tips, and nice tools

  • @mirxtremapps
    @mirxtremapps Рік тому

    looks great but there's a lot of boilerplate, maybe could be useful if just separate components and extract them in files

  • @kindcode
    @kindcode Рік тому

    awesome the package useful but i can`t use this package ... package need so many custom

  • @arunbm123
    @arunbm123 Рік тому +1

    looks like it doesnt convert to flutter web ??

  • @crisantus_ik
    @crisantus_ik 9 місяців тому

    i cant see ui to flutter conversion what happened

  • @flutterdeveloperabir1782
    @flutterdeveloperabir1782 Рік тому +1

    Bro please recode the same ui design with getx state old videos recode again

  • @loadmusics7142
    @loadmusics7142 Рік тому

    It has so much error after exporting plz how can I fix that

  • @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?

  • @saifahmad2243
    @saifahmad2243 2 роки тому +1

    How about animation?

  • @prismasasepaloalto1917
    @prismasasepaloalto1917 Рік тому

    can it convert 10 to 20 pages?

  • @andrilesmanahermawan1448
    @andrilesmanahermawan1448 2 роки тому +1

    it's so amazing, thanks

  • @vishnurajbhar007
    @vishnurajbhar007 Рік тому +4

    Debugging and modifying code written by someone else is a real pain.

  • @khadijatahira043-a7
    @khadijatahira043-a7 Рік тому

    Flutter file is not downloading in my Mac

  • @juliusjohan
    @juliusjohan Рік тому

    how about the routes nya?

  • @mirhasyed4518
    @mirhasyed4518 2 роки тому

    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.

  • @abhi_survase
    @abhi_survase Рік тому

    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 Рік тому +1

      Sorry, it's just setting in vscode. file -> preferences -> settings in search bar input "flutter ui". In "Experimental" tick the boxes

  • @hoanglongle129
    @hoanglongle129 2 роки тому +1

    amazing 🤩👍👍

  • @PetWhisperer290
    @PetWhisperer290 Рік тому

    i did it and had alot of ERRORS via vs code

  • @Sy06274
    @Sy06274 2 роки тому +1

    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 2 роки тому

      Saw some great tips there

  • @jsergio8683
    @jsergio8683 2 роки тому +1

    Its responsive with other mobiles?

    • @TheFlutterWay
      @TheFlutterWay  2 роки тому +1

      I think it is.

    • @function12
      @function12 2 роки тому +2

      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

  • @reem3063
    @reem3063 2 роки тому +1

    Million likes to u

  • @sonusdulcis
    @sonusdulcis 2 роки тому +1

    wow thank you so much

  • @abdulsametaybaz3321
    @abdulsametaybaz3321 2 роки тому +3

    I tried so many convert program but not working well but I will try this It look great thanks 🙏

    • @function12
      @function12 2 роки тому

      Feel free to leave your feedback after using our product :)

  • @MarsSsPlay
    @MarsSsPlay 2 роки тому +1

    Awesome😀👍

  • @sporteffort
    @sporteffort 2 роки тому +1

    so we do't need code in again flutter just copy past figma design in f12

    • @alexponco4753
      @alexponco4753 2 роки тому

      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 2 роки тому +1

      @@alexponco4753 if I small project can I do it perfectly

    • @function12
      @function12 2 роки тому +1

      @@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.

  • @saugatjarif8272
    @saugatjarif8272 2 роки тому

    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.

  • @nishangiri5857
    @nishangiri5857 Рік тому

    flutter is already there to make ui development easy tools like that generate lots of boilerplate code

  • @9th_tech
    @9th_tech Рік тому

    it just turns the screens into images, it cant create buttons or any other thing

  • @utrodussaidalbaqi9556
    @utrodussaidalbaqi9556 2 роки тому +2

    Nice

  • @rawan2053
    @rawan2053 Рік тому

    Can I convert from figma into kotlin?

  • @diwayafniwar
    @diwayafniwar 2 роки тому +1

    Woww... great..

  • @fauzanabdillah3661
    @fauzanabdillah3661 Рік тому

    Amazing

  • @bilalbilu1661
    @bilalbilu1661 2 роки тому +3

    It's not working well

    • @TheFlutterWay
      @TheFlutterWay  2 роки тому +2

      It would be helpful if you gave them feedback on what they could improve.

  • @Артем-ь6е9л
    @Артем-ь6е9л 2 роки тому +12

    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 2 роки тому +3

      Yeah, pure garbage. Like all the automated Figma-to-Flutter converters.

    • @alikayar429
      @alikayar429 2 роки тому +1

      yeah, I've more cleaner code snippets in my trash can

  • @rajivtiwari.Flutterdev
    @rajivtiwari.Flutterdev Рік тому

    Wow ❤

  • @huangsteven8111
    @huangsteven8111 Рік тому

    It's Great !

  • @rikusswart1573
    @rikusswart1573 2 роки тому +1

    💯

  • @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.

  • @faisal-anqoudi
    @faisal-anqoudi Рік тому

    is it free ??

  • @AhmedAdel-nr6sc
    @AhmedAdel-nr6sc Рік тому

    it does not work at all

  • @sherlockholmes8096
    @sherlockholmes8096 2 роки тому +6

    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.

  • @parkerchen8192
    @parkerchen8192 2 роки тому +1

    Woooooow, web front-end guys are losing jobs XD

  • @yapyh2872
    @yapyh2872 Рік тому +1

    This is not a reliable tool. There will be too much fixing required and it's costly.

  • @muhibmallick7708
    @muhibmallick7708 Рік тому

    o my

  • @Felipe-ib5sh
    @Felipe-ib5sh 2 роки тому +1

    This video made me sad for like 10 minutes.

  • @justinfleagle
    @justinfleagle Рік тому +1

    Is this real? Seems like a scam.

  • @puuserr
    @puuserr Рік тому

    Bro , is this free ?

  • @mahmoodali1871
    @mahmoodali1871 2 роки тому

    I just wondering, is this a man who talk or Ai?

  • @anoninfo97
    @anoninfo97 2 роки тому

    No no no.. only Kotlin

  • @faheemahmad3957
    @faheemahmad3957 2 роки тому

    Now build a proper app.. please

  • @mariofrancois2575
    @mariofrancois2575 2 роки тому +2

    Totalement inutile.

  • @destiny2jannat
    @destiny2jannat 2 роки тому

    Can I say FIRRRRSSSSSSTTTTTTT🤣🤣

    • @TheFlutterWay
      @TheFlutterWay  2 роки тому

      Thanks you, those kind of comments really motivate us. Keep supporting us!

  • @LANCESEBASTIANLIMBARO
    @LANCESEBASTIANLIMBARO 2 роки тому +1

    first

  • @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 2 роки тому +1

    Actually it is rubbish code, this tool think everyhing as image

  • @S-Lomar
    @S-Lomar Рік тому

    Welcome to my pages 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰

  • @sergey_molchanovsky
    @sergey_molchanovsky 2 роки тому +3

    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 2 роки тому

      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.