LET’S DIVE INTO FRAMER KIM DOES | @KDOES UX CAMP EUROPE | 25/06/16
L E T ’ S D I V E I N T O F R A M E R
K I M D O E S | @ K D O E S U X C A M P E U R O P E | 2 5 / 0 6 / 1 6
A B O U T M E
😀🤖 #$
✏📓📱💻
✈🗺⛱ 🕹📸 Kim Does: UX Designer @kdoes | kimdoesdesign.nl
W H Y P R O T O T Y P E ?
• Feel it.
• Try it.
• Experiment.
• Test it.
• Sell it.
P R O T O T Y P I N G T O O L S
< H T M L > { C S S } . J S
F R A M E R
• I’m a Framer expert fan 😍, and want to give you an idea what Framer is about.
• How is Framer different.
• What is Framer not good at.
• Look at what people have done.
• Demo: from basics to more complex.
W H AT I S F R A M E R ?
F R A M E R I S N O T S O G O O D F O R …
• Quick prototypes to test a flow.
• Page navigation requires quite a bit to work.
• Prototypes with a lot of states: they get very complex (as in most tools).
👍😕
F R A M E R I S G O O D F O R …
• Micro-interactions and tweaking animations.
• Complex interactions (e.g. multi-part) and transitions.
• Making things that don’t exist yet: almost everything you can come up with.
👍😃
C O D E
• Code can be scary.
• BUT code also gives a lot of freedom.
👾👾😳
C O D E - L E A R N
• Try to solve 1 step at a time.
• The learn section on framerjs.com
• Documentation is your friend.
• The Framer Community is also your friend.
• Learn by looking at / changing other people’s code.
👾😃👾
G E T T I N G I N T O F R A M E R
• Very active community (here): lot’s of people willing to help.
• You can see / tweak / learn from the code from shared projects.
• Very active development team, lots of new features coming out all the time.
• Modules (more about those later).
🛠🤗
S O M E E X A M P L E S
• Removing cards from a list
• Kim Does (me)
• Weather App
• Jorn van Dijk
• Album View Switch
• Anton Kartashov
• More examples: framerjs.com/gallery/
🖥⌨
S K E T C H I M P O R T
M A K E S O M E T H I N G I N T E R A C T I V E
😛
W O R K S M A R T, N O T H A R D
• If you do the same thing over and over: make a function.
☑🤓 ❌😓
C R E AT E T H I N G S U S I N G A U T O - C O D E
C R E AT E T H I N G S U S I N G C O D E
🍹😃⛱
L E T O T H E R S D O T H E W O R K *
• Use modules made by others for complex behaviour
• framerco.de
• github.com
* you still need to do work, but less.
Q U E S T I O N S | E X P E R I E N C E | D I S C U S S I O N
💬 💬 💬 🤔
💭😬 📢
T H A N K S !
K I M D O E S | @ K D O E S U X C A M P E U R O P E | 2 5 / 0 6 / 1 6
👍