Locofy.ai | Figma Design to Live Website with Locofy [Quick Build]
Vložit
- čas přidán 8. 07. 2024
- In this video you'll be learning how to go from a popular Figma design template to a Live Website using Locofy.ai!
With Locofy.ai you can turn your Figma designs into React, React Native, HTML-CSS, Next.js or Gatsby code and ship 5-10x faster.
Get Locofy.ai (FREE Beta): www.locofy.ai/
Grab a copy of the Locofied file at: www.figma.com/community/file/...
Get the original file by Dwinawan at: www.figma.com/community/file/...
Credits to Dwinawan for the design
Timestamps:
00:00 Introduction
00:33 Finding a popular design from Figma community
01:44 Introduction to Locofy Plugin - Tagging
04:11 Tagging - Properties tab
04:42 Tagging - Styling & Layout tabs
05:51 Tagging - Actions Tab
08:03 View live preview running on code
09:19 Preview of End Result
10:46 Structuring your Figma file for better code
12:54 Creating a responsive header navigation bar
17:37 Creating a responsive 2-column Hero section
24:01 Creating a responsive 3-column layout
28:34 How to approach a complex layout
30:29 Working with floating elements in the background
34:29 Responsiveness for complex combinations of images and text
37:12 Showing different versions of design for Desktop, Tablet and Mobile
39:47 Creating responsive cards
43:59 Creating a responsive form
44:51 Combining responsive sections into a single page
45:27 Making minor adjustments for beautiful responsive design
48:51 Final Preview
49:17 Naming your layers for high-quality code
49:35 Sync to Locofy Builder to view code
50:08 Introduction to Locofy Builder
50:50 View code and change framework settings
51:20 Creating components and adding props for dynamic content
53:41 View and share live responsive prototype with collaborators
55:22 Creating components for cleaner organized code
56:00 Options for exporting code
56:06 1. Copy to clipboard
56:22 2. Deploy to Netlify or Vercel for a live website
57:41 3. Download code or make pull request to Github
58:38 Running the exported code on your code editor
59:31 Connecting your code to databases and APIs
59:53 Recap and Outro
![Locofy.ai | Figma design to React Native travel app in 19 mins with Locofy [Quick Build]](http://i.ytimg.com/vi/Moz1GVjXy3E/mqdefault.jpg)
![Locofy.ai | Figma design to React Native travel app in 19 mins with Locofy [Quick Build]](/img/tr.png)
This is amazing! I can already think of the apps I want to build. Thank you so much!!!
Awesome! Let us know if you need any help!
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♥️
Thanks for the kind words Anil ❤, we're so glad that you found this helpful for you!
This is so empowering! Thank you for everything.
We're just getting started! Do share with us any feedback and we'll keep on improving the experience for you!
You guys solved the biggest problem that i was facing thanks for your hardwork
It makes our day to hear that! Please let us know if you need any help, or have any feedback for us
JUST FREAKING AWESOMEEEEE !!!!
Glad that you liked it!
Wow! Definitely @Locofy is ahead of the game compared with other existing tools. Thank you very much.
Appreciate it @alianmorales5750! Do let us know if you have feedback or need help!
Not anima
you guys are amazing I tried it so well and I loved it
We're glad that you're enjoying Locofy! Do let us know how we can further improve Locofy for you
Thanks so much for all .Your video is so good and i appreciate a lot.
We're glad you found it useful! Let us know what other guides you'd like to see!
Great work guys!!
Thanks for the appreciation, Milan.
You guys make the human civilization more advance =) so amazing that finally someone you guys make this AI
Thanks for the kind words!
Much Appreciated for your efforts to build up this solution, Thanks Again
Thanks. Please do give it a try and let us know if you have any feedback
looks clean 🙌❣️
Let us know any feedback you have!
This tutorial was really helpful
Glad that you found it helpful.
Loco is Awesome,
I used it in my project and it's superb.
Thanks for giving it a try!
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
That is the problem that we're trying to solve! Do let us know if you need any help or have any feedback
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...
Thanks Cyril! We're just getting started, and are working on a feature to help you organize Figma layers more easily!
@@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
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
love this amazing idea
Do let us know if you need any help or have any feedback!
@@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 :)
@@enriquetillar8733 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
@@locofy_ai 🥰
This is Great job Dear
Thank you so much
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?
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
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.
Hi @mohannad khan, do check out this video on how to make your designs responsive - please let us know if this helps!
czcams.com/video/mcROyX3hQ6g/video.html
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.
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.
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?
Hi @Aun, we're working on a feature to allow you to do this! Do stay tuned for updates
locofy please help i dont get the vertical and horizontale direction options in locofy builder its not there the last thing is maximum height and minium height
Please join the Locofy Slack community and share the issue there: locofy.ai/join-slack. Our team would be happy to support you.
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?
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: czcams.com/video/9Ae6SeOQFDc/video.html
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?
Hi, can you please reach our to LocoSid on our discord server: You can join our discord from this link: discord.com/invite/r6UDBhEQ4s
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!
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/
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?
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!
How to make navigation stick to the top? And how to create a navigation popup after clicking hamburger menu?
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
In updated Figma there is no spacing mode settings in advanced auto layout menu. What to do in that case?
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
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
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?
@@locofy_ai awesome!
It was awesome locofy. Just finished it. Btw it did not take 30 minutes 😄
We are glad you liked Locofy and that it helped you convert your design to code in under 30 minutes.
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 ?
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/
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??
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/
You guys just changed the coding landscape. I am gonna wait the backend and logic integration
Databinding and API integration is coming very soon, do stay tuned 😉
Sweet!
This is a lot better
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
You can refer to our Responsiveness & Styling Playlist here: czcams.com/video/u70KP7J-0NE/video.html
Let us know if you have any further questions.
How did you get the hamburger as I cannot see it
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.
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!
Facing same issue
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.
Hey the Input boxes the text it always black how do I fix this?
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!
how did u pull the frame off and duplicate?
im assuming u duplicate
That's correct - we duplicate and pull the requisite layers off the main design.
i am not able to see the styling & layout and actions button
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.
I have a question. please answer bro. Is locofy a trouble for web developers? I mean, Will front end devolopers be use less ?
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
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
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?
@@locofy_ai thx for replying! 😃
@@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
@@bernhardcr7665 Hi Bernhard, that is quite strange! Is this happening on Figma? Where it is forcing you to choose smart animation?
@@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
@21.23 i can't see the layout direction
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
if we have some data that will come through an API endpoint how we should tag them?
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.
@@locofy_ai Okay you will be able to say this is form and API right?
Do you have a community the hamburger hiding option is not working for me
Hi Salman, thanks for reaching out. Please join our Slack community and our team can help you : www.locofy.ai/join-slack
I hope this will be free in the near future or offer us at very affordable pricing. Thanks !
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!
How did you created form 1:43?
This form was created before hand and added manually to the deisgn.
Where can I find the hamburger menu?
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.
if i have responsive design in figma can i just get responsive code with this plug in
Exactly!
so responsive design is must to have responsive code?
@@locofy_ai
Auto Layout screws my whole design what should i do?😥
Do check out our guide on Autolayout to learn more about how to apply Autolayout to your designs czcams.com/video/uI2pEqz2THk/video.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
Is animation possible?
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/
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
can't continue without small details
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.
I bet You are Vietnamese:))
I really wish this is free to use
Hey @BONSA, Locofy is currently in Free Beta and you can use all features and functionality for free!
Please help
Hi, can you please reach our to LocoSid on our discord server: You can join our discord from this link: discord.com/invite/r6UDBhEQ4s
Hey, is this responsive??
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!
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.
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
@@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.
So basically locofy is going to take away jobs of web developers now…. Nice , welcome to disasterous future
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.
Huh???