Interactive Prototyping with Framer and React
Hands-off workshop for Eventbrite Spain design team. We created our first interactive prototypes using Framer.
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 🙌
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
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.
Resources and next steps
- Framer tutorial on Youtube
- Framer Tutorial: 7 Simple Microinteractions to Improve Your Prototypes
- Using Conditions in Framer to Replicate Instagram’s Pagination Dots
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: