Figma iOS kit · A design system with mobile templates and new components

Update 1.3 · New UI sections and mobile application layouts have been added to the design system

New components ahead

Hey there, I am working hard on this digital product, and I aimed myself to create an ultimate design kit for iOS where every possible UI component is considered. You now can simply start your next project within this significant library of iOS widgets and layouts to save the development time by up to 40%. Made exclusively for Figma in terms of perfect and adjustable components-driven workflow.

Figma iOS 12 design kit

Filtering section

Components for Filtering purposes is a must-have library for every application where’s any kind of data is shown. Typically, data filtering will involve taking out information that is ineffective to a user or content that can be confusing. Generated statements and query results from any apps often result in large and complex data sets. Redundant or impartial pieces of data can confuse or disorient a user. Filtering data can also make results more efficient.

Sliders, Chips, Selection cards, Option lists, Counters. This is your base preset of components for designing functional and usable filtering app screens

Bottom sheets variants

Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen. It slides up from bottom of the screen to reveal more content. There are supplementary surfaces primarily used on mobile. Standard bottom sheets display content that complements the screen’s primary content. They remain visible while users interact with the primary content. Modal bottom sheets are an alternative to inline menus or simple dialogs on mobile, providing room for additional items, longer descriptions, and iconography. They must be dismissed in order to interact with the underlying content.

Not only native sheets variant available to use. Social components, sliders and amount adjusters included as well in the package

First series of mobile templates

Needless to say, every of it is perfectly shaped, constrained and responsive, and matches to Human Interface Guidelines. Four kinds of native styles now available. The difference is in headings, backgrounds, button styles, and elevation. You can pick any of provided or mix and combine into most convenient for your purposes. Don’t forget you can always detach the component and perform some customization if you wish.

Authentication layouts

Significant pattern to have in your mobile app. Combinations of screens with a variety of inputs styles, social buttons and even background images to engage your user. Make sure there are some additional functions available: password reminder and access to proceed onto Sign Up screen immediately if a user decides to create an account.

Applying a background image for a screen increases the user’s engagement and catches the attention. Guaranteed!

Cards-driven templates

Cards are nearly everywhere in apps! It contains content and actions about a single subject. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy. Regardless to the theme, every card component could be scaled to any size. No doubts — the usage of Emojis in design practice is a new trend! So, follow on it :)

In the version 1.3 there are few common cards patterns available: for Statistics, Ecommerce, Social purposes, Category selection and Engagement cards

Comments & Reviews

In UI design comments are the patterns more related to Social Interactions. Every commenting component is equipped with a flexible Userpic element. It’s nested with a variety of male / female faces, online status indicator, and numeric circular badge to display the number of incoming events. Each item could be scaled in both of axes to expand and add more placeholder text when necessary.

You can preview the whole components bundle here

Are you ready to try this out?

Start prototyping not editing pixels

Figma iOS kit is aimed to let you jump over preparation of components and proceed to the prototyping immediately

Happy customers are speaking

This product will make developers, product managers, and designers very happy while saving a lot of time:

The end!

I am constantly updating this product with new components and templates. Follow me not to miss a lot of useful pixels for your project or UI inspiration.

Happy prototyping!

Cheers, Roman

Dribbble, Behance, YouTube, Uplabs, Twitter, Reddit, Telegram, Instagram