Learn how to design and build an interactive prototype with Framer and smart components in this step-by-step tutorial. I'll be covering everything you need to know about Framer and smart components to help you build an interactive feed of tweets with hover, pressed and click states.

As the design industry matures, tools like Framer will become increasingly easier to use when it comes to building real, interactive prototypes, enabling true human-computer interaction design as it always should've been. A prototype is worth more than a thousand frames.

If you are interested in product prototyping and found this video useful, let me know! Are there any specific areas of Framer or prototyping that you'd like more clarity on? Stacks, variables, micro-interactions? Drop your requests in the comments below 💬

If you are new to my channel, welcome! Don't forget to hit subscribe if you'd like to keep up with my weekly dose of product design videos and tutorials to help you build great products and bring your ideas to life.

Connect with me here 👋
Twitter:   / javalaves  
Figma: https://www.figma.com/@javi

Chapters:
0:00 - Intro
1:15 - Overview
2:35 - Tweet layout
5:36 - IconButton component
17:31 - Tweet component
21:41 - Feed design
26:11 - Results & conclusion