Framer.js – Interactive prototyping tool – Why Framer?

View Github Repository Open presentation in a new window

ricetseng

See all presentation from ricetseng

Framer.js – Interactive prototyping tool – Why Framer?

0 0

framer_sharing

framer_sharing

On Github ricetseng / framer_sharing

Framer.js

Interactive prototyping tool

Rice Tseng / Interaction Designer @Yahoo

Why Framer?

Cross-platform

for iOS, Android, desktop or the web

High-fidelity prototypes

!= higher resolution

cause me

to think different

and better idea

Real devices

Play, see and touch designs on real devices

Key points before coding

Initial properties

How long should the animation take?

What’s the element timing?

Which element is the next animations?

Final properties

Does Item 2 start animating at the same time as Item 1, or does it have a slightly staggered start time?

Source

Facebook Community

Framer.js Docs

Example

我也不是純資訊背景的人。這邊想強調的是，prototyping是快速，不是寫的一條條美麗的程式碼，我們主要的目的是溝通，所以，為達目的不擇手段。像我也不可能記住所有的code，目的是做出好使用經驗的設計，所以copy paste是我很常用的方式。

Prototype 0

Scroll

Import sketch file

Utils.globalLayers(prototype0)

Create a new ScrollComponent 

scroll = new ScrollComponent
    width: 750
    height: 1206
    y: 126
    x: 0
scrollAvatar.superLayer = scroll.content

Add padding

scroll.contentInset =
    bottom: 80
    top: -100
scroll裡面新增padding

Enable or disable horizontal scrolling.

scroll.scrollHorizontal = false

Prototype 1

Click & Utilities

Import sketch file

friction: 摩擦。tension:張力。velocity:速度。 
springVal = 'spring(300,0,30)'
Framer.Defaults.Animation =
	curve: "spring"
	curveOptions:
		tension: 95
		friction: 30
		velocity: 30
avatarCount = 12
for count in [1..avatarCount]
	avatarAll = prototype1["avatar" + count]
	avatarAll.states.add
		start: {scale:0, opacity:0}
	avatarAll.states.switchInstant "start"
switchInstant顧名思義就是轉到這個狀態，但沒有任何動畫

Click Event

prototype1.close_btn.on Events.Click, ->
	prototype1.cardAll.animate
		properties: 
			opacity: 0

Utilities

Utils.delay 0.5, ->
	timeFactor = 0.03
	Utils.delay 1 * timeFactor, -> prototype1.avatar1.states.next()
	Utils.delay 2 * timeFactor, -> prototype1.avatar2.states.next()
	Utils.delay 3 * timeFactor, -> prototype1.avatar3.states.next()
	Utils.delay 4 * timeFactor, -> prototype1.avatar4.states.next()
	Utils.delay 5 * timeFactor, -> prototype1.avatar5.states.next()
	Utils.delay 6 * timeFactor, -> prototype1.avatar6.states.next()
	Utils.delay 7 * timeFactor, -> prototype1.avatar7.states.next()
	Utils.delay 8 * timeFactor, -> prototype1.avatar8.states.next()
	Utils.delay 9 * timeFactor, -> prototype1.avatar9.states.next()
	Utils.delay 10 * timeFactor, -> prototype1.avatar10.states.next()
	Utils.delay 11 * timeFactor, -> prototype1.avatar11.states.next()
	Utils.delay 12 * timeFactor, -> prototype1.avatar12.states.next()
utilities一些客製化的function，讓framer更簡單快速使用

Q & A

@ricetseng

Framer.js Interactive prototyping tool Rice Tseng / Interaction Designer @Yahoo