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
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:
