🎓 Framer University: https://framer.university
👉 Create a free Framer account: https://framer.university/free-account
In this video, you’ll discover how top Figma designers are transforming static PNGs into live, responsive websites using Framer. I’ll guide you through creating a hero section in both Figma and Framer, adding interactivity, and converting old Figma projects to Framer sites. Plus, explore Framer University for hundreds of free components and tutorials to boost your web design skills.
Framer project:
https://framer.university/resources/rolls-royce-phantom-hero-section-in-framer
Figma file:
https://link.framer.university/rr-figma
0:00 – Introduction
1:20 – The roadmap
1:56 – Designing a hero section
21:17 – Setting up responsiveness
22:59 – Comparing Figma’s and Framer’s output
25:08 – Creating a button component
28:28 – Adding appear animations
31:38 – More animations
31:58 – Saving previous Figma files
35:26 – Ultimate resource for Framer power-ups
36:26 – Quick recap
Follow me on:
X: https://x.com/learnframer
Instagram: https://instagram.com/framer.university
