Locofy.ai | Figma Design to Live Website with Locofy [Quick Build]

Поділитися
Вставка
  • Опубліковано 3 січ 2025

КОМЕНТАРІ • 140

  • @nandhuanil7549
    @nandhuanil7549 2 роки тому +22

    Honestly, this is one of the most helpful software's that I've used till now. The way you give out the entire code is really something to appreciate. A sincere gratitude from my side for developing this piece of art♥️

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

      Thanks for the kind words Anil ❤, we're so glad that you found this helpful for you!

  • @sussybaka2478
    @sussybaka2478 2 роки тому +8

    You guys solved the biggest problem that i was facing thanks for your hardwork

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

      It makes our day to hear that! Please let us know if you need any help, or have any feedback for us

  • @flowmatic-biz
    @flowmatic-biz 4 місяці тому

    Just amazing! Good job, Locofy!

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

    Wow! Definitely @Locofy is ahead of the game compared with other existing tools. Thank you very much.

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

      Appreciate it @alianmorales5750! Do let us know if you have feedback or need help!

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

      Not anima

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

    This is amazing! I can already think of the apps I want to build. Thank you so much!!!

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

      Awesome! Let us know if you need any help!

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

    You guys make the human civilization more advance =) so amazing that finally someone you guys make this AI

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

      Thanks for the kind words!

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

    Much Appreciated for your efforts to build up this solution, Thanks Again

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

      Thanks. Please do give it a try and let us know if you have any feedback

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

    Serioulsy, great work guys - lots of saving options and if everything is smooth. hats off! Also, it is quite a bit of work to organize all figma per frames...

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

      Thanks Cyril! We're just getting started, and are working on a feature to help you organize Figma layers more easily!

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

      @@locofy_ai Been playing with it last and was able to render pretty nicely a react build. you guys did a lot of work! The plugin sometimes lags when the previews are heavy. Also now. except this video, you guys dont have a guide to explain how to properly set your frames / auto-layouts so it will fit well with responsive design after tagging. Would be great to have a guide on how to set a nav bar / a two column, 3 columns... with their correct autolayout settings

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

      Hey @Cyril, we do have a sample Figma project that guides you through these common layouts. Please head to www.figma.com/@locofy and duplicate our "Building a responsive website" tutorial

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

    you guys are amazing I tried it so well and I loved it

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

      We're glad that you're enjoying Locofy! Do let us know how we can further improve Locofy for you

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

    I was worried to first create a figma design and then code it and making design layouts css was a nightmare to me even in css frameworks but this software solved my problem thanks Very much

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

      That is the problem that we're trying to solve! Do let us know if you need any help or have any feedback

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

    JUST FREAKING AWESOMEEEEE !!!!

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

    This is so empowering! Thank you for everything.

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

      We're just getting started! Do share with us any feedback and we'll keep on improving the experience for you!

  • @DavidReyna-w1p
    @DavidReyna-w1p 4 місяці тому

    Thank you for this well-made plugin, thank you so much!!! I just have one question, if I have several Framers to animate my landing page, will locofy be able to do those animations in code?

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

    Loco is Awesome,
    I used it in my project and it's superb.

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

      Thanks for giving it a try!

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

    Great work guys!!

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

      Thanks for the appreciation, Milan.

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

    looks clean 🙌❣️

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

      Let us know any feedback you have!

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

    Around @15:26 The option for selecting a Container doesn't seem to be there for me anywhere. Where can I find it, or what should I use instead? I really really appreciate what you all have made here, Locofy is wonderful.

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

      We have simplified the tags further and instead of offering container tag, we now directly allow you to choose between section, header, etc. tags that were previously present under the "container" tag.

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

    Thanks so much for all .Your video is so good and i appreciate a lot.

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

      We're glad you found it useful! Let us know what other guides you'd like to see!

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

    Very helpful video for understanding 👏. I didn't get what's the difference in use of deploy and export option?? At the end we just need code, and we can do copy and paste in our vocode and run from there !!
    Can you tell me a difference I both options?

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

      Hi Swastik!
      When you export - you GET the code so that you can edit and customize it. You need to do this if you need to pull in data from a database into your website/app. We'll be doing a video guide on this soon!
      When you deploy - you PUBLISH the code, so that it runs on a server and people can start accessing your website/app. For a static website that does not need any code edits, this option is useful to easily make your product go live!
      Please do reach out if you need any further help, we're happy to jump on a call with you

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

    This tutorial was really helpful

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

      Glad that you found it helpful.

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

    How did you created form 1:43?

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

      This form was created before hand and added manually to the deisgn.

  • @Sid7428
    @Sid7428 5 місяців тому

    Where do we get that hamburger icon, what i got from a plugin does not get recognised by locofy while developing

    • @locofy_ai
      @locofy_ai  5 місяців тому

      You will need to add a hamburger icon which is hidden initially on Figma. This will need to be done manually

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

    I loved the video! However, in the part where he explains how to make the design responsive, the video cuts to the final result. Is the explanation available? 9:17

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

      You can refer to our Responsiveness & Styling Playlist here: ua-cam.com/video/u70KP7J-0NE/v-deo.html
      Let us know if you have any further questions.

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

    Hi dear locofy i get a troublesome question when deploy to vercel. It fail and show"No Output Directory named "dist" found after the Build completed." How?

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

      Hi, can you please reach our to LocoSid on our discord server: You can join our discord from this link: discord.com/invite/r6UDBhEQ4s

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

    It was awesome locofy. Just finished it. Btw it did not take 30 minutes 😄

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

      We are glad you liked Locofy and that it helped you convert your design to code in under 30 minutes.

  • @AunAli-rd7mn
    @AunAli-rd7mn Рік тому

    Instead of using the hover (and other states) from your plugin, can I use custom components states (default, pressed etc) I have already made on Figma?

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

      Hi @Aun, we're working on a feature to allow you to do this! Do stay tuned for updates

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

    I am having problem to fir the webpage into mobile frame i.e. 428px. My hero section's width is either cut out or I am seeing the scroll bar below. Can Someone help me with how I can adjust my hero section to perfectly displayed on 428px.

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

      Hi @mohannad khan, do check out this video on how to make your designs responsive - please let us know if this helps!
      ua-cam.com/video/mcROyX3hQ6g/v-deo.html

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

    how did u pull the frame off and duplicate?
    im assuming u duplicate

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

      That's correct - we duplicate and pull the requisite layers off the main design.

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

    In updated Figma there is no spacing mode settings in advanced auto layout menu. What to do in that case?

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

      Yes, Figma recently updated their UI. To add auto spacing, you need to first apply auto layout, then you will find the gap value (below the direction arrows), in the dropdown for the gaps, you will find "Auto", which will apply auto spacing. Here is a document by Figma: help.figma.com/hc/en-us/articles/360040451373-Explore-auto-layout-properties#spacing-between

  • @NadyaS-r9q
    @NadyaS-r9q Рік тому

    How did you get the hamburger as I cannot see it

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

      Hamburger Menu is initially hidden on the Figma file. We make use of the Media Queries and show the hamburger menu on smaller media queries using Styling and Layout Section on the Locofy Plugin.

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

    There is issue is when you creating your design on figma so it's creating CSS on Position: Absolute; Property. Which is not goog for developers. Because if we need to change anything in future so it's a big issue for us. So how can I fix it. Is there any idea about this issue??

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

      Use auto-layout to make your design responsive. Also, we suggest you to go through these docs:
      www.locofy.ai/docs/design-structure/responsiveness/auto-layout/
      www.locofy.ai/docs/design-structure/responsiveness/locofys-approach/

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

    Hey there!
    I tried using the locofy software
    , but there's always this relative and absolute styling that keeps occuring!
    for example i have two div tags inside a section tag, by default it should be like flex and gap or padding for the div container, but instead i keep getting relative for section and absolute for div tags which have height and width and top and left accurately measured , help me fix this issue of how to let locofy know how to nest items or containers!

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

      By default, if you use auto layout, Locofy generated code will feature a flex property. The absolute positions occur when you have an absolute position item on your design and uses fixed sizes. You can read more on Locofy.ai's approach here: www.locofy.ai/docs/design-structure/responsiveness/locofys-approach/

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

    I tried to hide the hamburger menu for the large device it worked but its not showing up in the small device and I even changed the display property to show for the small device the links gets hidden once the device changed to small one, I don't know why the hamburger menu is not showing up!

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

      Facing same issue

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

      Request you to please join our Discord Server: discord.gg/r6UDBhEQ4s
      You can share your figma file with Loco Sid so he investigate the issue.

  • @MohamedOsama-hm9vo
    @MohamedOsama-hm9vo 2 роки тому

    The hamburger menu is not effective in this case?
    I mean if i want to switch the navigation links to pop up on the menu click, how can i do that?

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

      Hi Mohamed, you can tag that hamburger as a button and add an action for it to open a popup that you've created. Do let us know if you need help with this!

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

    hey locofy team, i believe u will anser my question, I am using breakpoint plugin in figma to combine for example 3,4 prototypes into one prototype to showcase it's responsiveness for different devices. so once i used breakpoint, then while using locofy plugin it can't recognize my responsive design at all as i used breakpoint though. what can I do then?

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

      Hi @Showbik, at the moment we do not integrate with other plugins, here's a guide which shows you how you can approach responsiveness with Locofy: ua-cam.com/video/9Ae6SeOQFDc/v-deo.html

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

    Hi @Locofy, I wonder if we can do a dropdown for input? For React and HTML/CSS. Thanks, wonderful platform!
    And you can click one of the dropdown option to open a link or to show additional hidden input boxes

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

      Currently you can use some of the dropdown components from popular UI libraries such as Material UI, Ant Design, Bootstrap and more. For custom dropdowns that you design yourself, that is something that we will be working on supporting. Could you share a few screenshots with us at hello@locofy.ai to better understand your use case?

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

      @@locofy_ai awesome!

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

    How to make navigation stick to the top? And how to create a navigation popup after clicking hamburger menu?

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

      HI Ayush, to make the navbar stick to the top, you would have to apply custom CSS properties:
      position: sticky, top:0.
      You can add all these using the Locofy plugin. For the drawer, we have a doc on this: www.locofy.ai/docs/export-and-deployment/examples/exporting-a-responsive-navbar/
      Let us know if you need further help. Also, would love to invite you to our Slack community where you'll get support and relevant resources: www.locofy.ai/join-slack

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

    You guys just changed the coding landscape. I am gonna wait the backend and logic integration

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

      Databinding and API integration is coming very soon, do stay tuned 😉

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

    i am not able to see the styling & layout and actions button

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

      We have updated our flow significantly since this video. To view the same options choose Locofy Classic and follow the steps below.
      You can click edit in Step 3: Edit Styling & Layout or Step 4: Add actions to view the same UI.

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

    if i have responsive design in figma can i just get responsive code with this plug in

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

      Exactly!

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

      so responsive design is must to have responsive code?
      @@locofy_ai

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

    Do you have a community the hamburger hiding option is not working for me

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

      Hi Salman, thanks for reaching out. Please join our Slack community and our team can help you : www.locofy.ai/join-slack

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

    @21.23 i can't see the layout direction

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

      We have updated our flow significantly since this video. To view the same options choose Locofy Classic and follow the steps below.
      You can click edit in Step 3: Edit Styling & Layout to view the same UI

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

    Where can I find the hamburger menu?

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

      Hi Arnob, if you are using our Figma file over here: www.figma.com/community/file/1142126078245550116/
      You'll find the hamburger menu in the header bar as a hidden layer. That's because we have set it to be hidden on desktop screen size, and set it to show on mobile devices using the Locofy plugin.

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

    i used locofy for converting my figma into html, but why the smart-animate for the page transitions dont work? and i made a submenu button for my website, but it also doesnt work

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

      Hi @Bernhard Cr, converting smart animations is currently not available and is something that we're planning to work on soon.
      Regarding the submenu button issue, could you share more details with us at hello@locofy.ai so that we can investigate this?

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

      @@locofy_ai thx for replying! 😃

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

      @@locofy_ai i found a funny thing....locofy is not currently available to do with smart-animations. however if i link a webpage to other pages, it required me to use smart-animate... the link wont works if i choose instant transition. the transition looks like Instant animation, but it requiered me to make sure that i choose smart animate for every page transition

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

      @@bernhardcr7665 Hi Bernhard, that is quite strange! Is this happening on Figma? Where it is forcing you to choose smart animation?

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

      @@locofy_ai yea, that's what im experiencing on Figma. but this is not a big problem for me...it just requires me to use smart-animate for every page transition (every button that links to other pages) or otherwise my webpage wont be able to click to connect with the other webpages. however when i convert the figma file into HTML the smart-animate did not works

  • @md.mashuqurrahman7001
    @md.mashuqurrahman7001 2 роки тому

    I have a question. please answer bro. Is locofy a trouble for web developers? I mean, Will front end devolopers be use less ?

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

      Hi @Md. Mashuqur Rahman, we definitely do not think so. You still know how to read and understand the generated code in order to extend it and add logic to it.
      What Locofy does is help you to do the repetitive/mundane tasks, so that you can focus on the core logic of the app

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

    when I saw in your vidoe , you simply copy the template in locofy ,
    when I'm doing the copy , I didn't get the locofy option !! why it is so ?

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

      Have you created your Locofy account and tried opening the plugin in Figma?
      You can follow this doc to get started: www.locofy.ai/docs/getting-started/create-new-locofy-account/

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

    if we have some data that will come through an API endpoint how we should tag them?

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

      Hi @Ed, for now, you can export your code and connect with your API endpoints from your code editor. Soon we'll be allowing you to do that from within Locofy Builder itself.

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

      @@locofy_ai Okay you will be able to say this is form and API right?

  • @innovAIte-0
    @innovAIte-0 Рік тому

    Auto Layout screws my whole design what should i do?😥

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

      Do check out our guide on Autolayout to learn more about how to apply Autolayout to your designs ua-cam.com/video/uI2pEqz2THk/v-deo.html - you can also reach us on hello@locofy.ai or on our slack channel if you need further help www.locofy.ai/join-slack

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

    Hey the Input boxes the text it always black how do I fix this?

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

      Hi @Brendan, in the Styling & Layout tab, you can add this key-value pair in the custom css section "color: #aabbcc" where #aabbcc is the hex code of the text colour you want to use.
      Let us know if you need help with this!

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

    I hope this will be free in the near future or offer us at very affordable pricing. Thanks !

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

      Hi @Healing yourself, we're currently in Free BETA! You can create a free account and start using Locofy: www.locofy.ai/signup
      Let us know if you need any help!

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

    Sweet!

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

    Is animation possible?

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

      Yes animations are possible. We support Lottiefiles and also some prebuilt animation. Checkout our doc on the same: www.locofy.ai/docs/tagging/animations/tagging-animations/

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

    love this amazing idea

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

      Do let us know if you need any help or have any feedback!

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

      ​@@locofy_ai I thank all that excellent working group that is something disruptive what they created. I will tell you everything I am achieving with your help and ask everything that is necessary until I have no doubt :)

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

      ​@@LosHuevosDelDIbuVaLadas We'd love that! Please feel free to also join our slack channel where our team is there to help and listen to your questions
      www.locofy.ai/join-slack

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

      @@locofy_ai 🥰

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

    FIND IT HARD TO FOLLOW DUE TO NOT FULLY DISCLOSURE of how to find other TOOLS LIKE HAMBURGER ICON, so I had TO SEARCH OTHER INFORMATION BEFORE CONTINUING WITH THE VIDEO,ITS TOOK ME HOURS TO FINISHH 1 HOUR VIDEO

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

      can't continue without small details

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

      We understand. In this video, we assumed that the icons are present in the design. We recommend using Figma plugins such as Iconify to get icons you need.

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

    I really wish this is free to use

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

      Hey @BONSA, Locofy is currently in Free Beta and you can use all features and functionality for free!

  • @aiviet5497
    @aiviet5497 6 місяців тому

    I bet You are Vietnamese:))

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

    Please help

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

      Hi, can you please reach our to LocoSid on our discord server: You can join our discord from this link: discord.com/invite/r6UDBhEQ4s

  • @Sam-vz7pf
    @Sam-vz7pf 2 роки тому

    Hey, is this responsive??

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

      Hi Sam, yes it's responsive - you can get a copy the Locofied file on Figma and try it for yourself!
      See the link in the description for more info!

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

    And after all these efforts it will generate you a non sense code base which is helpful to beginners only because they don't know much about HTML CSS with flex box and containers.

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

      Suman, would really like you to try the product before passing any judgement. Happy to help you try it out. Feel free to join our Slack community and our team is happy to answer your questions: www.locofy.ai/join-slack

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

      @@locofy_ai yes I have tried it. When we put frames inside another frames it is producing a design where the inner frames are having absolute positioning producing unexpected outcomes.

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

    So basically locofy is going to take away jobs of web developers now…. Nice , welcome to disasterous future

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

      Hey @coder amar, with Locofy, our goal is for you to be able to get more done in less time. Our platform currently generates the UI code for you, so that you can focus on the more complex problems like adding the logic layer.

    • @adil1087
      @adil1087 7 місяців тому

      Huh???