• Sketch
  • Figma
  • Illustrator
  • Photoshop
  • Print
  • HTML
  • Sass

Mobile Design System

Design awesome mobile apps with our starter kit for Sketch and Figma.

Download

Our mobile design system for Sketch and Figma includes over 250 responsive symbols, charts and an extensive style guide. It’s the perfect tool to create apps for iOS, the iPhone X and Android. Components are responsive and they all share the same goal: to evoke simplicity. This leaves your interface with more power and makes it the perfect starter kit for any mobile-based project built in Sketch or Figma.

  • 200+ responsive symbols: Distorted symbols is a thing of the past, they all adapt when resized.
  • Any platform: Design apps for the web, iOS, the iPhone X or Android.
  • Style guide: A guide covering all UI elements to keep you and your team up to date.
  • Flexible charts: Includes a collection of bar charts, line charts, pie charts and gauges.
  • Nested symbols: They can all be overridden with various content, leaving your interface with more power and control.
  • 8-point grid: Everything is following a consistent grid, this makes the design consistent. It also helps maintain a quality rhythm between your elements. Read more about 8-point grid over here.
  • Icons: This UI kit is using the material icons by Google. Best of all, you can easily download SVGs from their online library.
  • Organized: All layers are grouped and well-named, this is one of our core value!
Mobile Design System - Example Screens

Symbols

All symbols are responsive, organized and follows a simple design language. They can be overridden with various content, leaving your interface with more power and control.

Mobile Design System - Symbols Mobile Design System - Figma

Styles

Mobile Design System includes an extensive typography guide. This makes it a perfect starter kit for any project built in Sketch or Figma.

Mobile Design System - Styles

Any Platform

Components such as status bars, keyboards, top and bottom navigation have been specifically designed to work on iOS, the iPhone X and Android.

Mobile Design System - Devices

Style Guide

Below is an overview of all important styles and elements that defines Mobile Design System.

Colors

The color scheme aims to be simple without too many variations. Displayed in both HEX, RGB and a production variable (VAR).

Mobile Design System - Colors

Typography

We use Lato as primary typeface. The hierarchy is divided in three parts: headings, bold and regular body styles. There’s also a paragraph style with larger font size and line-height.

Mobile Design System - Typography

Icons

The easy to use material icons by Google are excellent for web, Android and iOS projects. Based on the 8-point grid, they are preferably displayed at a multiple of 24px.

Mobile Design System - Icons

Alerts

Use alerts to give users quick feedback on performed tasks.

Mobile Design System - Alerts

Avatars

The avatar is available in three types: icon, initials and profile picture.

Mobile Design System - Avatars

Buttons

Buttons are pre-defined by type: default, icon left, icon right and icon only.

Mobile Design System - Button Types

There are three button states: primary, secondary and disabled.

Mobile Design System - Button States

Each button type is also available in three sizes: large, medium and small.

Mobile Design System - Button Sizes

Tags

Add a tag to give context to your content.

Mobile Design System - Tags

Forms

Just as with buttons there are three sizes per type of input field: large, medium and small.

Mobile Design System - Input Types

You can resize and add labels or a description below input fields for instructions.

Mobile Design System - Input Area

You can easily customize input fields to create various states.

Mobile Design System - Input States

There are also checkboxes, radios and toggles for true / false.

Mobile Design System - Input Checkboxes

Dropdowns

There are two types of dropdowns in three sizes: buttons and links.

Mobile Design System - Dropdowns

Pagination

Use pagination for content that are listed accross multiple pages.

Mobile Design System - Pagination

Cards

A card is composed of a header and a container. Headers may include a title, tabs, buttons or dropdowns for additional actions.

Mobile Design System - Cards

Progress Bars

Progress bars are used to monitor progress towards a specific target.

Mobile Design System - Progress Bars

Gauges

Similar to progress bars, a gauge indicate where your data falls over a particular range.

Mobile Design System - Gauges

Charts

Use a bar chart or line charts to visualize data.

Mobile Design System - Charts

Sliders

In some occasions, a slider works better than a regular input.

Mobile Design System - Sliders

Tables

Built with headers and rows, a table is useful to display many items or content with measurable data.

Mobile Design System - Tables

Tabs

Using tabs is a great way to toggle between content.

Mobile Design System - Tabs

Notifications

Use a notification to give users feedback.

Mobile Design System - Notification

Popovers

A popover is a pop-up box that appears when the user clicks on an element.

Mobile Design System - Popovers

Tooltips

Show additional information on top of an element.

Mobile Design System - Tooltips

Modals

Use a modal to display content over a current page.

Mobile Design System - Modals

Navigation

Main navigation is divided by top bars and tabs. Tabs can be displayed with icons and labels.

Mobile Design System - Navigation

Navigation with icons and labels:

Mobile Design System - Navigation With Icons & Labels

Navigation with icons only:

Mobile Design System - Navigation With Icons

Navigation with labels only:

Mobile Design System - Navigation With Labels

Lists

Display lists with or without an icon.

Mobile Design System - Lists

Section headers turns into sticky headers when scrolling.

Mobile Design System - List Headers

iOS

Top navigation bars:

Mobile Design System - iOS Navigation Bars

Keyboards:

Mobile Design System - iOS Keyboards

Status bars:

Mobile Design System - iOS Status Bars

iPhone X

Top navigation bars:

Mobile Design System - iPhone X Navigation Bars

Keyboards:

Mobile Design System - iPhone X Keyboards

Status bars:

Mobile Design System - iPhone X Status Bars

Home indicators:

Mobile Design System - iPhone X Home Indicators

Android

Top navigation bars:

Mobile Design System - Android Navigation Bars

Keyboards:

Mobile Design System - Android Keyboards

Status bars:

Mobile Design System - Android Status Bars

Mobile Design System is using Lato as a font. If it’s not already in your collection you can download it for free over here.

All Access $99 / year
  • Download all our assets.
  • 1 year access to new releases.
  • 1 year access to updates.
  • Unlimited downloads.
  • Priority support.
All Access $79 / 6 months
  • Download all our assets.
  • 6 month access to new releases.
  • 6 month access to updates.
  • Unlimited downloads.
This Asset Only $48
Join All Access Join All Access Purchase