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
Смотрите видео Go From Figma to Live Website in 20 Minutes (No-Code) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Framer University 06 Май 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 15,867 раз и оно понравилось 634 людям.