Interactive Prototyping with Framer and React

Interactive prototypes are one of the best ways to collaborate in a product team: it's visual, it contains animations and it lets you quickly test ideas with your clients and stakeholders.

I did recently a workshop about Framer and React for the design team of Eventbrite Spain, and here I'm sharing resources to help you start creating your first interactive prototypes.

What is an interactive prototype?

It's a design project that can include animations, effects and even simulates user flows. It's a cheap way to test functionalities without asking engineers to code the design.

This is one of the interactive prototypes we built during the workshop. If you wanna know how to build it, I recommend you to take a look to the slides 🙌

Jorge Ferreiro React and Framer workshop at Eventbrite Spain

Give me the slides!

I uploaded the slides in SpeakerDeck. You can get the slides in this link: https://speakerdeck.com/ferreiro/interactive-prototyping-with-react-plus-framer-jorge-ferreiro-at-eventbrite-spain

Workshop Video

Videos are now avaliable in my YouTube channel, so subscribe to be notified!

What topics did I explain in the workshop?

  • Quickly prototype using Framer, and introducing Framer key concepts like Frame, Graphic, Stack, Group, Interactive scroll.

  • Making reusable components: Creating Design components that lets you re-use and override your component properties.

  • Intro to coding and React: Explaining the difference between HTML5, CSS, and JavaScript, and introduced React components.

Resources and next steps

🤔 Questions?

If you have some doubts or want to stay in touch I'll be happy to get a message from you! You can reach me here:

Want to launch products?

I'm Jorge Ferreiro and I've launched more than four side products and worked in tech companies like Amazon and Eventbrite.
Want to know how I do it?

By submitting the form you accept the privacy policy