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!
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 includes an extensive typography guide. This makes it a perfect starter kit for any project built in Sketch or Figma.
Components such as status bars, keyboards, top and bottom navigation have been specifically designed to work on iOS, the iPhone X and Android.
Below is an overview of all important styles and elements that defines Mobile Design System.
The color scheme aims to be simple without too many variations. Displayed in both HEX, RGB and a production variable (VAR).
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.
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.
Use alerts to give users quick feedback on performed tasks.
The avatar is available in three types: icon, initials and profile picture.
Buttons are pre-defined by type: default, icon left, icon right and icon only.
There are three button states: primary, secondary and disabled.
Each button type is also available in three sizes: large, medium and small.
Add a tag to give context to your content.
Just as with buttons there are three sizes per type of input field: large, medium and small.
You can resize and add labels or a description below input fields for instructions.
You can easily customize input fields to create various states.
There are also checkboxes, radios and toggles for true / false.
There are two types of dropdowns in three sizes: buttons and links.
Use pagination for content that are listed accross multiple pages.
A card is composed of a header and a container. Headers may include a title, tabs, buttons or dropdowns for additional actions.
Progress bars are used to monitor progress towards a specific target.
Similar to progress bars, a gauge indicate where your data falls over a particular range.
Use a bar chart or line charts to visualize data.
In some occasions, a slider works better than a regular input.
Built with headers and rows, a table is useful to display many items or content with measurable data.
Using tabs is a great way to toggle between content.
Use a notification to give users feedback.
A popover is a pop-up box that appears when the user clicks on an element.
Show additional information on top of an element.
Use a modal to display content over a current page.
Main navigation is divided by top bars and tabs. Tabs can be displayed with icons and labels.
Navigation with icons and labels:
Navigation with icons only:
Navigation with labels only:
Display lists with or without an icon.
Section headers turns into sticky headers when scrolling.
Top navigation bars:
Top navigation bars:
Top navigation 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.