Awesome
WatchKit-Framer
Apple Watch Kit for FramerJS to help you easily create Apple Watch interfaces in Framer.
Add it in your Framer Studio project
- Download the project from github.
- Copy
watchkit.coffee
intomodules/
folder. - Import it in Framer Studio by writing:
WatchKit = require "watchkit"
.
Note: Components are prepared to be used with 42mm Apple Watch.
Note: You need the San Francisco font provided by Apple.
Components
Status Bar
Creates an Apple Watch status bar.
statusBar = new WatchKit.StatusBar
title: "Some title"
back: true # Display or not the back button
time: true # Display or not the time
Buttons
Buttons should have the Y position where you want to place them in the screen.
Buttons perform an animation when the user clicks them.
Button for actions
actionButton = new WatchKit.ActionButton "Button title", y: 50
Button for dismiss
dismissButton = new WatchKit.DismissButton y: 140
Button with image
Adds an image on the left side of the button.
imageButton = new WatchKit.ActionButton image: "images/some-icon.jpg", y: 140
Disable a button
Buttons can be disabled using the disabled: true
.
Separator
Creates a default Apple separator. Specify the background color for a different color than the default one.
separator = new WatchKit.Separator y: 100, backgroundColor: "blue"
Notification
Creates a configurable notification.
notification = new WatchKit.Notification
title: "Alert title"
appName: "App title"
image: "image/some-image.jpg" # Set your app image
contentBodyLayer: someLayerToUseAsBody
notification.show() # Show the notification
Additionally you can configure appNameColor
, contentBodyBackgroundColor
and contentTitleBackgroundColor
.
Using text as body
WatchKit.Notification.contentBodyFont
is exposed to be able to use the default font for the body content.
contentBodyLayer = new Layer
html: "Lorem ipsum dolor sit amet."
style: _.extend {}, WatchKit.Notification.contentBodyFont,
padding: "0 14px" # Set some padding for better display
backgroundColor: "transparent"
notification = new WatchKit.Notification
title: "Alert title"
appName: "App title"
contentBodyLayer: contentBodyLayer
notification.show()
Adding action buttons
By default there is only a dismiss button. You can add more buttons by using addActionButton
or addActionButtons
methods.
actionButton1 = new WatchKit.ActionButton "Action 1"
actionButton2 = new WatchKit.ActionButton "Action 2"
notification = new WatchKit.Notification
title: "Alert title"
appName: "App title"
notification.addActionButtons actionButton1, actionButton2
notification.show()
Pagination
Creates a framer page component with the apple watch pagination dots.
Pagination contains a set of pages that can be swiped.
pagination = new WatchKit.Pagination
showPagination: true # Display or not the pagination dots
Page
The basic page for the pagination element.
page = new WatchKit.Page
Layers can be added inside a page by using the addLayer
method.
page = new WatchKit.Page
layer = new Layer
page.addLayer layer
In order to add pages to the pagination object, use the addPage
or addPages
method.
page1 = new WatchKit.Page image: "images/some_image.jpg"
page2 = new WatchKit.Page
someLayer = new Layer
page2.addLayer someLayer
pagination.addPages page1, page2
Modal Sheet
Creates a modal sheet exactly with the same behaviour as the one in the watch.
Use present()
and dismiss()
to show or hide the modal.
modalSheet = new WatchKit.ModalSheet
dismissTitle: "Dismiss" # Pass a dismiss title to enable a dismiss button
someLayer = new Layer
modalSheet.addLayer someLayer
modalSheet.present()
Other
Click animation curve
Use this curve for click animations
someLayer.animate
curve: WatchKit.clickAnimationCurve