iOS controls recreated in Framer, for your prototyping pleasure.
JavaScript CoffeeScript Other
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
RainbowCal_withModules.framer
framerKit.framer
framerKit_skinned.framer
.gitignore
LICENSE.md
README.md
framerKit.coffee

README.md

FramerKit

iOS Picker & Table View controls recreated in Framer, for your prototyping pleasure.

In my day to day as a designer at Timeful, I've been increasingly making modular components to work through complex interactions with a lot of states and dynamic copy. Framer's awesome new Modules seemed like a perfect way to put them out into the world.

Let me know what you think @raphdamico!

#Demos

Rainbow Calendar (+ moment.js)

Kitchen Sink

Kitchen Sink Blue

Usage

  • Create a new Framer project
  • Download framerKit.coffee and put it in the /modules folder of your project
  • In Framer studio add the following lines to your Framer file:
framerKit = require "framerKit"
new framerKit.TableViewRow name: "Cool switch", icon: 'switch'

## Change '750' to the pixel width of whatever device you're working with
framerKit.defaults.screenWidth = 750
  • You should see a row of a table view with a switch! Try clicking it!

Check Framer docs for more info on how to use packages.

Controls

There are two controls to play with each with a bunch of options.

Picker

For eack picker, you can

yourPicker = new framerKit.Picker 
	x: 0
	y: 0
    width: [defaults to screen width]
	defaultText: [Default text of the picker's header row]
	drums: [an array of drum objects (see below)]

Each drum is an object that can have the following options:

drumObject = {
	name: "firstDrum" 		 # Set this, it's the easiest way to access the drum 
	enabled: [true/false]	  # if you set 'false', the drum won't be interactable
	xPct: 0  				  # % of width of picker to place the drum
	widthPct: 1				# width of this drum as % of the picker's width
	textAlign: "center"		# left, center, right
	textColor: 				# defaults to overall text tint	
}

Notes:

  • Pickers fire the following events: 'PickerStartedMoving' 'PickerDidChange' 'PickerFinishedChanging', which can be used just as you would a normal Framer event, e.g.:
yourPicker.on 'PickerDidChange', (drums, layer)->
	## Do some stuff
  • Get value of the drum by using yourPicker.drumsByName('firstDrum').val
  • To set the drum to a value, e.g. the 4th item in the drum yourPicker.drumsByName('firstDrum').setIndex(4)
  • If you want to make a date picker, this pairs very well with a date library like moment.js

Table view

You can create whole TableViews or just single rows. Both fire a 'DidChange' event when they change.

yourTableView = new framerKit.TableView 
	x: 0
	y: 248
    items: ["Eggs", "Bacon", "Beans"] # Any array
    icon: ['switch'|'cross'|'check'|'caret']
    validation: ['none', 'radio']

Bonus, there's also a TableViewHeader.

yourHeader = new framerKit.TableViewHeader 
	y: 10
	text: 'Header text!'

Questions

Feel free to contact me, Raph D'Amico, on raph-at-gmail-dot-com or @raphdamico on Twitter.