Apple Watch Kit for FramerJS to help you easily create Apple Watch interfaces in Framer.
- Download the project from github.
- Copy
watchkit.coffeeintomodules/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.
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 timeButtons should have the Y position where you want to place them in the screen.
Buttons perform an animation when the user clicks them.
actionButton = new WatchKit.ActionButton "Button title", y: 50
dismissButton = new WatchKit.DismissButton y: 140Adds an image on the left side of the button.
imageButton = new WatchKit.ActionButton image: "images/some-icon.jpg", y: 140Buttons can be disabled using the disabled: true.
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"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 notificationAdditionally you can configure appNameColor, contentBodyBackgroundColor and contentTitleBackgroundColor.
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()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()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 dotsThe basic page for the pagination element.
page = new WatchKit.PageLayers can be added inside a page by using the addLayer method.
page = new WatchKit.Page
layer = new Layer
page.addLayer layerIn 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, page2Creates 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()Use this curve for click animations
someLayer.animate
curve: WatchKit.clickAnimationCurve