Daniel Wiseman : Digital Product Designer : UX Designer

Interaction Prototyping

Interaction design exploration using Framer together with Photoshop and Sketch. These are quick experiments focusing on motion and interactivity, not polished designs. And unfortunately, Framer only likes WebKit/Blink.

Contacts List

A simple phone contacts list. When the 'Add Contact' icon (top right) is tapped, the New Contact module slides down and the existing contacts collapse together. Within this module, when 'Add' is tapped, it slides away and all the contacts reveal again. Started using Framer Studio and CoffeeScript.


layer = Framer.Importer.load "imported/SketchPlay1"

layer.AddContact.y = -310
layer.Person1.y = 60
layer.Person2.y = 172
layer.Person3.y = 284

layer.AddContact.states.add
	up: {y: -310}
	down: {y: 62}

layer.Person1.states.add
	up: {y: 60}
	down: {y: 434}

layer.Person2.states.add
	up: {y: 172}
	down: {y: 434} #333
layer.Person3.states.add
	up: {y: 284}
	down: {y: 434} #445

layer.AddContact.states.animationOptions = {
	curve: "cubic-bezier(0.19, 1, 0.22, 1)",
	time: 1
	}

layer.TopBar.on Events.Click, ->
	layer.Person1.states.switch("down")
	layer.Person2.states.switch("down")
	layer.Person3.states.switch("down")
	Utils.delay 0.4, ->
	   layer.AddContact.states.switch("down")

layer.AddContact.on Events.Click, ->
	layer.AddContact.states.switch("up")
	layer.Person1.states.switch("up")
	layer.Person2.states.switch("up")
	layer.Person3.states.switch("up")