Download - Dive into Framer
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
π