Design a Mobile App Screen in Figma

Design a mobile task app screen with components and a prototype.

Introduction

30 Second Summary

Every app you use on your phone was designed by someone who arranged buttons, text, and colors into screens that feel intuitive. That someone could be you.

In this project, you will design a mobile task app screen in Figma, building reusable components and connecting screens into a clickable prototype you can share with others.

What You'll Build

A polished mobile "Daily Tasks" app screen with a header, search bar, filter chips, and task cards, all built with professional design techniques in Figma.

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

A styled mobile app frame with responsive Auto Layout spacing and a mini design system of saved Color Styles and Text Styles.
Reusable Components with Variants that switch between default and completed states.
A two-screen interactive prototype with tap navigation you can share with anyone.
Secret Mission: Add a dark mode version of your design using Figma Variables.

Are there any prerequisites?

None. This project includes full setup instructions for Figma, which is free to use on the Starter plan. No design experience or credit card required.

Set Up Your Figma Account

Before you can design anything, you need a workspace. Figma is a browser-based design tool that professional UI designers use every day to create app screens, prototypes, and design systems.

In this step, you will create a free Figma account, open a new design file, and set up the blank canvas for your mobile app screen.

In this step, get ready to:

Create a free Figma account on the Starter plan.
Create a new design file and learn the Figma interface.
Add an iPhone 14 frame as your app screen canvas.

Create a free Figma account

Figma runs directly in your browser, so there is nothing to install. You just need a free account on the Starter plan.

Open your browser and go to figma.com.
Click Get started for free.
Sign up with your email, Google account, or GitHub account.
Complete any onboarding prompts Figma shows you. You can skip or fill these in as you prefer.

What is the Figma Starter plan?

The Starter plan is completely free and does not require a credit card. It includes 3 design files, unlimited drafts, and 30-day version history.

Every feature you need for this project (frames, auto layout, components, variants, styles, prototyping, and variables) is available on the Starter plan.

Desktop app option

If you prefer a standalone app, you can download the Figma desktop app for macOS from figma.com/downloads. The interface is identical to the browser version.

Create a new design file

A design file is where all your screens, components, and styles live. Every Figma project starts with one.

From the Figma Dashboard (the home screen after signing in), click + New design file.
A blank canvas opens in the editor. This is your workspace.

Take a moment to locate the three main areas of the Figma interface.

The bottom toolbar contains your design tools (selection, frame, shape, text, and more).
The left panel (also called the Layers panel) shows all the objects in your file.
The right panel (the Design properties panel) shows settings for whatever you have selected.

Why is the toolbar at the bottom?

Figma uses UI3, a redesigned interface that moved the toolbar from the top to the bottom of the screen. This frees up more vertical canvas space for your designs. All keyboard shortcuts still work the same way.

Create your first frame

In Figma, a frame is a container that holds your design. Think of it as the phone screen your app will live on.

Press F on your keyboard to activate the Frame tool.
Look at the right panel. You will see a list of device presets (phone, tablet, desktop sizes).
Under the Phone section, click iPhone 14.
A 390x844 frame appears on your canvas.

Now give this frame a descriptive name so you can find it easily throughout the project.

In the Layers panel on the left, double-click the frame name (it will say something like iPhone 14 or Frame 1).
Type Tasks Screen and press Enter.

You should see your frame labeled Tasks Screen in both the Layers panel and above the frame on the canvas.

Why rename frames?

Figma gives frames generic default names like "Frame 1" or the preset name. Renaming them helps you stay organized, especially as your file grows to include multiple screens.

✔️ I see my Tasks Screen frame

Your Layers panel shows a frame named Tasks Screen and the right panel displays dimensions of 390 x 844. You are all set.

ⓧ I don't see the frame presets

Make sure the Frame tool is active (press F again). The device presets only appear in the right panel while the Frame tool is selected.

If you still do not see them, click directly on the empty canvas without dragging. Then delete the empty frame and try again by pressing F and looking at the right panel before clicking.

Frame is the wrong size?

If you accidentally clicked and dragged on the canvas instead of selecting a preset, your frame will have custom dimensions. Delete it (select it and press Delete or Backspace), then press F again and click the iPhone 14 preset from the right panel.

Help me fix my frame size

Your blank canvas is ready. Next up, you will build the design foundation by creating color styles, text styles, and a layout grid that keep your entire design consistent.

Build Your Design Foundation

Before you start dropping buttons and cards onto the canvas, you need a solid design foundation. A foundation of saved colors, typography, and spacing guides means every element you create later will be consistent from the start.

In this step, you'll add a layout guide to your frame for alignment, create reusable Color Styles for your app palette, and save Text Styles for your typography. These styles act like presets you can apply with a single click across your entire design.

In this step, get ready to:

Add a layout guide to your frame for consistent spacing.
Create four reusable Color Styles for your app palette.
Create two reusable Text Styles for headings and body text.

Add a layout guide to your frame

Layout guides are visual columns overlaid on your frame that help you align elements consistently. Think of them as invisible rulers that keep everything evenly spaced.

Select your Tasks Screen frame by clicking it in the Layers panel on the left.
In the right sidebar, find the Layout guide section.
Click Add layout guide to add a new guide. Figma applies a uniform grid by default.
Click the grid settings icon (the small grid thumbnail next to the guide entry) to open the guide properties.
Change the type from Grid to Columns.
Set Count to 4.
Set Margin to 16.
Set Gutter to 16.

You should now see four faint column guides overlaid on your frame.

What is a layout guide?

Layout guides (previously called layout grids) are visual aids that help you place elements precisely within a frame. The columns you just added divide your 390px-wide screen into four equal sections with 16px of breathing room on the edges and between each column.

Every element you place in later steps will snap to these columns, keeping your design aligned and professional.

Don't see the column guides?

Make sure you have the Tasks Screen frame selected (not a layer inside it). Layout guides can only be applied to frames.

If the guides are invisible, check the eye icon next to the layout guide entry in the right sidebar. Click it to toggle visibility back on.

Why can't I see my layout guide columns?

Create your Color Styles

Color Styles save specific hex values so you can reuse them across your design without memorizing codes. You'll create four colors that form your app's palette.

Press R on your keyboard to activate the Rectangle tool from the bottom toolbar.
Draw a small rectangle anywhere on the canvas outside your frame. This is just a temporary helper shape.
With the rectangle selected, find the Fill section in the right sidebar. Click the fill color swatch to open the color picker.
In the hex field at the bottom of the color picker, type 6366F1 and press Enter.
Click the + icon in the color picker to create a new color style.
Name it Primary and click Create style.

Repeat this process for the remaining three colors. Draw a new rectangle for each (or duplicate the first one with Alt+drag), change the fill, and save as a style:

Surface: hex F8FAFC (light gray).
On Surface: hex 1E293B (dark).
Accent: hex 10B981 (green).

After saving all four, click the fill color swatch on any rectangle. You should see your four named styles listed in the color picker.

Why save Color Styles instead of just using hex codes?

When you apply a Color Style to 20 different elements and later decide to tweak the shade, you update the style once and every element changes instantly. Without styles, you'd have to find and update each element manually.

Don't see the + icon in the color picker?

Make sure you have a rectangle selected with a fill applied before opening the color picker. The + icon appears inside the color picker panel itself, near the top.

If you accidentally closed the color picker, click the fill color swatch in the Fill section of the right sidebar to reopen it.

Help me create a Color Style in Figma

Create your Text Styles

Text Styles bundle a font family, size, and weight into a single reusable preset. You'll create two styles that cover all the typography in this project.

Press T on your keyboard to activate the Text tool.
Click anywhere on the canvas and type Heading sample.
With the text layer selected, go to the Typography section in the right sidebar.
Set the font to Inter, size to 20, and weight to Semi Bold.
Click the styles icon (four dots) next to the font name in the Typography section.
Click the + icon to create a new text style.
Name it Heading and click Create style.

Now create your second text style:

Press T again and click the canvas to create a new text layer.
Type Body sample.
Set the font to Inter, size to 14, and weight to Regular.
Click the styles icon (four dots) next to the font name.
Click + to create a new text style.
Name it Body and click Create style.

You should now see both Heading and Body listed when you click the styles icon on any text layer.

What are Text Styles for?

Text Styles work the same way as Color Styles. Instead of remembering that headings use Inter at 20px Semi Bold, you apply the Heading style with one click.

If you later decide headings should be 24px instead, updating the style changes every heading in your file at once.

Clean up your helper shapes

The sample rectangles and text layers you created are just for defining styles. You can delete them now or leave them off to the side of your frame. They won't appear in your final design as long as they sit outside the Tasks Screen frame.

Font not showing as Inter?

Inter is bundled with Figma by default. Type Inter in the font family field and select it from the dropdown. If you don't see it, make sure you're typing in the font name field (not the search bar at the top of the panel).

Help me find and set the Inter font in Figma

Your design foundation is locked in. You have a layout guide for alignment, four Color Styles for your palette, and two Text Styles for your typography. Next up, you'll use these to build the header and search bar for your app.

Design the Header and Search Bar

Your design foundation is in place. You have color styles, text styles, and a layout grid ready to use.

Now it is time to add actual UI elements to your screen. In this step, you will build a header bar and a search bar using Auto Layout, Figma's system for automatically arranging and spacing elements inside a frame.

In this step, get ready to:

Build a header with Auto Layout that pushes items to opposite ends.
Create a search bar with responsive text using Fill container.
Convert the search bar into a reusable Component.

Create the header bar

The header sits at the top of your app screen. It shows the screen title on the left and a profile avatar on the right. Auto Layout with a gap set to Auto will push these two elements apart automatically.

Select the Text tool by pressing T on your keyboard.
Click inside the Tasks Screen frame and type My Tasks.
Apply your Heading text style to this layer. Select the text layer, then in the Typography section of the right sidebar, click the style icon and choose Heading from the style picker.
Select the Ellipse tool by pressing O on your keyboard.
Hold Shift and drag on the canvas to draw a perfect circle. Set its width and height to 32 in the right panel.
With the circle selected, click the fill color swatch in the right sidebar. Click the style icon and select your Primary color style (#6366F1).
Select both the "My Tasks" text layer and the circle. Hold Shift and click each one.
Press Shift+A to wrap them in an Auto Layout frame.
In the Auto Layout section of the right sidebar, make sure the flow is set to Horizontal.
Set all four padding values to 16.
Set the gap between items to Auto. This pushes the text and avatar to opposite ends of the frame.
Double-click the frame name in the Layers panel (left sidebar) and rename it to Header.

What does Auto gap do?

Setting the gap to Auto equally distributes the available space between child layers. With only two items in the frame, Auto gap pushes them as far apart as possible. This is how professional app headers keep the title on the left and action icons on the right.

You should see a horizontal bar with "My Tasks" on the left and an indigo circle on the right, separated by space.

Items stacked vertically instead of side by side?

Check the Auto Layout flow in the right sidebar. Make sure it is set to Horizontal, not Vertical. You can click the flow direction icons to switch.

If your text and circle are overlapping, confirm that both are inside the same Auto Layout frame. Check the Layers panel to see them nested under "Header".

Still stuck? Help me fix my Auto Layout header in Figma

Build the search bar

The search bar gives users a place to find tasks quickly. You will combine a rounded rectangle background with placeholder text, then use Auto Layout to control the internal spacing.

Select the Rectangle tool by pressing R on your keyboard.
Draw a rectangle below the Header frame inside your Tasks Screen. The exact size does not matter yet.
In the right sidebar, set the corner radius to 12.
Select the Text tool (T) and click inside the rectangle to add a text layer. Type Search tasks....
Apply your Body text style to this text layer. Select it, click the style icon in the Typography section of the right sidebar, and choose Body.
Select both the rectangle and the text layer (hold Shift and click each).
Press Shift+A to apply Auto Layout.
Set the vertical padding to 12 and the horizontal padding to 16.
Click the fill color swatch on the frame and apply your Surface color style (#F8FAFC).
Select the "Search tasks..." text layer inside the frame. In the right sidebar under the resizing options, set the horizontal resizing to Fill container.
Double-click the frame name in the Layers panel and rename it to Search Bar.

Why set the text to Fill container?

Fill container tells the text layer to stretch and fill all available horizontal space inside the Auto Layout frame. Without it, the text stays only as wide as its characters, leaving awkward empty space. This makes the search bar behave like a real input field that spans the full width.

You should see a rounded, light gray bar with "Search tasks..." text inside it, neatly padded from the edges.

Search bar looks too narrow or too tall?

Make sure you set padding values on the Auto Layout frame itself, not on the rectangle. The rectangle should no longer be a separate visible layer. When you applied Auto Layout, Figma wrapped both layers into a new frame. The frame's fill replaces the rectangle's background.

If the old rectangle is still visible as a separate layer, delete it and add the fill directly to the Auto Layout frame instead.

Need more help? Help me fix my search bar layout in Figma

Convert the search bar to a component

A Component in Figma is a reusable design element. Once you convert a frame into a Component, you can create multiple copies (called instances) that all stay in sync with the original. Converting the search bar now means you can reuse it across screens later.

Select the Search Bar frame in the Layers panel.
Press Cmd+Alt+K (macOS) or Ctrl+Alt+K (Windows) to create a Component.

The frame border turns purple in the Layers panel, and a diamond icon appears next to the name. This confirms it is now a Main Component.

What is a Main Component?

A Main Component is the single source of truth for that design element. Any changes you make to the Main Component automatically update all of its instances throughout your file. The purple border helps you tell it apart from regular frames.

Don't see the purple border?

Make sure you selected the outer Search Bar frame, not the text layer inside it. Click the frame name in the Layers panel to be sure.

If the shortcut did not work, right-click the frame and look for Create component in the context menu.

Still having trouble? Help me convert a frame to a component in Figma

Your screen now has a header that pushes content apart and a reusable search bar component. Next up, you will build filter chips and a task card with multiple variants.

Create Filter Chips and Task Card Component

Your header and search bar give the app structure, but users need a way to filter their tasks and see task details at a glance.

In this step, you'll build filter chips that let users switch between task categories and a Task Card component with multiple states. This introduces two powerful Figma features: reusable Components and Variants.

In this step, get ready to:

Create filter chips for task categories.
Build a Task Card with shadow and layout.
Add Variants to the Task Card for default and completed states.

Create filter chips

Filter chips are small pill-shaped buttons that let users quickly switch between views. You'll build one chip and duplicate it for the remaining categories.

Press T on your keyboard to activate the Text tool.
Click on the canvas (outside your Tasks Screen frame) and type All.
In the right panel, apply your Body text style to this text layer.
With the text layer selected, press Shift+A to wrap it in an Auto Layout frame.
In the right panel, set the padding to 8 vertical and 16 horizontal.
Set the corner radius to 16.
Click the fill color swatch and apply your Primary color style (#6366F1).
Select the text layer inside the chip and change its color to white (#FFFFFF).

What does this create?

You now have a rounded pill shape with white text on an indigo background. The Auto Layout keeps the padding consistent no matter what text you put inside.

Hold Alt (macOS: Option) and drag the chip to duplicate it. Repeat until you have four chips total.
Double-click each duplicate to edit the text. Name them Today, This Week, and Completed.
For the three duplicates (Today, This Week, Completed), change the fill to your Surface color style (#F8FAFC).
Change the text color of those three chips to your On Surface color style (#1E293B).
Select all four chips by clicking each one while holding Shift.
Press Shift+A to wrap them in a horizontal Auto Layout frame.
Set the gap between items to 8.
Double-click the frame name in the Layers panel on the left and rename it to Filters.

You should see a row of four pill-shaped chips. The first chip (All) is indigo with white text, and the remaining three have a light gray background with dark text.

Chips not lining up horizontally?

Make sure the outer Auto Layout direction is set to horizontal (the arrow icon in the Layout section of the right panel should point right). If the chips are stacking vertically, click the direction icon to toggle it.

If your padding looks uneven, click into each chip frame individually and confirm the vertical padding is 8 and horizontal padding is 16.

Help me fix my filter chip layout.

Build a Task Card

Task cards are the core content element of this app. Each card displays a task title and metadata in a clean, elevated container.

Press F to activate the Frame tool and draw a rectangle on the canvas (outside your Tasks Screen).
In the right panel, set the corner radius to 12.
Set the fill to white (#FFFFFF).
Click the + next to Effects in the right panel to add a drop shadow.
Click the effect settings icon (the sun-like icon next to the effect name) to expand the shadow settings.
Set X to 0, Y to 2, Blur to 8, and the color to black at 8% opacity.

What is a drop shadow?

A drop shadow creates the illusion that an element is slightly raised above the surface behind it. The Y offset of 2 means the shadow falls slightly below the card, and the low opacity (8%) keeps it subtle.

Press T and add a text layer inside the frame. Type Design homepage mockup.
Apply your Body text style to this text layer, then change the weight to Semi Bold in the right panel.
Add a second text layer below it. Type Due: June 10 · Work.
Apply your Body text style to the subtitle.
Select the subtitle text layer. In the right panel under Appearance, change the layer opacity to 50%.
Select the frame (click the frame name in the Layers panel) and press Shift+A to apply vertical Auto Layout.
Set padding to 16 on all sides and gap to 4.
Double-click the frame name in the Layers panel and rename it to Card/Task.

Your card should show a bold task title with a faded subtitle beneath it, all inside a rounded white container with a soft shadow.

Shadow not visible?

The subtle shadow may be hard to see if the canvas background is white. Zoom in closely or temporarily change the canvas background color to confirm the shadow is there. Also check that the effect toggle (the eye icon next to the effect in the right panel) is enabled.

Help me troubleshoot my drop shadow settings.

Convert the Task Card to a component with Variants

A Component lets you reuse this card across your design. Variants let you define different states of the same component, so you can switch between them without rebuilding anything.

Select the Card/Task frame.
Press Cmd+Alt+K (macOS) or Ctrl+Alt+K (Windows) to convert it into a Component.
The frame icon in the Layers panel turns purple, confirming it is now a Main Component.

Why make it a Component?

Components are reusable building blocks. When you place copies (called instances) throughout your design, editing the Main Component updates every instance at once. This saves time and keeps your design consistent.

With the component selected, click Add a variant next to the component name in the right panel.
Figma creates an identical second variant inside a dashed purple border (the component set).
In the right panel, find the variant property (labelled Property 1). Click the property name and rename it to State.
Click the value of the first variant (currently Default or default) and set it to Default.
Click the value of the second variant and set it to Completed.

Now style the Completed variant to look visually distinct from the Default.

Select the second variant (Completed) in the component set.
Double-click the title text layer inside the Completed variant.
In the right panel, enable Strikethrough on the text (find it under the typography options, represented by a strikethrough S icon).
Change the title text layer's opacity to 50%.
Add a checkmark icon to the Completed variant. Use the Pen tool (P) to draw a simple check shape, or draw two short lines at an angle to suggest a checkmark.

What do Variants do for you?

When you place instances of this card later, you can switch between Default and Completed using a dropdown in the right panel. You never need to manually restyle cards to show they are done.

This is the same pattern professional design systems use for button states (default, hover, pressed) or toggle switches (on, off).

Look at your canvas. You should see a component set with a dashed purple border containing two card variants side by side. The Default variant shows normal text, and the Completed variant has a strikethrough title with reduced opacity and a checkmark.

Don't see the purple dashed border?

If your component does not show variants, make sure you clicked Add a variant in the right panel after creating the component. The dashed purple border only appears once you have at least two variants in a component set.

If the property is not named correctly, click the property name field in the right panel's Current variant section and type State to rename it.

Help me set up my Task Card variants.

✔️ Awesome, I've got everything!

Great work. Make sure both your Filters frame and Card/Task component are saved on the canvas, ready to be placed into your Tasks Screen in the next step.

ⓧ I'd like to double check my work

Here is what your elements should look like at this point:

Filters: Horizontal Auto Layout frame, gap 8. Contains four chips, each with padding 8 vertical / 16 horizontal and corner radius 16. The "All" chip has Primary fill with white text. The "Today", "This Week", and "Completed" chips have Surface fill with On Surface text.
Card/Task component set with a State property containing two values:

You now have a complete set of reusable elements: filter chips for navigation and a Task Card with built-in state management. Next up, you'll assemble everything into your full app screen.

Assemble the Full Screen

You've built every piece of your mobile screen individually. The header, search bar, filter chips, and task cards all exist as separate elements in your file.

Now you'll arrange them into a polished, responsive layout. Auto Layout handles the spacing between sections so nothing shifts out of place when content changes.

In this step, get ready to:

Arrange all sections on your frame and apply vertical Auto Layout.
Customize task card instances and set the screen background.
Organize your layers panel with clear names and groupings.

Add task card instances and apply Auto Layout

Your Tasks Screen frame already contains the Header, Search Bar, and Filters from earlier steps. You need to add task card instances below them, then wrap the entire frame in vertical Auto Layout for consistent spacing.

Click the Assets tab in the left sidebar to open the Assets panel.
Find your Card/Task component in the list.
Drag the component onto the canvas inside your Tasks Screen frame, below the Filters. This creates an instance of your task card.
Repeat this 3 more times so you have 4 task card instances total, stacked vertically below the Filters.

What is an instance?

An instance is a reusable copy of your Main Component. Changes to the Main Component automatically update every instance, keeping your design consistent.

Click on the Tasks Screen frame name in the Layers panel to select the entire frame.
Press Shift+A to apply Auto Layout to the frame.
In the right panel under Auto layout, set the direction to Vertical if it is not already.
Set the gap between items to 16.
Set padding to 0 top, 16 left, 0 bottom, 16 right. You can set each side individually by clicking the padding icon to expand per-side controls.
Select each child layer (Header, Search Bar, Filters, and each card instance) and set its horizontal resizing to Fill container in the right panel so they stretch edge-to-edge.

Why Fill container?

Fill container tells a child layer to expand to the full width of its parent frame. Without it, your elements stay at a fixed width and won't adapt to the frame edges.

Your screen should now show all sections stacked neatly with 16px gaps between them, aligned to the frame edges with 16px of horizontal padding.

Sections overlapping or misaligned?

Make sure you selected the Tasks Screen frame itself (not a child layer) before pressing Shift+A. If Auto Layout was applied to a child instead, undo with Cmd+Z (macOS) or Ctrl+Z (Windows) and try again.

If a card appears too narrow, click it and confirm its horizontal resizing is set to Fill container in the right panel.

Help me debug my Auto Layout alignment

Style and polish your task cards

With the layout in place, you'll customize individual card instances to look like a real task list. You can change text on an instance without affecting the Main Component.

Double-click the first card instance to select the title text layer inside it.
Change the title to Buy groceries.
Repeat for the remaining cards, giving each a unique title: Review PR #42, Call dentist, and Design homepage mockup.
Select one of the card instances (click it once to select the instance frame, not the text inside).
In the right panel, find the State property dropdown under the component section.
Change State from Default to Completed.
Swap a second card to Completed as well, so your list shows a mix of active and completed tasks.

What does swapping to a variant do?

When you switch an instance's variant, Figma replaces it with the design from that variant (in this case, the strikethrough title and checkmark icon). The instance stays connected to the Main Component, so future edits to either variant update automatically.

Click on the Tasks Screen frame name in the Layers panel to select it.
In the right panel under Fill, click the color swatch and change it to #F1F5F9. This gives the screen a subtle light-gray app background.

Your screen should now look like a realistic task list. Active cards appear with full-opacity titles, and completed cards show strikethrough text with a checkmark.

Variant not changing?

Make sure you selected the card instance itself (one click), not a text layer inside it (double-click). The State property only appears when the instance frame is selected.

Help me switch my card variant

Organize your layers

A clean Layers panel makes it easy to find and edit elements later. You'll group the task cards into their own frame and verify all names are clear.

In the Layers panel, hold Cmd (macOS) or Ctrl (Windows) and click each of the 4 task card instances to select them all.
Press Cmd+Option+G (macOS) or Ctrl+Alt+G (Windows) to wrap them in a new frame.
Double-click the new frame's name in the Layers panel and rename it to Task List.
With the Task List frame selected, press Shift+A to apply Auto Layout.
Set the direction to Vertical and the gap to 12.
Set the Task List frame's horizontal resizing to Fill container so it stretches to the full width of the parent.

Why a separate Task List frame?

Nesting the cards in their own frame with a tighter 12px gap separates them visually from the 16px gap between major sections (Header, Search Bar, Filters). This two-level layout is how professional designers create visual hierarchy within a single screen.

Expand each frame in the Layers panel and confirm the following names are correct: Header, Search Bar, Filters, Task List.
If any name is wrong, double-click it in the Layers panel to rename it.

Your Layers panel should now show a tidy hierarchy: Tasks Screen at the top level, with Header, Search Bar, Filters, and Task List nested inside in that order.

Task List frame not behaving correctly?

If the cards disappeared or collapsed after framing them, check that the Task List frame has Auto Layout applied (Shift+A) and that each card inside it is set to Fill container width.

If the Task List frame itself seems too narrow inside the parent, select it and confirm its horizontal resizing is Fill container in the right panel.

Help me fix my Task List layout

Your full screen is assembled and polished. Next up, you'll connect it to a second screen and build an interactive prototype you can click through and share.

Create a Prototype

Your Tasks Screen is fully assembled with styled components, responsive Auto Layout, and clean layer organization. The design looks great, but right now it is completely static.

In this step, you'll turn your design into an interactive prototype. You'll create a second screen, connect it to your main screen with a tap interaction, and preview a clickable flow you can share with others.

In this step, get ready to:

Create an Add Task Screen with a simple form layout.
Add a floating action button and connect it to the new screen.
Preview and share your interactive prototype.

Create the Add Task Screen frame

Your prototype needs a destination. You'll create a second screen that represents what opens when a user taps to add a new task.

Press F on your keyboard to activate the Frame tool.
In the right panel, select iPhone 14 from the frame presets.
Position the new frame to the right of your Tasks Screen on the canvas.
Double-click the frame name in the Layers panel and rename it to Add Task Screen.

Now build a simple form layout inside the frame. Use the same skills you practiced in earlier steps.

Press T to activate the Text tool and add a text layer near the top of the frame.
Type New Task and apply your Heading text style.
Below the title, press R to draw a rounded rectangle for the text input field.
Set the corner radius to 12 and apply your Surface color style to the fill.
Press T and add a placeholder text layer inside the rectangle with the text Task name.... Apply your Body text style.
Select both the rectangle and text layer, then press Shift+A to apply Auto Layout. Set padding to 12 vertical and 16 horizontal.
Below the input, create a Save button. Press R to draw a rounded rectangle, set corner radius to 12, and apply your Primary color style to the fill.
Press T and add a text layer inside the button with the text Save. Set the text color to white and weight to Semi Bold.
Select both the button rectangle and text, then press Shift+A for Auto Layout. Set padding to 12 vertical and 24 horizontal.

Your Add Task Screen should now have three elements arranged vertically: a title, a text input field, and a Save button.

Elements overlapping or misaligned?

If your elements overlap, select all three (title, input, button) and press Shift+A to wrap them in a vertical Auto Layout frame with a gap of 16. This spaces them out evenly.

Help me arrange my Add Task Screen elements

Add a floating action button and connect the prototype

Mobile apps commonly use a floating action button (FAB) for their primary action. You'll add one to your Tasks Screen and then wire it up as a prototype interaction.

Click on your Tasks Screen frame to select it.
Press O to activate the Ellipse tool and draw a circle inside the frame. Set its size to 56x56 in the right panel.
Apply your Primary color style to the circle's fill.
Press T and add a text layer with a + symbol. Set the text color to white and size to 24. Center it on the circle.
Select both the circle and the + text, then press Shift+A to combine them into an Auto Layout frame with center alignment.
With the combined frame selected, click Ignore auto layout in the right sidebar to remove it from the vertical flow.
Drag the button to the bottom-right corner of your Tasks Screen frame.

What does Ignore auto layout do?

Your Tasks Screen uses vertical Auto Layout, which means every direct child gets arranged in a stack. Setting an element to Ignore auto layout removes it from that flow while keeping it inside the frame.

The button stays exactly where you drag it, like a floating overlay. This is how professional designers position persistent action buttons in mobile layouts.

Now connect the button to your Add Task Screen using Figma's prototyping tools.

Click the Prototype tab in the right sidebar to switch from Design to Prototype mode.
Select your + floating action button on the Tasks Screen.
Hover over the blue circle that appears on the element's edge until it turns into a blue plus icon.
Click and drag from the blue plus icon toward the Add Task Screen frame. Figma snaps the connection when you get close enough.
Release your cursor to complete the connection.
In the interaction details that appear, set Trigger to On tap.
Set Action to Navigate to.
Set Animation to Slide in and direction to Bottom.

You should see a blue arrow (connection noodle) linking your FAB to the Add Task Screen on the canvas.

Don't see the blue circle on your button?

Make sure you've switched to the Prototype tab in the right sidebar. The blue connection handles only appear in Prototype mode. You can also press Shift+E on your keyboard to toggle into Prototype mode.

Help me create a prototype connection in Figma

Preview and share your prototype

Your prototype connection is set. Now you'll test it in the preview and generate a shareable link.

Click Preview in the top toolbar to open the inline prototype preview. You can also press Shift+Space on your keyboard.
In the preview window, tap the + button on your Tasks Screen.
Watch the Add Task Screen slide in from the bottom.
Close the inline preview by clicking the X in the preview window.

What is inline preview?

Inline preview plays your prototype in a floating window directly on the canvas. Any design changes you make are reflected in real time without reopening the preview. This makes it easy to tweak animations and test interactions as you build.

Now generate a shareable link so others can interact with your prototype.

Select the Tasks Screen frame on the canvas (the starting point for your flow).
In the right sidebar under the Prototype tab, hover next to the Flow starting point heading.
Click Copy link to copy the prototype's shareable URL to your clipboard.

Anyone with this link can open your prototype in presentation view and tap through your interactive flow.

Test on your phone

Paste the copied link into your phone's browser to see how the prototype feels on a real mobile device. Figma scales the design to your display automatically.

Tapping the button does nothing in preview?

Make sure the connection arrow goes from the + button frame specifically, not from the entire Tasks Screen frame. Select the FAB and check that the Interactions section in the right sidebar shows your On tap connection.

Help me troubleshoot my prototype interaction

Secret mission

Add Dark Mode with Variables

Your design looks great in light mode. But what about dark mode? In this bonus challenge, you'll use Figma Variables to create a full dark theme that switches instantly with a single click. This is exactly how professional design systems handle theming at scale.

Clean Up Your Resources

This project runs entirely on Figma's free Starter plan, so there are no ongoing costs. Decide whether to keep your design file for future reference, or delete it entirely.

Resources you used:

Figma design file (containing your Tasks Screen and Add Task Screen).
Figma account (Starter plan, free).

Keep everything running

No action needed. Choose this if you want to keep your design file for future reference or continue building on it.

Your file stays in your Figma drafts at no cost.
You can return to it anytime by logging in at figma.com.
The Starter plan allows up to 3 design files, so your file only uses one of those slots.

Pause - I'll come back to this later

Since Figma is cloud-based and free, there is nothing to shut down or pause. Your file is already stored safely without any ongoing cost.

Close the browser tab or desktop app.
Your work is auto-saved. When you return, log in at figma.com and find your file in your Drafts or Recents.

Delete - I don't want to use this again

Remove your design file and optionally delete your Figma account if you no longer need it.

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

Nice Work!

You just designed your first mobile app screen in Figma like a pro. You went from a blank canvas to a polished, interactive prototype with reusable components and a complete mini design system.

You learned how to:

Built responsive layouts with Auto Layout and designed reusable Components with Variants for multiple states.
Created a mini design system with saved Color Styles and Text Styles for consistent, reusable design tokens.
Connected two screens with an interactive Prototype transition and shared it with a link.
Added dark mode theming using Figma Variables and modes to switch your entire design between themes instantly.

Ready to quiz yourself?