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/

🖥⌨

88

L E T ’ S D I V E I N !

Tristan Schmurr - @kewl

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

👍