TEMPLATES
iOS 11 iPhone GUI
Origami, Sketch, Framer and Photoshop templates of GUI elements found in the public release of iOS 11.
Please read the
.Download
Design better, faster
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.
THIS ARTICLE IS GREAT FOR
PRODUCT DESIGN
CONTRIBUTORS
ANDREW A.
SCOTT H.
JALEH A.
HYACINTHE B.
JOE H.
TREVOR P.
RYAN F.
LOIS Y.
JASON C.
JEANETTE M.
YIH L.
MASON L.
JAY S.
JOSEPH A.
TIMOTHY A.
CHARLIE D.
JEREMY F.
KATHLEEN W.
ARI S.
CHASE B.
CHELSEA W.
PETER Z.
KIAN L.
BOBBY D.
ROBERT C.
ROBERT W.
JEFF S.
GEORGE K.
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.
If something is off with these files, we want to fix it. Send us a message at designresources@fb.com.
MORE TOOLS
Other resources you might be interested in
Design at Meta is for everyone who touches user experience and design.
Whether you’re a product designer, writer, creative strategist, researcher, project manager, team leader or all-around systems-thinker, there’s something here for you.
