Ios 11 iphone gui facebook
Today, there are many user interface kits available for designers to speed up their work. However, few if any incorporate motion. This year, we’ve created Origami and Framer components that mirror the behavior of the most important UI elements in iOS 11 as well as recreating elements found in the public release of iOS 11 in Sketch and Photoshop.
Whether using these files 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.
UPDATED FEBRUARY 27, 2018
THIS ARTICLE IS GREAT FOR
Made for motion
The most important addition to this year’s release is our creating Origami and Framer components to make it easy for designers to quickly prototype native-feeling iOS 11 interactions. These include navigation bar, notifications, action sheets, alerts, keyboards, and more.
What’s inside?
Whether you work in Origami, Framer, Sketch, or Photoshop, we created a file to use with each tool. We’ve focused on balancing ease-of-use with accuracy.
The components attempt to cover as many of the common UI elements within the OS as possible, including renderings of the phones themselves. Below that are operating system level screens that are common outside of individual app experiences. And at the bottom of the page are flows through common apps for reference and use. In Sketch, we’ve worked in 1x and in Photoshop at 2x and where possible we’ve tried to make components scale across device widths.
In addition to the commonly used UI elements, Facebook iOS 11 contains a ton of elements found throughout the latest iOS release.
Источник
Ios 11 iphone gui facebook
Facebook iOS 11 iPhone GUI for Framer
Design better, faster
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 <>
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.addAction(title, style, callback)
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
Change the style of the action to «destructive» to make the text red or «cancel» to move the action to the bottom.
Add a callback to execute some code when a given action is selected
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
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)
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
Create a large, white activity indicator
Create an activity indicator that starts animating in response to a button click and stops after 3 seconds
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.
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.
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.addAction(title, style, callback)
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
Change the style of the action to `»destructive» to make the text red or «cancel»« to bold.
Add a callback to execute some code when a given action is selected
Shows the ActionSheet. It’s animated by default.
animated — bool to control whether the AlertView is animated in or appears instantly
Hides the AlertView. It’s animated by default.
animated — bool to control whether the AlertView is animated out or disappears instantly
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
Create a NavigationBar with large title, search field and buttons on each side
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.present()
Displays a notification.
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.
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
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.
Create a small, green, momentary switch control.
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.
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.
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.
Add a new segment called “Zero” to the first position in the control.
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.
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”.
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.
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).
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
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
Create a status bar that has a link back to Instagram
Create a dark, translucent status bar that is using LTE
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.
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
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
The iOSTextLayer extends Framer’s TextLayer by adding a textStyle property.
textStyle – adjusts the fontSize and fontWeight, defaults to iOSTextStyle.body
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
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.
Create a video player presented in fullscreen:
Create a video player embedded in the UI:
About
Components that make it easy for designers to quickly prototype native-feeling iOS 11 interactions in Framer
Источник
