Design a Mobile App Screen in Figma

Design a polished mobile task manager screen with components in Figma.

Introduction

30 Second Summary

Every app you use daily was designed by someone who arranged buttons, text, and colors into a layout that feels intuitive. That arrangement is UI design, and the tool professionals use to do it is Figma.

In this project, you will design a mobile Task Manager app screen from scratch in Figma. You'll build reusable components, apply consistent spacing and typography, and create a clickable prototype that simulates real app behavior.

What You'll Build

A polished mobile app screen featuring a header, search bar, filter chips, and task cards with multiple completion states.

By the end of this project, you'll have:

A complete mobile screen design built on a structured grid with consistent spacing.
A reusable component library with text styles, color styles, and component variants.
A clickable prototype that demonstrates screen transitions with real interaction patterns.
Secret Mission: Design a second "Add Task" modal screen and link it to your main screen with a smooth prototype transition.

Are there any prerequisites?

No prior design experience is needed. Figma is free to use on the Starter plan and runs entirely in your browser, so all you need is a computer and an internet connection.

Before We Start

Before We Start...

Set Up Figma and Your Workspace

Every polished design starts with structure, not decoration. Before you draw a single element, you need a workspace that enforces consistent spacing and reusable styles.

In this step, you will create a Figma account, set up a mobile frame with a spacing grid, and define the text and color styles you will reuse throughout the project.

In this step, get ready to:

Set up a Figma account and create a new design file.
Create an iPhone 14 frame with a layout grid.
Define reusable text and color styles.

Create a Figma account

Figma is a browser-based design tool, so there is nothing to install. You just need an account on the free Starter plan.

Open your browser and go to figma.com.
Click the sign-up button and create a free account using your email or Google login.
When prompted to choose a plan, select the free Starter plan.
Complete the onboarding prompts. You can skip any optional steps.

Why the Starter plan?

The Starter plan gives you unlimited drafts and access to all the design features you need for this project. No credit card required.

Once you are signed in, create a new design file by typing figma.new in your browser's address bar and pressing Enter.

A blank canvas opens in the Figma Design editor. You will see a toolbar at the top, a left sidebar for layers, and a right sidebar for properties.

Using the desktop app instead?

Figma also offers a desktop app for Windows (requires Windows 10 or later, 64-bit). You can download it from figma.com/downloads. Everything in this project works the same way in the desktop app.

Can't sign up or page won't load?

Figma requires Chrome 99+, Firefox 101+, Safari 16+, or Microsoft Edge 121+. Make sure your browser is up to date.

If you see a blank screen, try disabling browser extensions or switching to Chrome.

Help me troubleshoot Figma not loading in my browser.

Set up your frame and grid

A frame in Figma is like an artboard. It defines the screen size you are designing for. A layout grid overlays the frame with columns that keep your spacing consistent.

Press F on your keyboard to activate the Frame tool.
In the right sidebar, look for the phone presets section.
Select iPhone 14 from the list. Figma places a 390x844px frame on your canvas.

What is a frame?

Frames are containers with fixed dimensions. They act as screen boundaries for your design. Unlike shapes, frames can hold child layers, support layout grids, and respond to constraints.

Now add a column grid to enforce consistent spacing across your design.

Make sure the iPhone 14 frame is selected on the canvas.
In the right sidebar, find the Layout guide section (you may see it labeled Layout grid in some versions).
Click the + icon next to it to add a layout guide.
A default grid appears. Click the grid icon to open its settings.
Change the type from Grid to Columns.
Set Count to 4.
Set Type to Stretch.
Set Margin to 16.
Set Gutter to 16.

You should now see four pink/red columns overlaying your frame with even spacing between them.

Why 4 columns with 16px margins?

Four columns is a common mobile grid that gives you enough flexibility for single, two-column, and full-width layouts. The 16px margin matches the standard padding most mobile apps use at screen edges.

Don't see the grid overlay?

Make sure the frame itself is selected (click its name in the left sidebar layers panel). Layout guides only appear on selected frames.

If the grid is there but invisible, check that the eye icon next to the layout guide in the right sidebar is not toggled off.

Help me see my layout grid in Figma.

Create your design tokens

Design tokens are reusable text and color styles that keep your design consistent. Instead of remembering exact font sizes and hex codes, you define them once and apply them everywhere.

Start with text styles. You will create three styles that cover the most common text sizes in a mobile app.

Press T to activate the Text tool, then click anywhere on the canvas and type a sample word like Heading.
With the text layer selected, set the font size to 20 in the right sidebar under Text properties.
In the right sidebar, look for the text style section (the four-dot grid icon next to the font name area).
Click the icon and select + Create style (or the + icon in the style picker).
Name it Heading and click Create style.

Repeat this process for the next two text styles.

Change the font size to 16, create a text style named Subheading.
Change the font size to 14, create a text style named Body.

What do these text styles do?

Each style saves the font size (and any other text properties you set) as a reusable definition. When you apply the Heading style to any text layer later, it automatically gets 20px sizing. If you change the style definition, every layer using that style updates at once.

Now create four color styles. These will be the palette for your entire design.

Draw a small rectangle anywhere on the canvas using the Rectangle tool (press R).
With the rectangle selected, click the fill color swatch in the right sidebar to open the color picker.
Choose a dark color (for example, a deep navy like #1A1A2E) for your primary color.
In the color picker or the fill section, click the four-dot style icon, then click + Create style.
Name it Primary and click Create style.

Repeat the process for three more color styles.

Change the fill to a light background color (for example, #F5F5F5) and create a color style named Surface.
Change the fill to a dark text color (for example, #1A1A1A) and create a color style named On-Surface.
Change the fill to a vibrant accent color (for example, #6C63FF) and create a color style named Accent.

Why these four color names?

These follow a simplified Material Design naming convention. Primary is your brand color, Surface is for card and panel backgrounds, On-Surface is the text color that sits on Surface, and Accent is for interactive elements like buttons.

You can choose any hex values you like. The names matter more than the exact colors because they define the role each color plays in your design.

Delete the sample text and rectangle you used to create your styles. They were just vehicles for defining the styles.

To verify your styles are saved, click on an empty area of the canvas so nothing is selected. In the right sidebar, you should see your text and color styles listed under Local styles.

Don't see your styles in the sidebar?

Click on an empty part of the canvas to deselect all layers. The Local styles section only appears in the right sidebar when nothing is selected.

If you created styles but they are not showing, make sure you clicked Create style in the final step of each creation flow.

Help me find my saved styles in Figma.

Your workspace is ready. You have a properly sized mobile frame, a spacing grid to keep things aligned, and a set of reusable styles that will keep your design consistent. Next up, you will build the header and search bar for your task manager app.

Build the Header and Search Bar

Your workspace is set up with a structured frame, grid, and design tokens. Now it's time to design the actual interface elements that users will see.

Every mobile app starts with a header that tells users where they are. In this step, you'll build a header, a search bar, and filter chips that give your task manager screen its recognizable shape.

In this step, get ready to:

Design a header section with a title and profile icon.
Build a search bar using Auto Layout.
Create filter chips for task categories.

Design the header section

The header anchors the top of every mobile screen. It tells users where they are and provides access to navigation or profile actions.

Select the Rectangle tool in the toolbar (or press R on your keyboard).
Draw a rectangle at the very top of your iPhone 14 frame.
In the Design panel on the right, set the width to 390 and the height to 56.
Set the X position to 0 and the Y position to 0 so it sits flush with the top-left corner of the frame.
In the Fill section, click the color swatch and apply your Surface color style. Click the Style icon (four dots) to select from your saved styles.

Why start with the header?

The header establishes visual hierarchy on the screen. By placing it first, everything else on the screen positions itself relative to this anchor point.

Select the Text tool (or press T on your keyboard).
Click inside the header rectangle and type My Tasks.
In the Text section of the right panel, click the Style icon (four dots) and apply your Heading text style.
Position the text with 16px left padding from the frame edge. You can set this by adjusting the X value to 16 in the Design panel.
Vertically center the text within the 56px header height.

Add a profile icon on the right side of the header. You can use a simple circle (press O for the ellipse tool) sized at 32px by 32px.
Position it with 16px padding from the right edge of the frame. Set the X value to 342 (390 minus 16 minus 32).
Vertically center the icon within the header, matching the text alignment.

You should now see a horizontal bar across the top of your frame with "My Tasks" on the left and a circular profile icon on the right.

Text not aligning with your header?

Make sure the text layer sits inside the header rectangle in the layers panel. If it's above or below the rectangle in the layer order, it may appear misaligned.

Double-check the Y position of your text. For vertical centering in a 56px header with 20px text, set Y to roughly 18.

Help me align my header text and icon in Figma

Build the search bar with Auto Layout

Auto Layout is Figma's most powerful feature for building flexible UI elements. Instead of manually positioning each item pixel by pixel, Auto Layout lets you define spacing rules. Elements inside an Auto Layout frame rearrange themselves automatically when content changes.

Select the Rectangle tool and draw a rectangle below the header.
Set its width to 358 (the full 390px frame width minus 32px for 16px margins on each side).
Set its height to 48.
In the Design panel, set the corner radius to 12 to create rounded corners.
Center the rectangle horizontally (X = 16) so it has equal margins on both sides.

Inside the search bar rectangle, add a small circle or placeholder shape for the search icon (around 16px by 16px).
Add a text layer next to the icon and type Search tasks... as placeholder text.
Select both the search icon and the text layer together.
Press Shift+A to apply Auto Layout to the selected elements.

What does Auto Layout do here?

When you press Shift+A, Figma wraps the selected elements in an Auto Layout frame. This frame controls the spacing between the icon and text automatically.

If you later change the placeholder text to something longer, the layout adjusts without you repositioning anything manually.

In the Auto Layout section of the right panel, set the padding to 12 on all sides.
Set the gap between items to 8.
Make sure the Auto Layout frame's height is 48 and the corner radius is 12.
Give the frame a subtle fill color to distinguish it from the background.

Your search bar should now show a rounded rectangle with a search icon and placeholder text neatly spaced inside it.

Search bar elements not staying together?

Make sure you selected both the icon and the text before pressing Shift+A. If Auto Layout was applied to only one element, undo with Ctrl+Z (Windows) or Cmd+Z (macOS) and try again with both selected.

Help me fix my Auto Layout search bar in Figma

Create filter chips

Filter chips are small tappable pills that let users narrow down content quickly. Each chip gets its own Auto Layout so the text inside is always padded correctly.

Select the Rectangle tool and draw a small rounded rectangle.
Set its height to 32 and the corner radius to 12 to create a pill shape.
Add a text layer inside and type All.
Select both the rectangle and the text, then press Shift+A to apply Auto Layout.
Set horizontal padding to 12 and vertical padding to 6 so the text sits comfortably inside the pill.

Duplicate this chip twice (Ctrl+D on Windows or Cmd+D on macOS).
Change the text in the second chip to Today.
Change the text in the third chip to This Week.

Select all three chips together.
Press Shift+A to wrap them in a horizontal Auto Layout group.
In the Auto Layout settings, set the gap between items to 8.
Position the chip group below the search bar with 16px left margin to align with your grid.

You should see three evenly spaced pill-shaped chips labeled "All", "Today", and "This Week" sitting below your search bar.

Why Auto Layout on every chip?

Each chip has its own Auto Layout so that changing the text (e.g., "This Week" is wider than "All") automatically resizes the pill to fit. The outer Auto Layout group then keeps the spacing between chips consistent no matter their individual widths.

Chips overlapping or misaligned?

Check that the outer Auto Layout direction is set to Horizontal (the arrow icon in the Auto Layout section should point right). If chips are stacking vertically, click the horizontal direction option.

Help me fix my filter chip layout in Figma

Your screen now has clear structure with a header, search bar, and filter chips. Next up, you'll build the main content area with task card components and variants.

Design the Task Card Component

Your header, search bar, and filter chips give the screen structure. Now you need the content that fills the rest of the screen.

Task cards are the core UI element of any task manager. In this step, you will build a reusable card component with two states (default and completed), then populate your screen with multiple instances to create a realistic task list.

In this step, get ready to:

Build a task card with structured layout using Auto Layout.
Convert the card into a reusable component with a completed variant.
Populate your screen with multiple card instances to create a full task list.

Build the card structure

A task card needs to display several pieces of information: the task name, when it is due, and what category it belongs to. Auto Layout keeps these elements stacked neatly with consistent spacing, so the card adapts if you change the text later.

Select the Rectangle tool from the left toolbar (or press R).
Draw a rectangle that spans the full width of your frame minus 16px on each side (so 358px wide). Set its height to about 120px for now.
In the right panel under Design, set the corner radius to 12.
Set the fill to your Surface color style by clicking the four-dot style icon next to Fill and selecting Surface.
Add a drop shadow by clicking the + next to Effects in the right panel. Select Drop shadow and keep the values subtle (Y offset of 2, blur of 4, opacity around 10%).

Now add the content layers inside the card.

Select the Text tool (press T) and type a task name like Design homepage wireframe. Apply your Body text style, then set it to Bold in the text properties.
Add a second text layer below for the due date. Type something like Due: Tomorrow. Apply the Body text style and set the color to a lighter shade of your On-Surface color (reduce opacity to around 60%).
Add a third row containing a checkbox (a small 20x20 rounded rectangle with a 2px border) and a category tag (a small pill shape with text like Design inside). Place these side by side.
Select all the content layers inside the card (task title, due date, checkbox row).
Press Shift+A to apply Auto Layout. In the Auto Layout settings on the right panel, set padding to 16 on all sides and the gap between items to 8.
Make sure the direction is set to Vertical so items stack top to bottom.

What does this card structure give you?

The vertical Auto Layout with 16px padding and 8px gap creates breathing room around the card content. Each piece of information (title, date, category) sits on its own row.

The drop shadow lifts the card off the background, making it feel like a tappable element. This is a common mobile UI pattern for list items.

Your card should now show a rounded rectangle with a task title, due date, and a checkbox row stacked vertically inside it.

Card content not stacking vertically?

Make sure you selected the content layers (text and shapes) before pressing Shift+A. If the Auto Layout direction shows as horizontal, click the direction toggle in the Auto Layout section of the right panel to switch it to vertical.

If your text layers are overlapping, check that the gap is set to 8 and not 0.

help me fix my Auto Layout card structure in Figma

Convert to a component and add variants

A component in Figma is a reusable template. When you duplicate a component, each copy (called an instance) stays linked to the original. Variants let you define multiple states of the same component (like default and completed) and swap between them with one click.

Select your entire card frame (click the Auto Layout frame in the layers panel to select the whole card).
Press Cmd+Option+K (macOS) or Ctrl+Alt+K (Windows) to create a Component.
You should see a purple diamond icon appear on the layer. This confirms it is now a main component.

Now add a variant for the completed state.

With the component selected, click the + button next to Variants in the right panel (under the Design tab). This creates a duplicate of your card inside a dashed purple container.
Select the second variant (the duplicate card inside the dashed container).
In the right panel, rename this variant's property value to completed.
Select the task title text in the second variant. In the text properties, click the strikethrough button (S with a line through it). Reduce the text opacity to around 50% to make it look dimmed.
Select the checkbox shape in the second variant. Give it a solid fill with your Accent color to show it is checked.
Reduce the opacity of the due date text in the second variant to around 50% as well.

Why use variants instead of separate designs?

Variants keep all states of a component grouped together. When you place an instance on your screen, you can swap between default and completed with a single dropdown selection.

If you later change the card's padding or corner radius, both variants update at once. This is how professional design systems maintain consistency across dozens of screens.

Don't see the Variants option?

The Variants section only appears after you convert the frame to a component. Make sure you see the purple diamond icon on your layer before looking for the + button. If you do not see it, select the card frame and press Cmd+Option+K (macOS) or Ctrl+Alt+K (Windows) again.

help me create a Figma component with variants

Populate the screen with task card instances

A single card is a building block. A populated list is what makes the screen feel like a real app. You will place multiple instances of your card component and customize each one with different content.

In the left panel under Assets, find your task card component. Drag an instance onto your iPhone frame, below the filter chips.
Position the first card with 16px left and right margins from the frame edges.
Duplicate the instance 2-3 more times (select it and press Cmd+D on macOS or Ctrl+D on Windows). Space each card 12px apart vertically.
Double-click into each instance to edit its text. Give each card a unique task name and date:

Card 1: Design homepage wireframe with due date Due: Tomorrow and category Design.
Card 2: Review pull requests with due date Due: Today and category Development.
Card 3: Write project brief with due date Due: Friday and category Planning.
Card 4: Set up CI pipeline with due date Due: Next week and category Development.

Select one of the card instances (pick whichever task you want to show as done).
In the right panel, find the variant dropdown under the component properties. Change it from the default to completed.

You should now see your screen with 3-4 task cards stacked below the filter chips. One card shows the completed state with strikethrough text and a filled checkbox, creating a clear visual contrast.

Why vary the content in each card?

Real designs never show identical placeholder text in every card. Varying the task names, dates, and categories makes your design look realistic and helps you catch spacing issues that only appear with different text lengths.

Cards not aligned or spaced evenly?

Select all your card instances and use the Tidy up option at the bottom of the right panel to distribute them evenly. Then manually adjust the vertical spacing to exactly 12px by typing the value in the spacing field between selected objects.

If a card looks different from the others, make sure it is an instance (purple diamond outline) and not a detached copy. Instances stay linked to the main component.

help me align and space my task card instances in Figma

Your screen now looks like a real task manager app with structured content and clear visual states. Next up, you will bring this design to life by adding a prototype interaction that simulates tapping a button.

Add a Prototype Interaction

Your main screen is looking sharp with styled task cards, filter chips, and a clean header. Now it's time to make your design feel like a real app.

Prototyping in Figma lets you add clickable interactions between screens. In this step, you'll add a floating action button, create a second screen, and wire them together with a smooth transition.

In this step, get ready to:

Add a floating action button to your main screen.
Connect two screens with a prototype interaction.
Preview and test the transition in Figma's prototype player.

Create the floating action button and second frame

Before you can prototype an interaction, you need two things: a button to tap and a destination screen to navigate to. You'll create both now.

Select the Ellipse tool from the shape tools dropdown in the top toolbar (or press O on your keyboard).
Draw a circle at the bottom-right area of your main frame.
In the Design panel on the right, set both the width and height to 56 to make it a perfect 56px circle.
Apply your Accent color style as the fill.
Select the Text tool (press T) and type a + symbol on top of the circle.
Center the + text both horizontally and vertically inside the circle using the alignment options in the Design panel.
Set the text color to white so it contrasts against the Accent fill.
Select both the circle and the + text, then group them (Ctrl+G on Windows, Cmd+G on macOS).
Position the group at the bottom-right of your frame with about 16px of padding from the right edge and 16px from the bottom.

You should now see a colored circle with a white plus icon floating at the bottom-right of your screen. This is your floating action button (FAB).

What is a floating action button?

A floating action button (FAB) is a circular button that hovers above the main content of a screen. It represents the primary action on the screen.

In task manager apps, the FAB is typically used to create a new task. It stays in a fixed position (usually bottom-right) so the user can always reach it.

Now you need a second frame for the FAB to navigate to.

In the Layers panel on the left, click on your main iPhone 14 frame name to select the entire frame.
Duplicate it by pressing Ctrl+D (Windows) or Cmd+D (macOS).
Drag the duplicated frame to the right of your original so both frames sit side by side on the canvas.
Double-click the duplicated frame's name in the Layers panel and rename it to Add Task.
Inside the duplicated frame, add a text layer that says "Add Task" near the top to indicate this is the overlay screen.

You now have two frames on your canvas: your main task list screen and an "Add Task" screen.

Keep the second frame simple for now

This second frame only needs to look different enough to confirm the transition works. You'll design a complete "Add Task" modal in the Secret Mission if you want a polished result.

Set up the prototype connection

With both frames ready, you can now wire them together in Prototype mode. This is where you tell Figma what happens when someone taps the FAB.

Click the Prototype tab in the right panel (next to the Design tab).
On the canvas, click your FAB group (the circle with the plus icon) on the main frame to select it.
You'll see a small blue circle appear on the right edge of the selected element. This is the connection handle.
Click and drag from the blue circle to your second frame (Add Task).
Release the mouse over the second frame. A blue arrow now connects the FAB to the second frame.

An interaction details panel appears in the right sidebar showing the connection settings.

Set the trigger dropdown to On tap.
Set the action dropdown to Navigate to.
Set the animation type to Slide In.
Set the direction to the bottom arrow (the frame slides in from the bottom).
Set the easing to Ease In and Out.
Set the duration to 300ms.

What do these settings do?

The trigger (On tap) fires the interaction when a user taps the button. The action (Navigate to) tells Figma to show the destination frame.

The Slide In animation from the bottom simulates how a real mobile app presents a modal sheet. The 300ms duration with Ease In and Out creates a smooth, natural motion that starts slow, speeds up, and slows down at the end.

Don't see the blue connection handle?

Make sure you're in the Prototype tab, not the Design tab. Connection handles only appear in Prototype mode.

Also check that you've selected the FAB group itself, not the entire main frame. Click directly on the circle or group in the canvas.

help me connect my FAB to the second frame in Prototype mode

Preview your prototype

Your interaction is wired up. Figma's built-in prototype player lets you test it immediately without leaving the tool.

Click the Play button (triangle icon) in the top-right corner of Figma.
A new browser tab or window opens showing your design in presentation mode.
Tap the + button (your FAB) in the preview.
Watch the second frame slide in from the bottom with your 300ms animation.

You should see the "Add Task" frame slide smoothly upward over the main screen. This is exactly how you'd present your design to stakeholders or include it in a portfolio.

Why does prototyping matter for designers?

Static mockups only show what a screen looks like. Prototypes show how a screen feels when someone interacts with it.

Hiring managers look for prototyped designs because they demonstrate that you think about user flows, not just pixels. A clickable prototype communicates your design intent far better than a flat image.

Nothing happens when you tap the FAB?

Go back to the editor and check that the blue arrow still connects your FAB to the second frame. If the arrow is missing, re-drag the connection from the FAB's blue handle to the Add Task frame.

If your cursor shows as a hand icon but nothing happens, make sure you're clicking directly on the FAB circle area in the preview.

help me fix my Figma prototype interaction that isn't working when I tap the button

Secret mission

Design the "Add Task" Modal

You've built a polished task manager screen. Now take it further by designing a complete "Add Task" modal and linking it to your main screen with smooth prototype transitions. This is how real apps work.

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely on Figma's free Starter plan, so there are no ongoing costs.

Resources you used:

Figma account (free Starter plan).
Figma design file (Task Manager app screen).

Keep everything running

No action needed. Choose this if you plan to use your design as a portfolio piece or want to keep iterating on it.

Your Figma file stays in your Drafts and is accessible any time you log in.
Your account remains free. Figma's Starter plan has no recurring charges.

Pause - I'll come back to this later

Since Figma is browser-based and free, there is nothing to shut down or pause. Your file is saved automatically in the cloud.

Close your Figma browser tab or desktop app. Your work is already saved.
When you are ready to return, log in at figma.com and your file will be in your Drafts.

Delete - I don't want to use this again

Remove all project resources and start fresh. Follow these steps to delete your design file and optionally your account.

Delete your design file:
Delete your Figma account (optional):

Account deletion is permanent

Deleting your Figma account cannot be undone. You will lose access to all files in your Drafts. Only delete your account if you are certain you will not use Figma again.

Nice Work!

You just designed your first mobile app screen from scratch in Figma. From an empty canvas to a fully interactive prototype, you now have a portfolio-ready design that demonstrates real UI/UX skills.

What you learned:

Built a structured mobile layout using frames, layout grids, and reusable design tokens (text and color styles) for consistency across your design.
Created flexible, responsive components using Auto Layout that resize intelligently when content changes.
Designed a task card component with variants for managing different states, and connected screens with prototype interactions to simulate real app behavior.
Secret Mission: Designed a complete "Add Task" modal and linked it to the main screen with smooth prototype transitions.

Ready to quiz yourself?