Locofy.ai | Figma design to Live Fashion Website with Locofy [Quick Build]
Вставка
- Опубліковано 14 лип 2024
- In this video you'll be learning how to go from a popular Figma design template to a Live Fashion 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 5x faster.
Get Locofy.ai (FREE Beta): www.locofy.ai/
Get the original file by Nickelfox at: www.figma.com/community/file/...
Get the Locofied Figma file at:
www.figma.com/community/file/...
View the live responsive prototype: www.locofy.ai/preview/ziaM4X%...
Credits to NickelFox for the design
00:00 Introduction
00:46 Finding a popular design from Figma community
01:10 Introduction to Locofy Plugin - Tagging
01:45 Using autolayout on a button
03:07 Tagging - Properties tab
03:28 Tagging - Styling & Layout tabs
04:22 Tagging - Actions Tab
06:09 View live preview running on code
07:10 Structuring your Figma file for better code
09:37 Creating a responsive header navigation bar
15:27 Creating a responsive 2-column Hero section
17:59 Creating a responsive 3-column panel layout
20:13 Creating a responsive 2-column panel layout
25:20 Creating a responsive form
28:40 Creating a responsive footer
32:07 Combining responsive sections into a single page
34:14 Making minor adjustments for beautiful responsive design
41:32 Final Preview
41:47 Sync to Locofy Builder to view code
42:23 Introduction to Locofy Builder
43:10 View code and change framework settings
43:37 Creating components and adding props for dynamic content
45:50 View and share live responsive prototype with collaborators
47:24 Creating components for cleaner organized code
47:51 Options for exporting code
47:59 1. Copy to clipboard
48:20 2. Deploy to Netlify or Vercel for a live website
49:22 3. Download code or make pull request to Github
50:20 Running the exported code on your code editor
51:00 Connecting your code to databases and APIs
51:10 Recap and Outro
![Locofy.ai | Figma design to live dashboard with Locofy [Quick Build]](http://i.ytimg.com/vi/weKL9uQEVrY/mqdefault.jpg)
![Locofy.ai | Figma design to live dashboard with Locofy [Quick Build]](/img/tr.png)
![Locofy.ai | Figma to React Native - Spotify Clone [Speedrun]](http://i.ytimg.com/vi/ADQNeM5BQ-0/mqdefault.jpg)
![Locofy.ai | Figma design to React Native travel app in 19 mins with Locofy [Quick Build]](http://i.ytimg.com/vi/Moz1GVjXy3E/mqdefault.jpg)
Really great video about how to use responsive use cases in the locofy plugin.
More of these videos would be great, like toggle drawer, button click effects, hover effects, toggle lottie animation, etc.
Hi Daniel, thanks for the feedback! We'll be creating guides for these specific tags soon!
Nice best tutorial of locofy yet :)
Glad that it helped! Feel free to share with us what kind of other guides/tutorials you'd like to see
Very nicely explained much appreciate make such more video like this with explaining step by step good going 😊
Great to hear that! If there are any videos or guides you'd like to see, please let us know
Legendary plugin
Thank you! Let us know if you need any help!
@@locofy_ai does locofy support Adobe xd
@@motivationworld3992 Coming very soon! :) Look out for it in the next 1-2months
sickk
Thanks! Would love to improve Locofy with your feedback
Hello, this is an Awesome Tutorial
Hi Samyak! Please check out 7:24 which shows you how to break it down into smaller sections. The hamburger icon was copied from another design you can easily find these on the Figma community!
@@locofy_ai Got it. Thankyou 😄👍🏼
Hello, you have placed only an icon in the nav bar can you tell us also how to open it as a hamburger menu...Thnx
Hi @Devendra, you can use the "open popup" action to show your custom designed hamburger menu. Here's a guide that might be useful: guide.locofy.ai/add-actions-basics
Please ping hello@locofy.ai if you need any help!
I want to ask about the state Fill Container, Hug Contents, and Fixed Width.
is it possible to change the state from fixed width to fill container when we change the screen size? I've tried it and can't.
Hi Slebor, it depends upon the Figma file. Would request you to join our Slack community and we can guide you: www.locofy.ai/join-slack
@@locofy_ai Okay, I will join the community, Thank for the response
hi i tried everything she did exactly on a custom made designed file and previewed it but nothing worked, the change page action didn't reflect , not even the hover effect what am i doing wrong please ? can any one give me some pointers `?
Hi there, requet you to join our Slack community and connect with our team: www.locofy.ai/join-slack. We can help you troubleshoot this.
Thanks for the tutorial. But I can't see which layer you selected
Hi @Diki, sorry about that - we'll improve our tutorials so that the layer panel is visible. Please let us know if you run into questions when working on your designs- we'll be happy to help
@@locofy_ai many thanks 🙏
How to deal with the pictures on the figma desig? pictures are not downloaded with source code
Hey there, the pictures are converted to png or svg formats respectively, depending upon the pic. Are you facing any issues with missing images while exporting?
Hello, I can't tag layer in container in figma plugin , the feature is not available
What I can do?
Hi you can tag the layer as a `div` instead.
No ''div" or am i using the outdated version?@@locofy_ai
please make a video on mobile reseponsive
Hi @Art_In Us, we have videos about responsiveness as a whole. Here's a video that covers how to make your designs responsive and the same concepts work for both Desktop and Mobile:
ua-cam.com/video/9Ae6SeOQFDc/v-deo.html
Please let us know if you have any questions!
Why is everyone repeating the same intro script??😅
Thanks for watching many of our videos 😄It happens to be the fastest way to share what Locofy does, but we'll be releasing new varieties of videos soon as well!
It's not just the intro it's everything from start to finish basically lol