Figma Mobile App Tutorial Design a Simple To Do App

A to do app is the perfect first project because it teaches real UI patterns without too much complexity. You’ll design lists, buttons, states, and a basic flow that can become a portfolio piece. This Figma mobile app tutorial is project-based, you’ll build five screens, create reusable components, and end with a clickable prototype you can share.

You don’t need to be “good at UI” to start. You just need a clean structure and a few rules for spacing, typography, and components. Let’s build it.

Project Overview and Screens for Figma Mobile App

Here’s what you’ll design in this Figma mobile app tutorial:

5-screen simple to do app

Welcome / onboarding (optional, simple)
Home list (tasks)
Add task (modal or full screen)
Task details (edit + notes)
Settings (basic preferences)

If you want an even simpler project, you can skip the welcome screen and still have a strong flow.

Figma Mobile App Tutorial for Setup

Start clean. Your setup affects everything.

1. Create your frame and grid

Use a mobile frame around 390 × 844 (modern baseline)
Set a layout grid:
- Columns: 4
- Margin: 24
- Gutter: 16

This makes alignment easier and keeps spacing consistent throughout the Figma mobile app.

2. Pick a spacing scale

Use a simple spacing system:
4 / 8 / 12 / 16 / 24 / 32 / 48

Try not to “eyeball” spacing. Repeat these values. Consistency is what makes beginner UI look professional.

3. Set typography styles

Create basic text styles:

Title: 24-28
Section header: 16-18 (semi-bold)
Body: 14-16
Caption: 12-13

Don’t overcomplicate fonts. One clean sans is enough for this Figma mobile app project.

Figma Mobile App Tutorial for UI Foundation (Colors and Components)

A to do app should feel calm and readable.

1. Choose a simple color system

Use:

Background
Surface (cards)
Text (primary + secondary)
Accent (for buttons and highlights)
Success (completed state) optional

Keep the palette minimal so your Figma mobile app results look modern.

2. Create components you will reuse

Before designing screens, make 4 components:

Primary button
Task row item
Checkbox / complete toggle
Top bar (title + optional actions)

Building components early is a huge win for beginners. It keeps your UI consistent and faster to edit.

Figma Mobile App Tutorial for Welcome or Quick Intro Screen

This screen is optional, but it’s useful if you want a friendly start.

Layout

App name at top
One short line describing value
A simple illustration or icon (optional)
Primary CTA: “Get started”
Secondary: “Sign in” (optional)

Keep it simple. In this Figma mobile app tutorial, the goal is a clean first impression, not a full onboarding story.

Also Read: Figma Web Design Guide: Responsive Layouts Made Easy

Figma Mobile App Tutorial Screen for Home Task List

This is the main screen users will live in.

1. Structure

Top bar:

“Today” or “My Tasks”
Small action icon (search or filter)

Content:

“Due today” section
“Later” section (optional)
Floating action button or bottom button for “Add task”

2. Build the task row component (important)

Your task row should include:

checkbox
task title
optional due time or tag
optional small icon for priority

Use Auto Layout:

horizontal container
spacing 12-16
align center

Create states:

Default (unchecked)
Completed (checked + muted text)
Overdue (accent warning color or label)

This is where the Figma mobile app tutorial becomes a real UI exercise. Designing states.

Figma Mobile App Tutorial Screen for Add Task Flow

You can do this as a modal sheet or a full page. Beginners often find full page easier.

1. Fields to include

Task name (required)
Date (optional)
Time (optional)
Priority (Low/Medium/High) optional
Notes (optional)

2. Layout tips

Use clear labels
Use plenty of spacing
Keep the primary button at the bottom: “Add task”

If you build this with Auto Layout, it’s easier to adjust for different phone sizes. That’s a key skill in any Figma mobile app tutorial.

Figma Mobile App Tutorial Screen for Task Details and Edit

This screen makes your app feel complete.

1. Include

Task title
Status (complete toggle)
Due date/time
Notes area
“Edit” action or inline edit fields

2. Make editing simple

You don’t need a complex edit mode. A beginner-friendly approach:

Tap the title to edit
Notes area is editable
Save button at the bottom

The goal of this Figma mobile app tutorial screen is to show an interaction path, not to design every edge case.

Figma Mobile App Tutorial Screen for Settings (Basic but Realistic)

Settings helps your project feel like a real app.

Simple settings list

Dark mode toggle (visual only)
Notifications toggle
Week starts on Monday toggle (optional)
About / Version row

Use a reusable settings row component:

label on left
toggle or chevron on right
16px padding
light divider lines

This screen is also a good place to show clean list layout skills from the Figma mobile app tutorial.

Also Read: Figma Prototyping for UX: A Practical Walkthrough

Auto Layout Tips that Make it Look Pro

Auto Layout is the difference between “pretty mockups” and “usable UI files.”

1. Use Auto Layout for:

task row
lists
buttons
cards
settings rows

2. Common Auto Layout settings

Container padding: 16-24
Item spacing: 8-16
Fill container for text blocks
Hug contents for icons

Once you get this right, editing becomes easier and your Figma mobile app file becomes portfolio-ready.

Figma Mobile App Tutorial for Build a Clickable Prototype

Now connect the screens.

Simple prototype connections

Welcome → Home (Get started button)
Home → Add task (FAB or button)
Add task → Home (Add task button)
Home → Task details (tap a task row)
Task details → Home (back)
Home → Settings (top bar icon)

Add basic transitions:

Smart animate (if your components match)
Slide in for new screens
Dissolve for overlays

Even a simple prototype makes your Figma mobile app project feel real.

Quality Checklist Before You Publish

Use this quick checklist to polish.

1. UI polish checklist

Consistent spacing (use your scale)
All text styles reused (no random font sizes)
Buttons have consistent height (44-48)
Tap targets are big enough
Task states are clear
Contrast is readable on mobile

2. “Feels premium” checklist

More whitespace than you think
Fewer colors than you think
Clear hierarchy on every screen
One strong accent color only

These checks upgrade your Figma mobile app project fast.

How to Turn this Into a Portfolio Case Study

If you want to show this work publicly, add a short story:

Problem: people forget tasks and need a calm list
Goal: fast add, clear priorities, easy completion
Decisions: simple layout, clear states, minimal palette
Screens: show the five screens and prototype flow
What you learned: Auto Layout, states, hierarchy

A simple write-up helps your Figma mobile app project look more professional than “just a UI.”

Also Read: Website Design Tutorial for Better Navigation and UX

Conclusion

This Figma mobile app tutorial walked you through a complete beginner project. A simple to do app with five screens, reusable components, Auto Layout, and a clickable prototype. Once you build this once, you can reuse the same structure for habit trackers, shopping lists, or simple planner apps.

For high-quality fonts to boost your income, check out DM Letter Studio. Our professional fonts are perfect for branding, marketing, and content creation. So, don’t miss this opportunity.