Go From Figma to Live Website in 20 Minutes (No-Code)
🎓 Framer University: https://framer.university
👉 Create a free Framer account: https://framer.university/free-account
In this Framer tutorial, you'll learn how to turn your Figma website design to a live working website with the help of Framer. You'll learn how to import your design to Framer, and how to optimize it for different breakpoints to achieve a responsive website. By watching this video, you’ll be able to publish a personal website without writing any code.
Remix the Framer project: https://nandi.framer.website/
Figma file: https://bit.ly/3LGJfa4
00:00 - Introduction
00:50 - Importing from Figma to Framer
2:50 - Setting responsive full width
4:21 - Fixed navigation bar
4:56 - Optimizing the image
5:25 - Creating a button component
7:03 - Adding tags to the sections
7:27 - Adding links
8:12 - Creating hover states
9:10 - Creating scroll sections
10:50 - Optimizing the website on smaller breakpoints
14:48 - Responsive navigation bar
20:00 - Publishing the website
21:15 - Conclusion & resources
Follow me on:
Twitter: / learnframer
Instagram: / framer.university
Watch video Go From Figma to Live Website in 20 Minutes (No-Code) online without registration, duration hours minute second in high quality. This video was added by user Framer University 06 May 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 15,867 once and liked it 634 people.