Building interactive prototypes with Framer
Check out Framer now: http://framer.com/femke-design/
As designers, we often design screens statically, but oftentimes the product has interactive elements and animations (which is why prototyping is such a valuable skill!).
In this video I walk through how I made a task app prototype with the advanced yet easy-to-use prototyping tool, Framer.
This is a sponsored video.
----------------------------------------------
//LINKS
Looking for 1:1 mentorship or feedback on your portfolio? Book a session with me on Superpeer: http://superpeer.com/femke
//TIMESTAMPS
0:00 - Intro
1:08 - An overview of the prototype
2:00 - Sign in/up screens
2:46 - Button components with variants
4:20 - Adding variables to component properties
5:49 - Input fields
7:56 - Interactive checkboxes
8:55 - Creating a scrolling page
11:27 - Creating task components
12:35 - Adding task variables
13:10 - Adding variants to components
13:51 - Filling out the rest of the list
14:19 - Creating modal and dropdown
15:07 - Adding dropdowns
16:38 - Connecting navigation
18:40 - Previewing the prototype
19:26 - Outro
// MORE
Portfolio: https://www.femke.design
Blog: https://www.femke.co.nz/articles
Podcast: https://www.designlife.fm/
My logo animation is done by Austin Saylor: https://www.austinsaylor.com/
My brand is designed by Black & White studios: https://www.blackandwhitestudios.nz/
Some videos are edited by Nancy Palm: https://nancypalm.com/
// SOCIAL
Twitter: / femkesvs
Instagram: / femkedotdesign
//GET STARTED IN UX
UX Design Validation course: https://uxforfreelancers.thinkific.co...
UX Research and Strategy course: https://uxforfreelancers.thinkific.co...
//TOOLS (referral links)
Try Webflow, my favourite portfolio tool: https://webflow.com/?rfsn=1125819.b1c...
Learn Figma: https://learningfigma.com/femke
Learn UX Research and Concept Validation: https://intouxdesign.thinkific.com/?r...
Get a free trial of the best music for your videos: http://share.mscbd.fm/femkesvs
