Quickly make prototypes with native-feeling iOS 11 interactions. A part of Facebook's iOS GUI, we’ve created customizable Framer components that mirror the behavior of the most important UI elements including navigation bar, notifications, action sheets, alerts, video player, sliders, switches, and more. Whether using these components to mock up apps, concept ideas, or create custom interface elements that work harmoniously with those native to iOS, we hope they help you work faster and elevate your designs.
New to designing apps? You may want to get acquainted with some of the support documentation that Apple has put together in their Human Interface Guidelines and their Apple UI Design Resources.
Check out our page at facebook.design for addition iOS templates for Sketch, Photoshop, and Origami If something is off, we want to fix it. Shoot us a message at designresources@fb.com
Check out the example file (open in Safari) on Framer Cloud for usage examples.
While Facebook has redrawn and shares these assets for the benefit of the design community, Facebook does not own any of the underlying product or user interface designs. By accessing these assets, you agree to obtain all necessary permissions from the underlying rights holders and/or adhere to any applicable brand use guidelines before using them. Facebook disclaims all express or implied warranties with respect to these assets, including non-infringement of intellectual property rights.
Download a zip or clone the repository.
Drag any of the coffee component files into your Framer project, or manually copy them into the project's "modules" folder.
Add any necessary require statements to your project, including braces {}
{iOSStatusBar} = require "iOSStatusBar"
- ActionSheet
- ActivityIndicator
- AlertView
- NavigationBar
- Notification
- PageComponent
- SegmentedControl
- Slider
- StatusBar
- Switch
- TabBar
- TextLayer
- ToolBar
- VideoPlayer
title – a string, the title of the alert
message – a string, the message of the alert
tintColor – the color to be used for the action labels
actionSheet = new ActionSheet
title: "Here is an alert"
message: "Here is a message"
actionSheet.addAction "Add to Playlist", ->
print "Song Added"
actionSheet.present()
Add an action to the ActionSheet. Style is optional and will rearrange the actions' order based on iOS convention around the "cancel" action being the lowest most action, and visually separate.
title – a string, the title of the label for the action (required)
style – a string, either "default", "cancel" (bold text), or "destructive" (red text.)
callback – function to be called when the action is selected
actionSheet = new ActionSheet
title: "Edit Message"
actionSheet.addAction "Mark as Read"
actionSheet.addAction "Flag Message"
Change the style of the action to "destructive" to make the text red or "cancel" to move the action to the bottom.
actionSheet = new ActionSheet
title: "Edit Message"
actionSheet.addAction "Go Back", "cancel"
actionSheet.addAction "Delete", "destructive"
Add a callback to execute some code when a given action is selected
actionSheet = new ActionSheet
title: "Edit Message"
actionSheet.addAction "Mark as Unread", ->
print "Message now unread"
Shows the ActionSheet. It's animated by default and will come up from the bottom. The event "actionSheetAppear" is emitted upon animation completion.
animated – bool to control whether the ActionSheet is animated in or appears instantly
actionSheet = new ActionSheet
title: "Edit Message"
actionSheet.addAction "Mark as Read"
actionSheet.addAction "Flag Message"
# Animate the ActionSheet in when the prototype runs
actionSheet.present()
Hides the ActionSheet. It's animated by default. The event "actionSheetDismiss" is emitted upon animation completion.
animated – bool to control whether the ActionSheet is animated out or appears instantly. (Optional)
actionSheet = new ActionSheet
title: "Edit Message"
actionSheet.addAction "Mark as Read"
actionSheet.addAction "Flag Message"
# Show the ActionSheet instantly
actionSheet.present(false)
# Animate the ActionSheet out after a delay
Utils.delay 5, ->
actionSheet.dismiss()
The following events are emitted and available from ActionSheet.
"actionSelected" – emitted when a given action is selected. Has the title of the selected action available as an argument.
"actionSheetAppear" – emitted on entrance animation complete
"actionSheetDismiss" – emitted on exit animation complete
A standard indeterminate spinner that shows that an activity is in progress.
animating – a boolean indicating if the indicator is currently animating, defaults to true (setting this value calls stopAnimating and startAnimating)
color – the color of the activity indicator, defaults to a gray value
large – a boolean indicating if the indicator should be a large size, defaults to false
hidesWhenStopped – a boolean indicating if the indicator should hidden when not animating, defaults to false
Events.AnimationStart – emitted startAnimation() is called
Events.AnimationStop – emitted when stopAnimation() is called
Create a standard activity indicator
indicator = new iOSActivityIndicator`
Create a large, white activity indicator
indicator = new iOSActivityIndicator
color: "white"
large: true
Create an activity indicator that starts animating in response to a button click and stops after 3 seconds
indicator = new iOSActivityIndicator
animating: false
hidesWhenStopped: true
indicator.onAnimationStop ->
print "display search results"
myButton.onTap ->
indicator.animating = true
Utils.delay 3, ->
indicator.animating = false
Start animating the indicator. Called automatically when setting the animating to true
Used when you want to control when an activity indicator should start animating.
indicator = new iOSActivityIndicator
animating: false
indicator.startAnimating()
Stop animating the indicator. Called automatically when setting the animating to false
Used when you want to control when an activity indicator should start animating.
indicator = new iOSActivityIndicator
indicator.stopAnimating()
This component is used to display an alert message to the user and prompt a response. It will adapt its layout to the number of actions just like UIKit.
title – a string, the title of the alert
message – a string, the message of the alert
tintColor – the color to be used for the action labels
alert = new AlertView
title: "Here is an alert"
message: "Here is a message"
alert.addAction "Done", ->
print "Alert dismissed"
alert.present()
Add an action to the AlertView. Style is optional and will rearrange the actions' order based on iOS convention around the "cancel" action being the lowest most action. Layout adapts to the number of actions.
title – a string, the title of the label for the action (required)
style – a string, either "default", "cancel" (bold text), or "destructive" (red text.)
callback – function to be called when the action is selected
alertView = new AlertView
title: "Delete All?"
alertView.addAction "Yes"
alertView.addAction "Cancel"
Change the style of the action to `"destructive"to make the text red or"cancel"`` to bold.
alertView = new AlertView
title: "Delete All?"
alertView.addAction "Delete", "destructive"
alertView.addAction "Cancel", "cancel"
Add a callback to execute some code when a given action is selected
alertView = new AlertView
title: "Delete All?"
alertView.addAction "Delete", ->
print "All messages deleted"
Shows the ActionSheet. It's animated by default.
animated - bool to control whether the AlertView is animated in or appears instantly
alert = new AlertView
title: "Here is an alert"
message: "Here is a message"
alert.addAction "Done"
# Animate the AlertView in when the prototype runs
alert.present()
Hides the AlertView. It's animated by default.
animated - bool to control whether the AlertView is animated out or disappears instantly
alert = new AlertView
title: "Here is an alert"
message: "Here is a message"
alert.addAction "Done"
# Show the AlertView instantly
alert.present(false)
# Animate the AlertView out after a delay
Utils.delay 5, ->
alert.dismiss()
The following events are emitted and available from AlertView.
"actionSelected" – emitted when a given action is selected. Has the title of the selected action available as an argument.
"alertViewAppear" – emitted on entrance animation complete
"alertViewDismiss" – emitted on exit animation complete
A configurable navigation controller that manages displaying the header and animating the content layers onscreen
tintColor – color used to show the selected tab
translucent – boolean that controls if the status bar should be displayed with a light blur background, defaults to true
pushNavigationItem – emitted when a new item is pushed on the navigation bar, the current and previous layers are sent as arguments
popNavigationItem – emitted when the back button is tapped and the current item is popped from the navigation bar, the new and old layers are sent as arguments
SelectNavigationItemButton – emitted when a button on the left/right sides are tapped, the button is sent as the argument
Adds a layer to the navigation stack with the specified properties
layer – a layer that is animated onscreen and managed by the NavigationBar
properties – the following properties can be used to navigation bar
title – string that is displayed as the title and back button
useLargeTitle – boolean that specifies if the title should be displayed with a large font
canHideLargeTitle – boolean that specifies the large title should be collapsed during scroll to a small title
titleLayer – a layer that is used in place of a small title
color – color used for the titles
hasSearchField – boolean that specifies if the navigation bar should have a search field
canHideSearchField – boolean that specifies the search field should only be exposed after scrolling or is always visible
leftButtons – array of strings/images/layers that are displayed on the left side of the navigation bar
showBackButton – boolean that specifies that the back button should be displayed, even if this is the first navigation item
rightButtons – array of strings/images/layers that are displayed on the right side of the navigation bar
boldRightButton – boolean that specifies that text layers on the right side should be bold, defaults to true if the title is “Done”,”Cancel”, or “Close”
Create a NavigationBar with and Edit Button
navBar = new iOSNavigationBar
navBar.pushNavigationItem AlbumScroll,
title: "Albums"
rightButtons: "Edit"
navBar.on "SelectNavigationItemButton", (button) ->
edit() if button is "Edit"
Create a NavigationBar with large title, search field and buttons on each side
navBar = new iOSNavigationBar
navBar.pushNavigationItem AlbumScroll,
title: "Albums"
useLargeTitle: true
hasSearchField: true
leftButtons: [AddButton]
rightButtons: [SearchButton, "Edit"]
AddButton.onTap ->
print "Add Album"
SearchButton.onTap ->
print "Search"
navBar.on "SelectNavigationItemButton", (button) ->
edit() if button is "Edit"
A pushed iOS notification with customizable app information, messaging, behavior and sound.
Properties
appIcon - a path to an image file for an app icon
appName - a string, app name
timestamp - a string, time the notification push is arrived
title - a string, title of the notification
body - a string, body content of the notification
timeout - a value in second, a duration to display notification before it hides
sound - a path to a sound file to play when notification occurs
Create a Whatsapp notification that dismisses after 3 seconds it is displayed.
notification = new iOSNotification
appName: "Whatsapp"
title: "Francis Whitman"
body: "🤪 Anyone who wants to tag along is more than welcome."
duration: 3
Displays a notification.
button = new TextLayer
button.onTap ->
notification.present()
Events
notificationDismissed - emitted when notification is dismissed whether by itself, drag or tap
Events.Tap - emitted when notification is tapped
The iOSPageComponent extends Framer's PageComponent by adding an iOSPageControl that displays the standard the iOS page dots.
Create a simple page component with three pages.
{iOSPageComponent, iOSPageControl} = require "iOSPageComponent"
page = new iOSPageComponent
page.addPage a
page.addPage b
page.addPage c
pageControl – the iOSPageControl that is automatically configured and managed
The standard the iOS page dots that can be manually setup and controlled. For standard behaviors consider using the iOSPageComponent
numberOfPages – the number of page dots
currentPage – the index of the current page
hidesForSinglePage – hide the control if only one page, defaults to false
pageIndicatorTintColor – the color used to display unselected pages
currentPageIndicatorTintColor – the color used to display the current page
Note: if both pageIndicatorTintColor and currentPageIndicatorTintColor are both "white" or "black", the inactive dots will be displayed with a transparent version of the color
Create a custom page control with 5 dots using white and red colors
{iOSPageComponent, iOSPageControl} = require "iOSPageComponent"
pageControl = new iOSPageControl
numberOfPages: 5
currentPage: 2
pageIndicatorTintColor: "white"
currentPageIndicatorTintColor: "red"
items – an array of strings, the titles of each segment in the order they will appear from left to right
tintColor – the color of the control's outline, text and selected segment. (defaults to iOS blue)
backgroundColor – the control's background color. (defaults to white)
isMomentary – a boolean indicating whether segments can be selected and highlighted. If isMomentary = true, then the selected segment won't stay highlighted. (defaults to false)
Create a control with default styling and three segments, and select the first segment.
segmentedControl = new iOSSegmentedControl
items: ["First thing", "Second thing", "Third thing"]
segmentedControl.setSelected true, 0
Create a small, green, momentary switch control.
momentarySwitch = new iOSSegmentedControl
items: ["On", "Off"]
width: 200
tintColor: "#42b72a"
isMomentary: true
numberOfSegments – how many segments are in the control
selectedSegmentIndex – the index of the segment that's currently selected. This will always be undefined for momentary controls, since you can't select segments if a control is momentary.
segmentedControl = new iOSSegmentedControl
items: ["First thing", "Second thing", "Third thing"]
segmentedControl.setSelected true, 0
print segmentedControl.numberOfSegments # 3
print segmentedControl.selectedSegmentIndex # 0
Select, or unselect, a segment at the specified index.
enabled – a boolean, indicating whether to enable to disable the segment
index – the index of the segment you're targeting
Select the first segment in the control. Since by default no segments are selected, you would do this you want a segment to be initially selected when the control first appears.
segmentedControl = new iOSSegmentedControl
items: ["First", "Second", "Third"]
segmentedControl.setSelected true, 0
Add a new segment to the control.
title – a string, the title of the new segment you're adding
index – the position in which you'd like to add the new segment
Add a new segment called “Fourth” in the final (default) position at the far right of the control.
segmentedControl = new iOSSegmentedControl
items: ["First", "Second", "Third"]
segmentedControl.insertSegment "Fourth"
Add a new segment called “Zero” to the first position in the control.
segmentedControl = new iOSSegmentedControl
items: ["One", "Two"]
segmentedControl.insertSegment "Zero", 0
Remove the segment at the specified index.
index – the index of the segment you're targeting for removal.
Remove the segment at index=2 from the control.
segmentedControl = new iOSSegmentedControl
items: ["First", "Second", "NaN", "Third"]
segmentedControl.removeSegment 2
Change the title of a segment at a specified index.
title – a string, the new title for the segment you're targeting
index – the segment's index that you are targeting
Update the title of the second segment to “Second”.
segmentedControl = new iOSSegmentedControl
items: ["First", "Fifth", "Third"]
segmentedControl.setTitle "Second", 1
Hard-set the width of a segment at a specific index. Other segments will dynamically resize to equally fill the remaining space.
width – the width of the targeted segment
index – the segment's index that you are targeting
Set the width of the second segment to fit the mightily long title.
segmentedControl = new iOSSegmentedControl
items: ["First", "The Second Segment's Long Title", "Third"]
segmentedControl.setWidth 230, 1
The following events are emitted and available from SegementedControl.
"change:currentSegment" – emitted when the current segment is changed. This is emitted from both standard and momentary controls. This event has the currently-selected and previously-selected segment layers as arguments and allows you to access both the segment's title (current.title or last.title) and index (current.index or last.index).
segmentedControl.on "change:currentSegment", (current, last)->
print "Switched to", current.title, current.index
The iOSSlider component extends Framer's SliderComponent and adopts the iOS look-and-feel by default, extends the API to mirror iOS conventions, and allows the addition of optional icons on each end of the slider.
minimumTrackTintColor – the track's default color. (alias for SliderComponent.backgroundColor)
maximumTrackTintColor – the “active” portion of the track's color. (alias for SliderComponent.fill.backgroundColor)
thumbTintColor – the slider knob's color. (alias for SliderComponent.knob.backgroundColor)
minimumValueImage – an image URL, appears to the left of the slider
maximumValueImage – an image URL, appears to the right of the slider
minimumValueImagePadding – padding between the slider bar and the minimumValueImage
maximumValueImagePadding – padding between the slider bar and the maximumValueImage
slider = new iOSSlider
volumeSlider = new iOSSlider
width: Screen.width - 80
minimumValueImage: VolumeDown.image
minimumValueImagePadding: 13
volumeSlider.maximumValueImage = VolumeUp.image
yellowSlider = new iOSSlider
minimumTrackTintColor: "#ddd"
maximumTrackTintColor: new Color("#f5c33b").alpha(.25)
thumbTintColor: "#f5c33b"
A standard iOS status bar that can be configured for different uses. The iOSStatusBar is automatically configured for different device sizes (iPhone 8 / iPhone 8 Plus / iPhone X) and hides in landscape orientation.
translucent – a boolean that controls if the status bar should be displayed with a translucent background, defaults to false
darkStyle – a boolean that specifies the text and icons should be light to be used on a dark background
time – string that is displayed as the clock
useCurrentTime – a boolean that indicates that the current system time and locale should be used to display the time in the clock
backAppName – display the back to app button with the specified app name
carrier – the name of the cell carrier
cellStrength – value from 0-1 of the strength of cell signal that is represented by the cell bars
wifiStrength – value from 0-1 of the strength of wifi signal that is represented by the wifi waves
networkType – ["Wifi", "LTE", "4G", "3G"] used to indicator the type of network
showBatteryLevel – boolean that controls if the battery % label should be displayed, defaults to false
Create a status bar using the current system time
statusBar = new iOSStatusBar
useCurrentTime: true
Create a status bar that has a link back to Instagram
statusBar = new iOSStatusBar
backAppName: "Instagram"
Create a dark, translucent status bar that is using LTE
statusBar = new iOSStatusBar
translucent: true
darkStyle: true
networkType: "LTE"
cellStrength: 0.5
A control that is used to represent an on/off state.
isOn – boolean that controls the on/off state of the switch
tintColor – color of the switch background when isOn is true
thumbTintColor – color of the switch thumb
The “Events.ValueChange” event is emitted when the isOn property is changed and the isOn value is passed to the event handler.
mySwitch = new iOSSwitch
point: Align.center
mySwitch.onValueChange (value) -> print value
A standard iOS tab bar that is automatically configured for different device sizes (iPhone 8 / iPhone 8 Plus / iPhone X) and both portrait and landscape orientation.
tintColor – color used to show the selected tab
translucent – boolean that controls if the status bar should be displayed with a light blur background, defaults to true
currentTab – get/set the current tab by layer
selectedIndex – get/set the current tab by index
Adds a tab to the tab bar with the specified title and icon
layer – a layer that is made visible when the tab is selected
properties – the following properties can be used to customize the tab
title – the name of the tab, defaults to layer.name
icon – the image to be displayed in the tab bar and will be used as a mask with the specified colors
color – color of the title and icon when the tab is unselected, defaults to gray
selectedColor – color of the title and icon when the tab is selected, defaults to tabBar.tintColor
selectedIcon – the image displayed when the tab is selected, defaults to icon
Create a tab bar with 3 tabs
tabBar = new iOSTabBar
tabBar.addTab Tab_1,
title: "First"
icon: Image_1
tabBar.addTab Tab_2,
title: "Second"
icon: Image_2
tabBar.addTab Tab_3,
title: "Third"
icon: Image_3
The following events are emitted and available from SegementedControl.
"change:currentTab" – emitted when the current tab is changed. This event has the currently-selected and previously-selected tab layers as arguments
tabBar.on "change:currentTab", (current, last) ->
print "Switched to: ", current.name
The iOSTextLayer extends Framer's TextLayer by adding a textStyle property.
textStyle – adjusts the fontSize and fontWeight, defaults to iOSTextStyle.body
iOSTextStyle.boldTitle
iOSTextStyle.largeTitle
iOSTextStyle.title1
iOSTextStyle.title2
iOSTextStyle.title3
iOSTextStyle.headline
iOSTextStyle.body
iOSTextStyle.callout
iOSTextStyle.subhead
iOSTextStyle.footnote
iOSTextStyle.caption1
iOSTextStyle.caption2
A standard iOS toolbar that is automatically configured for different device sizes (iPhone 8 / iPhone 8 Plus / iPhone X) and both portrait and landscape orientation.
tintColor – color used to show the selected tab
translucent – boolean that controls if the status bar should be displayed with a light blur background, defaults to true
Adds a button to the toolbar with the provided layer as the content of the button. SVGLayers and layers with images will be colored automatically with the toolbar's tintColor
a Layer that is positioned automatically by the toolbar
Adds a button to the toolbar with the provided string as the button title
a Layer that is positioned automatically by the toolbar
Create a toolbar with Cancel and Done buttons
toolbar = new iOSToolbar
cancelButton = toolbar.addTextButton "Cancel"
doneButton = toolbar.addTextButton "Done"
doneButton.onTap ->
print "Done"
The iOSVideoPlayer extends VideoPlayer by adding the standard iOS player controls. The iOSVideoPlayer can be presented in-place or fullscreen. As with the standard VideoLayer, for additional controls and events, access the player object.
video – the URL to the video
player – the HTML Video object that controls the video playback, see this Overview for more info
fullScreen – sets the video to be presented in full screen mode or embedded in the UI, defaults to true
autoplay – begin playback of the video after it is loaded, defaults to false
volume – number 0-1, convience accessor to player.volume, sets the volume of the video, defaults to 0
"change:fullScreen" – emitted when the fullScreen property is changed.
videoPlayer.on "change:fullScren", (fullScreen) ->
print "Closed Video Player" if fullScreen is false
Create a video player presented in fullscreen:
videoPlayer = new iOSVideoPlayer
video: "http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v"
autoplay: true
volume: 0.5
Create a video player embedded in the UI:
videoPlayer = new iOSVideoPlayer
video: "http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v"
fullScreen: false
parent: container
width: 350
height: 250