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.

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 — while some aspects aren’t 100%, they are built to easily assemble screens and flows.

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. Shoot us a message at designresources@fb.com.