TEMPLATES

iOS 11 iPhone GUI

Origami, Sketch, Framer, and Photoshop templates of GUI elements found in the public release of iOS 11.

Download

iOS 11 iPhone GUI from Facebook Design

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.



UPDATED FEBRUARY 27, 2018

DISCLAIMER


VERSION 1.1

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.



Facebook Design 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.

Facebook Design is a global resource for all things design, with specialized focus on Facebook apps and technologies. We believe everyone is a designer, in some shape or form.

FacebookInstagramTwitterDribbleMedium

© 2020 Facebook