Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

medium bookmark / Raindrop.io |
We decided to share goodies for those of you who work with UI design or want to start. My co-founder and iOS & macOS developer, Ahmed Sulaiman, has learned design from scratch. You can do that as well! Prepared UI elements, screens, components or entirely app concepts, packed in a single UI Kit is a great option to begin with.
You can modify any UI Kit to fit your needs and goals. All components and screens are easily editable, like navigation bars, buttons, login forms. You would need to have design tools, like Sketch App to open the kits. The good news, you can use its free trial from the official website.
All 30 UI Kits here are free and made with a focus on iOS platform. We used some of them personally and others were carefully handpicked. To make your design journey easier, we also mentioned great learning resources on the way. Take a look at all these goodies!
Design+Code iOS 11 UI Kit
It’s a comprehensive Sketch kit tailored to Apple’s Human Interface Guidelines (HIG). It contains text styles, resizable nested symbols and even a set of dark theme components. The naming convention of each component follows Apple Developer Documentation. You can easily customize the colours, icons, and content as you wish and everything will be fully adaptive!
Pro Tip: If you need guidance in learning design for iOS 11, look at Design+Code book. It has 44 hours of videos, 100 000 words & images and dozens of examples for Swift 4 app. It will definitely teach you how to work with Sketch and Xcode. Kudos to Meng To!
iOS 11 Screens & Components
A huge collection of iOS 11 core components and over 60 (x2) selected screens. As well as a previous UI Kit, this one is done according to Apple’s HIG and has designs for iPhone X & iPhone 8. Sketch files are made with nested symbols and contain text styles with resizing options specified. Available for Sketch and Figma.
iOS 11 GUI for Sketch App
This kit contains iOS 11 designs, including 22 screens, 10 keyboards, fully vector elements and 100% vector shapes that are fully layered, organized and grouped. Available in Sketch format.
iOS 11 iPhone GUI by Facebook
A comprehensive set of files for Origami, Sketch & Photoshop providing you all needed to get started with iPhone X app. Facebook team also created Origami components that mirror the behaviour of the most important UI elements in iOS 11 as well as recreating elements found in the public release of iOS 11.
Pro Tip: Check Apple’s support documentation on Human Interface Guidelines and Apple UI Design Resources. You will learn a lot about Apple design principles, app architecture, user interaction, visual design and much more!
Bronze UI Kit
It’s a clean and customizable UI Kit with signup, login, user profile, blog screens and templates for articles. You would love its adventure colour scheme, shots and typography. Available in Photoshop format with a free Google fonts. This kit is not purely for iOS platform, but its design is so vibrant!
Mail UI Kit
InVision is releasing a lot of UI kits! Mail is the most recent cross-platform UI Kit for social apps. It’s made for desktop, mobile, tablet, and smartwatch formats. So it will very useful if you want to make a cross-platform app. Available for Sketch & Photoshop in 3 colours.
Snap UI Kit
Fresh and colourful mobile UI Kit for photo sharing app, available in Sketch format. It includes over 50 screens and a lot of beautiful elements, from buttons, search bars, sliders to camera elements and notification bars. This kit can be a huge-time saver if you are planning to implement a photo app. Prepared by Marvel folks.
Pro Tip: Read guides on how to design for iPhone X (without an iPhone X) and Development Tutorial for iPhone X from Ray Wenderlich team. That’s very design-oriented read, but you will feel much more confident when working with iPhone X designs.
Travel App UI Kit
UI Kit with 15+ well-organized mobile screens for login, county view, place information, photos, map and much more. Available in Sketch format.
Navigo UI Kit
It’s a UI Kit for the transportation & travel app with social profiles. It has 60 colourful screens organized in 6 categories: Main App, Onboarding, Activity & Profiles, Stats, Info. Navigto is optimized for iPhone X, made in Adobe XD format and has a fresh & clean design.
Travel Guide App UI Kit
The app concept has been designed for the iPhone X to showcase better use of Location Filter and Travel cards. It’s not typical UI Kit but rather a real app concept, which is available for personal use. It has more than 10 brightly-design screens and animations.
Pro Tip: All these travel UI Kits are so colourful! So let’s talk about colours in UI Design. It would be nice to check how to use them properly in your new app. Prototypr.io guide and Erik D. Kennedy’s guide will be great starters for you.
Travelisto UI Kit
UI Kit for Sketch with over 22 iOS app screens designed in vector format, based on symbols. Available in White and Dark versions.
Harmony UI Kit
Location-oriented mobile app concept to find, share and rate hiking places around you. Harmony includes over 10 iOS ready core screens designed in vector and based on symbols.
Pro Tip: After you read about best practise to use colours, you might need some tools to work with it. These are great colour pickers: AI picker, Pigment picker, picker from popular products on Product Hunt, the latest & most popular colour palettes from Dribbble and macOS picker.
Delicious UI Kit
UI Kit for a food recipes app. It includes 11 pixel-perfect screens in Sketch format. The meals in this UI Kit are so tasty! All UI kits in these category are simple, nice looking and can be used for your first learning app.
iOS Recipes App UI Kit
Nice iOS UI Kit with 11 screens for the recipe or cooking app for Sketch.
1357 Recipe App UI Kit
Modern and elegant UI Kit for recipe app with 25 basic screens. Available in Sketch format.
Pro Tip: You probably know that every meal consists of the basic components, as well as a good design consist of the basic elements. Please read this guide on the design fundamentals: type, spacing, visual hierarchy, colours.
Mochi — Chat UI Kit
Cute UI Kit for mobile chat interface that contains screens for logging in, signing up, scrolling through chat lists, full list of contacts and much more. Available in Sketch format.
iOS WeChat UI Kit
This UI Kit provides many assets, icons, screens, and interactions for Chinese premier messaging app: WeChat, or Weixin. Provided in both English and Chinese, with support for main 4 tabs (Chat, Contacts, Discover, Me), official account pages, Chat, Moments, Profile, QR Code and more. Available for Sketch format.
Pro Tip: You probably have noticed that almost all UI Kits done for Sketch. Indeed, Sketch App is an industry standard for iOS app design. You can learn how to work with it here: Sketch App Crash Course, Sketch own documentation and already mentioned Design+Code book. Also, A Step-by-Step Guide for Starting a New App Design Project in Sketch post is pretty informative.
Messenger Platform Design Kit
Official UI Kit for Facebook Messaging bot, which includes components for both conversational and GUI-based experiences. Available for Sketch.
Pro Tip: Facebook design team also has an enormous website with lots of useful design resources like Desktop Design Kit, practical guides, Sound Kit and tutorials. And folks from UXPin publish many advanced and free e-books, which you can get here.
Minimal Chic Kit
It’s a stylish mobile UI Kit designed for iOS. It’s perfect for anyone looking to create an e-commerce mobile app as it has views for product category pages and product pages, as well as the usual account settings and login screens. Available in Adobe XD format.
Portal freebie
A sample of mobile portal app built for Sketch. It has a focus on big, bold heading typography and is visually stunning when paired with full-screen background images.
Pro Tip: If you need a lot of photos & visuals for your ecommerce app, check these free photo-stock sites: Unsplash, Burst and AllTheFreeStock, which has free photos, mockups, sounds!
Wilhelm iOS UI Kit
It’s a customizable UI Kit, which containing six categories: Walkthrough, Sign in / Sign Up, Menu, Reading, ecommerce, Media player. It has various Sketch screens, which will suit both ecommerce mobile project or social app.
Helen UI Kit
It’s a professionally designed iOS ecommerce UI Kit for Sketch and Photoshop. All elements well organized into 11+ high-quality screens.
Mcommerce UI Kit
It’s an ecommerce app UI Kit with 120+ screens built for Sketch. As makers mentioned, Mercatus was inspired by 1980’s casual culture, European designer clothes and modern minimal aesthetics. The kit looks very stylish and clean.
Pro Tip: If you are working with ecommerce app, you would enjoy UX insights from Baymard Institute. They publish excellent free researches on everything around ecommerce design: navigation, search, product pages, checkouts, mobile ecommerce & more.
iOS 11 Place UI Kit
If you’re planning to make ARKit mobile app, check this funny UI kit done by our good friend Volodymyr Kurbatov. It contains 22 iOS 11 screens and vector icons (sample free version). Place Kit has everything you might need: lists, catalogues, maps, tips and all types of camera views for every stage of AR experience (such as scanning, placing, and interacting). Available in .sketch file for iPhone X.
Pro Tip: Paul Hudson made a nice summary how developers should make better ARKit apps. All Apple’s designing guidelines you can also read here.
Movies App UI Kit
Colourful movies based iOS UI Kit, which include over 30 screens with fully customizable layouts and layers (for Sketch). It designer for iPhone X and available both in English and Chinese.
Holo Music Dark and Light Kits
It’s very colourful and modern UI kit for music app, done in dark and light themes. Free version has screens for a playlist and a player, available in Sketch format.
Wonep Calling App
Pretty cool UI Kit of a complete iOS app for making international calls. Sketch file includes over 30 unique screens and several UX flows: Onboarding, Recent Calls and Contacts, Dialing, Billing, Selecting Favorites. It also has a Principle file with animation to clarify the user experience through the app.
Banking UI Kit
Neat banking themed UI kit for Sketch for with 50 screens, ready to prototype templates, dozens of icons and buttons. It looks very fresh and clean, done by Marvel folks.
Pro Tip: For design inspiration, check Muzli Medium publications, Behance and Dribbble (I love Tubik Studio shots, Lubos Volkov designs and Gal Shir gifs).
Real Estate App UI Kit
Very clean UI Kit with 25 artboards organized in 8 pages and categories: Onboarding, Sign In, Permissions, Home, Discovery, and Posts. Available in Sketch format.
DO UI Kit
Colourful kit for to-do app with over 130 screens, 10 complete themes, and 250+ components to mix. This kit has totally everything: calendar, walk-through, groups, list, timeline, settings, navigation and much more! It’s retina-ready and available for Sketch, Photoshop and Craft. Kudos to InVision team!
Pro Tip: Asthe final tip, please get the taste of design thinking: read classical design books, articles and blogs. Ahmed Sulaiman made a great beginner reading list for you in his Medium guide. As must-read design blogs we will recommend checking Prototypr.io Medium blog, UX Collective, Smashing Magazine, HeyDesigner feed and Nick Kolenda’s Psychology & Marketing blog.
I hope these UI Kits and tips will make your work easier or even inspire you to start learning UX & UI design. You can also get more design freebies at such awesome resources:
– Sketch App Sources
– FreebiesBug
– DB Freebies
– PSD Repo and Sketch Repo
– UI Pixels and Uplabs.
Keep learning and making new things!
P.S.: Maybe you know that we made Flawless App — the tool to match your design with the final iOS app. If you have some time to support us, please give us your honest feedback. The more feedback we get, the more we can improve Flawless App. Thanks 🙂
Special thanks to Valia Havryliuk for helping with this article! 💗
AI-driven updates, curated by humans and hand-edited for the Prototypr community