Рет қаралды 13,865
🎓 Framer University: framer.university
👉 Create a free Framer account: framer.univers...
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: nandi.framer.w...
Figma file: 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