o

r
o
d
o
m
o
P
r
e
im

t
is
T

The Ultimate Guide to Beautiful Components

Mastering
Mobile UI
Marcin G.
@ui.martin
Table Of Contents

Introduction

About me and this eBook 05

Master the Foundations

Colors 12

Typography 34

Layouts, Grids 46

The Design Basics

Figma Setup 56

Master the Interface

Icons 58

Avatar 68

Tag 77

Button 87

Input 98

Search 100

Checkbox 114

Toggle 124

Navigation bar 131

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 02

 Tab bar 141

Tab 155

Segment control 162

Tooltip 170

Snackbar 177

Progress indicator 191

Progress bar 202

Card 211

Item list 220

Accordion 228

Empty state 240

Form 250

Banner 261

Dialog 269

Popover 277

Bottom sheets 290

Message card 300

Onboarding 312

Design Insights

Good vs Bad Practices 314

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 03

 Introduction

About me and

this eBook
 Introduction - About me and this eBook

Nice to see you here!

I’m Marcin Grygierczyk, also known

as @ui.martin, a UI Designer with a

passion for crafting beautiful,
engaging interfaces. Currently, I’m
creating visuals at DesignMe
alongside @ui.adrian.

My work has helped me connect with a growing community of

over 125,000 designers and enthusiasts on Instagram and
collaborate with clients who value clean, aesthetic design.

Through my content, I aim to inspire and empower others to

elevate their skills and create designs that truly resonate.

This eBook, Mastering Mobile UI: The Ultimate Guide to

Beautiful Components, is the result of my journey and passion
for design.

It’s more than just a guide - it’s a resource for anyone eager to
create better mobile products, whether you’re a UI Designer,
UX Designer, Product Designer, or even a developer with a
love for design.

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 05

 Introduction - About me and this eBook

Inside, you’ll find:

A deep dive into the most essential mobile UI components,
from buttons and forms to navigation and cards.
Practical tips and examples to help you create cleaner,
more visually appealing designs.
Insights into good vs bad UI, ensuring you avoid common
pitfalls and understand what works.
Exercises, templates, and checklists to ma e applying your
k

k no ledge easier.
w

To make this eBook even more valuable, I’ve included a Figma

file with all the components and patterns covered in the
book. You can freely use them in your projects, customize
them to your needs, or study their structure to learn the
principles behind great design.

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 06

 Introduction - About me and this eBook

Why you should read this eBook

Do your designs feel a bit off, no matter how hard you try?
Maybe you’ve learned the basics, but you’re still looking for
that spark to make your projects shine?
Or perhaps you’re just starting out, and this is your first
serious step into design?

Maybe your designs resemble something like this:

16:04

Search

Good Morning
Rise and shine! It's breakfast time

Snacks Meal Vegan Dessert Drinks

Best Seller View All

$103.0 $50.0 $12.99 $8.20

Source: Template Castle, licensed under CC BY 4.0
Experience our
delicious
Mastering Mobile UI: The Ultimatenew Guide
dish to Beautiful Components 07
30% OFF
 Introduction - About me and this eBook

Does this look familiar?

It’s like you’re missing that one crucial piece - the details. The
precise sizes, spacing, and balance that make a design go
from ‘meh’ to ‘wow.’

You know something’s off, but you’re not sure what. And that’s
exactly where this eBook comes in.

Now imagine your designs looking like this:

9:41

Good morning
Start your day with a delicious breakfast!

Search meal...

Category
All meals Pizza Meal Vegetarian

Bestsellers View all

4.5 (36+)

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 08

Berry Bliss on a Crispy Waffle Delicate Crab on a Bed of Veget
 Introduction - About me and this eBook

Better, isn’t it? Simple tweaks—refined colors, adjusted sizes,

and optimized spacing—made all the difference.

These small but powerful changes turned the interface into

something clean, engaging, and a joy to use.

This eBook is your guide to making that leap. It doesn’t just

teach you about UI components—it shows you how to master
them. Learn to perfect sizes, refine spacing, and craft
interfaces that truly stand out.

Who is this eBook for

For Beginners: Instead of scattered advice, this eBook
compiles everything you need into one comprehensive
resource. It gives you the confidence to build mobile
components that look and work great.
For Experienced Designers: Dive deeper into
advanced practices, explore component variations,
and fine-tune your skills to create UI that stand out.
For Developers: Build stunning user interfaces without
needing a designer by your side.

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 09

 Introduction - About me and this eBook

What Makes This eBook Different?

Unlike most resources that skim the surface, this eBook is
designed to give you real-world advice for creating beautiful,
functional UI components.

What you will not find in this eBook:

Generic advice that sounds good but is hard to apply in
real-world projects.
Tips that look amazing but fail in practical app design.
Endless walls of text without examples to back them up.

What you will find in this eBook:

Actionable insights you can apply immediately to improve
your day-to-day work.
Good vs. bad design comparisons to help you understand
what makes a design exceptional.
Hundreds of real-world examples to bring the concepts to
life and make them easy to grasp.

Let s di e in et hands-on and start buildin com onents

’ v , g , g p

that truly shine !

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 10

 Master the Foundations

Typography
 Master the Foundations - Typography

Typography
Typography is one of the most important pillars of design - it
shapes how users read, interact with, and understand your
content. In mobile interfaces, where space is limited and
readability is key, getting typography right is essential.

The right typography doesn’t just make your design look

polished—it creates hierarchy, enhances usability, and guides
users effortlessly through your interface.

Why Typography Matters:

Clarity: Well-chosen typography ensures that users
can quickly and easily read your content, even on
smaller screens.
Hierarchy: Typography helps establish a clear structure
by distinguishing headings, subheadings, and body
text, guiding users through the content in the intended
order.
Brand Identity: Fonts play a big role in reflecting the
personality of your product. Modern typefaces can
convey innovation, while serif fonts might evoke trust.

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 34

 Master the Foundations - Typography

Font Sizes for Mobile

Mobile design requires careful attention to font sizing to
ensure readability without overcrowding the screen. Here’s my
list of recommended sizes

Headlines: 20-32pt These draw attention to key

sections and should stand out
without overwhelming the layout.

Subheadings: 16-18pt Perfect for supporting text under

headlines or for dividing content
into sections.

Body Text: 14-16pt Your go-to size for general content,

ensuring it’s legible without
straining the user’s eyes.

Labels: 12-14pt Ideal for secondary text, such as

form field labels or captions, where
subtlety is required.

Menu labels: 10pt* Typically used for navigation or

toolbar menus. While 10px is
standard, I recommend 12px for
improved readability and balance
with icons, ensuring a better overall
user experience.

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 35

 Master the Foundations - Typography

Line Height
This is the space between lines of text, plays a crucial role in
ensuring a comfortable reading experience. The right value
allows users to easily follow the flow of longer paragraphs
while maintaining visual balance in the design.

Line Heigh t

in Mo ile esign
b D
32pt

Adapt to Font Size

Line height should be proportional to the font size:
Headings (H1–H6): Use proportions of 1.2x–1.4x the font size
to maintain a compact yet balanced appearance. Avoid
excessive spacing, as it can disrupt the text's hierarchy.
Body Text: Apply proportions of 1.4x–1.6x to enhance
readability for longer paragraphs, especially on small
screens.
Captions and Small Elements: For supplementary text like
labels or descriptions, proportions of 1.3x–1.4x are typically
sufficient.

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 36

 Master the Foundations - Typography

iOS Guidelines
iOS Human Interface Guidelines recommend line heights
scaled to ensure optimal readability on mobile devices.
Typically, the line height is about 1.3x the font size, creating
balanced spacing that enhances clarity and usability on
small screens. For example:
Body Text (17pt): line height 22pt.
Su head (1 pt): line height 20pt.
b 5

Caption 1 (12pt): lineheight 16dp.

Material Design Recommendations

While percentages offer flexibility, they are harder to control in
relation to font size. That’s why Material Design uses dp values
and a 4pt system for line-height, ensuring consistent spacing,
readability, and alignment across different screen densities.
For example:
Body #1 (16dp): line height 24dp.
Body #2 (14dp): line height 20dp.
Caption (12dp): lineheight 16dp.

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 37

 Master the Foundations - Typography

My approach
In mobile design, I rely on a 4pt system, ensuring compatibility
with the 8pt grid commonly used in responsive layouts (i.e. I
use the Material Design system). For example:

Headline: 32pt line height 40pt.

Headline: 20pt line height 28pt.

Body Text: 16pt line height 24pt.

Labels: 12pt line height 16pt.

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 38

 Master the Foundations - Typography

Letter spacing
This is the spacing between characters, plays a crucial role in
mobile typography. On small screens, where readability is
often compromised, fine-tuning letter-spacing can prevent
text from appearing cramped or overly stretched.

Letter spacing

Consider Font Size and Context

Small Fonts (10pt - 14pt): Slightly increase letter-spacing to
avoid characters blending together, especially on low-
resolution screens. (+0.5% to +1%).
Medium Fonts (16pt - 20pt): Default letter-spacing usually
works well for most fonts. (0%).
Large Headings (24pt and above): Reduce letter-spacing
slightly to maintain visual compactness. (-0.5% to -2%).

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 23

 Master the Foundations - Typography

Tailor to Typeface Characteristics

Different typefaces require different letter-spacing tweaks:
Sans-serif (e.g., Roboto, Helvetica): Typically benefit from
slight increases, especially in smaller sizes.
Serif (e.g., Georgia, Times New Roman): Often require little
to no adjustment due to their natural balance.

Material Design Recommendations

Material Design suggests letter-spacing values in em units for
better scalability:
Body #1 (16dp): letter spacing 0.005em (0.5%).
Body #2 (14dp): letter spacing 0.01em (1%).
Caption (12dp): letter spacing 0.02em (2%).

iOS Guidelines
Apple encourages adjusting letter-spacing dynamically
based on font size and content. Suggested adjustments:
For small text: Increase spacing slightly.
For large headings: Decrease spacing to maintain
cohesiveness.

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 40

 Master the Foundations - Typography

My approach
In letter spacing, I prefer controlling value using percentages
in line with Figma's system. This approach allows for
consistency and scalability, ensuring that the spacing adapts
seamlessly to different font sizes. For example:

Font 24pt,
Subtle reduction for large
letter spacing -2% headings to maintain
compactness and balance.

Font 16pt,
Default spacing for most body
letter spacing 0% text.

Font 12pt,
Slight increase for smaller text
letter spacing 1% to enhance clarity.

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 41

 Master the Foundations - Typography

Guide of Line Height & Letter Spacing

Headline 32pt
Line height: 40pt Letter spacing: -2% Font weight: Medium

Headline 28pt
Line height: 36pt Letter spacing: -2% Font weight: Medium

Headline 24pt
Line height: 32pt Letter spacing: -2% Font weight: Medium

Headline 20pt
Line height: 28pt Letter spacing: -1% Font weight: Medium

Headline 18pt
Line height: 26pt Letter spacing: -1% Font weight: Medium

Headline 16pt
Line height: 24pt Letter spacing: -1% Font weight: Medium

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 42

 Master the Foundations - Typography

Headline 14pt
Line height: 20pt Letter spacing: -1% Font weight: Medium

Headline 12pt
Line height: 16pt Letter spacing: 0% Font weight: Medium

Headline 10pt
Line height: 14pt Letter spacing: 0% Font weight: Medium

Body 16pt
Line height: 24pt Letter spacing: 0-0.5% Font weight: Regular

Body 14pt
Line height: 20pt Letter spacing: 0-0.5% Font weight: Regular

Body 12pt
Line height: 16pt Letter spacing: 1% Font weight: Regular

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 43

 Master the Foundations - Typography

Font Size System Example

9:41

24pt Reports
Aug 20 - Aug 26 Filters 12pt
20pt Tracked hours
12pt Total hours Billable Amount
10:56:22 6:44:01 $148.32 18pt

16pt
Invite others and start tracking time
together as a team.
Invite 12pt

20pt Comparison Billable Non billable 12pt

12h

8h
Sticking to these ranges ensures optimal readability and
visual hierarchy, regardless of the app’s purpose or context.
6h

2h

0h
Mon Tue Wed Thu Fri Sat
08/20/24 08/21/24 08/22/24 08/23/24 08/24/24 08/25/24

Hours by
Mastering Mobile UI: The Ultimate Guide to Beautiful Components 44
Projects Clients
 Master the Foundations

Grid & layout

 Master the Foundations - Grid & layout

Grid & layout

When it comes to creating clean, consistent, and visually
appealing designs, a well-structured grid system is a non-
negotiable foundation.

Grids help align elements, define spacing, and maintain

harmony across your interface.

For mobile design, where space is limited and every pixel

counts, having a flexible approach to grids and layouts is
even more crucial.

9:41 9:41

Timer Timer
List Pomodoro List Pomodoro

Today 3:16:21 Today 3:16:21

2 Create Wireframes for Mo 2 Create Wireframes for Mo

Design low-fidelity wireframes for the Design low-fidelity wireframes for the

UX Design 0:30:45 UX Design 0:30:45

1 Design UI for Dashboard U 1 Design UI for Dashboard U

Create a high-fidelity user interface fo Create a high-fidelity user interface fo

UI Design 2:45:15 UI Design 2:45:15

Yesterday 1.18:17 Yesterday 1.18:17

1 Prototype Sign-up Flow in 1 Prototype Sign-up Flow in

Create an interactive prototype of th Create an interactive prototype of th

UX Design 0:37:25 UX Design 0:37:25

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 46

3 Set Up e-commerce Site w 3 Set Up e-commerce Site w
Use Webflow to build a functional e-c Use Webflow to build a functional e-c
 Master the Foundations - Grid & layout

Anatomy of a Grid
A grid is the foundation of any well-structured layout,
providing alignment, consistency, and balance. It organizes
content into a predictable structure, ensuring a clean design.
Columns
Purpose: They define where content is placed, ensuring
alignment and balance.
Configurations: In mobile design, grids typically use 2, 3, 4,
or 6 columns, depending on layout complexity.
Width: Columns are flexible, adapting to the screen size.

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 47

 Master the Foundations - Grid & layout

Gutters
Gutters are the spaces between columns, preventing content
from feeling cramped and maintaining readability.
Purpose: They create separation between elements,
ensuring clarity and focus.
Size: Gutters typically range from 8px - 16px, depending on
the density of the layout.

8-16px

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 48

 Master the Foundations - Grid & layout

Margins
Margins are the spaces between the grid and the edges of
the screen. They act as a buffer zone to keep content safely
within the layout.
Purpose: Protects content from being cut off or feeling too
close to the edges.
Standard Margins: 16px is a common starting point,
providing enough padding for comfort and accessibility.

16px

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 49

 Master the Foundations - Grid & layout

Soft vs Hard grid

The choice between a soft grid and a hard grid is a critical
decision in the design process. Both approaches serve unique
purposes and cater to different design scenarios.

Understanding the nuances of each can help you create

layouts that are both functional and visually appealing.

Soft Grid Hard Grid

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 50

 Master the Foundations - Grid & layout

Soft Grid
A soft grid takes a more flexible approach. While it loosely
follows the principles of spacing increments (e.g., 8pt), it
doesn’t require every element to snap rigidly to the grid.
Instead, it allows slight deviations to accommodate design
needs.
Elements can deviate from strict increments as long as they
maintain overall balance.
Spacing may be visually aligned rather than
mathematically precise.

Hard Grid
A hard grid is a structured, rule-based system where every
design element aligns strictly to the grid framework. This
approach is ideal for ensuring consistency and organization
across all aspects of the interface.
Dimensions and spacing follow exact increments (e.g., 8pt,
16pt, 24pt).
All elements snap precisely to the gridlines, creating a highly
uniform layout.
This system minimizes guesswork and simplifies alignment
across the interface.

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 51

 Master the Foundations - Grid & layout

Why I Prefer a 4pt Grid System

While the 8-point grid is a popular choice among designers, I
prefer the 4-point grid system because this system is much
more versatile, especially for mobile design. Here’s why:
Precision and Flexibility: The 4pt grid allows for finer
adjustments, which is particularly useful when working on
smaller components or intricate details in a compact
mobile canvas.
Consistency: It ensures that all spacing, margins, and
dimensions are multiples of 4, creating a unified design
language throughout the interface.
Scalability: A 4pt grid adapts easily to different device sizes,
ensuring designs remain cohesive whether you’re working
with iOS or Android frames.

4px 8px 12px 16px 20px 24px 28px 32px

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 52

 Master the Foundations - Grid & layout

Basing Spacing on Context

One key to effective design is adjusting spacing to fit the
context and layout. I tailor my side paddings and grid setups
based on the type of layout I’m working with:

Single Grid Layout:

Side Padding: 16px
Content aligns closer to the edges but maintains enough
breathing room for usability. This approach is ideal for
layouts that focus on simplicity and minimalism, where
emphasis is placed on the key content.

16px 16px

9:41

Timer
List Pomodoro

Today 3:16:21

2 Create Wireframes for Mo

Design low-fidelity wireframes for the

UX Design 0:30:45

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 53

1 Design UI for Dashboard U
Create a high-fidelity user interface fo
 Master the Foundations - Grid & layout

Dual Grid Layout:

Side Padding: 6-12px for elements closer to the edges, 16px
for content further inset
This setup is perfect for building visual hierarchy, where
certain elements (e.g., banners or cards) are deliberately
closer to the edges, while larger blocks of content are inset.
This approach allows for more spacious layouts while
accommodating complex content.

6px 16px

9:41

Timer
List Pomodoro

Today 3:16:21

2 Create Wireframes for Mobil

Design low-fidelity wireframes for the ne

UX Design 0:30:45

By combining these setups, I can create layouts that feel both

structured and dy1nami Design ad
UI forjusting
Dashboardthe
c,a high-fidelity
Create user interface for th density of elements to
Usin

match the contentUI'Design

s comple2:45:15 xity.

Mastering Mobile UI:Yesterday

The Ultimate Guide to Beautiful Components
1.18:17
54
 The Design Basics

Figma Setup
 The Design Basics - Figma Setup

When starting a mobile design project in Figma, one of the

first and most important steps is setting up your canvas.

Proper setup ensures that your design process is smooth, your

components are consistent, and your layouts are optimized
for mobile devices.

Here’s how to get started.

Choosing the Right Frame Size

Mobile screens come in various sizes, but it’s a best practice
to design for the smallest and most common devices first. This
ensures that your designs scale well across all screen sizes
and remain functional for the majority of users.

Recommended Frame Sizes:

iOS: Start with 375x812 (e.g., iPhone 13 Mini).
Android: Use 360x800, which represents the smallest
commonly used Android devices.

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 56

 The Design Basics - Figma Setup

iPhone 13 mini - 375x812 Android Large - 360x800

Starting with these smaller frames helps you design within

constraints, ensuring that your components fit comfortably
and are functional even on compact screens.

Once your design works well on these devices, it’s much easier
to scale up for larger phones or tablets.

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 57

 The Design Basics - Figma Setup

Setting Up a Grid in Figma

To create a complete grid setup in Figma tailored for mobile
design, follow these specifications:
Grid Type: Columns
Columns: 4
Column Width: Auto (adjusts based on screen size)
Gutters: 12px
Margins: 16px on both sides
Base Unit: 8px (applies to rows and vertical spacing)
Safe Area: Ensure content is within a central frame, leaving
room for notches or system UI elements.

iPhone 13 mini - 375x812

16px
12px

4 col

Mastering Mobile UI: The Ultimate Guide to Beautiful Components 58