Design a Mobile App Screen in Figma

Design a responsive music app screen with components and a prototype.

Introduction

30 Second Summary

Every app on your phone started as a design. Someone decided where the buttons go, how the cards look, and what happens when you tap. That someone uses Figma, the industry-standard tool for designing digital interfaces.

In this project, you will design a mobile music player app screen in Figma. You will build reusable components, apply responsive layouts, and create a clickable prototype you can share with others.

What You'll Build

A mobile music player app screen with responsive card layouts, interactive button components, and a shareable prototype that simulates real app interactions.

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

A responsive music card component built with auto layout that resizes automatically with its content.
A reusable button component with interactive states using variants to simulate hover and press behaviour.
A complete mobile app screen assembled from your reusable components with proper spacing and layout.
A shareable interactive prototype you can click through to demonstrate real app interactions.
Secret Mission: Add a second "Now Playing" screen and connect it with navigation transitions for a realistic multi-screen app flow.

Are there any prerequisites?

None. This project starts from scratch, including creating a free Figma account. You just need a web browser.

Set Up Your Figma Account

Before you can design anything, you need a canvas to work on. Figma is a browser-based design tool used by professional product designers to create app interfaces, websites, and interactive prototypes.

In this step, you will create a free Figma account, set up your design file, and get familiar with the editor layout so you know where everything lives.

In this step, get ready to:

Create a free Figma account (or sign in to an existing one).
Create a new Design file named "Music Player App".
Set up a mobile frame preset for your app screen.

Create your free Figma account

Figma runs entirely in the browser, so there is nothing to install. You just need a free Starter plan account to get started.

Open your browser and go to figma.com.
Click Sign up and create an account using your email or Google account.
If you already have an account, click Log in instead.

What is the Starter plan?

The Starter plan is Figma's free tier. It includes unlimited drafts and up to 3 Design files within a project.

That is more than enough for this project. No credit card is required.

✔️ I'm signed in to Figma

You should see the Figma file browser, which is your home screen for managing files and teams. Let's move on to creating your design file.

ⓧ I'm having trouble signing up

Try using a different browser (Chrome works best with Figma).
Check your email for a verification link if you signed up with email.
If you see a plan selection screen, choose the free Starter option.

Still stuck? Help me troubleshoot my Figma sign up.

Create a new Design file

Design files are where all your visual work happens in Figma. Each file is like a blank canvas that saves automatically to the cloud.

In the file browser, click Drafts in the left sidebar.
Click + Create in the top-right corner.
Select Design from the dropdown menu.
A new untitled file opens in the Figma Design editor.

Now rename your file so you can find it easily later.

Double-click the file name (it says Untitled) in the top-left area of the navigation panel.
Type Music Player App and press Enter.

Where did my file go?

Your file is saved automatically in your Drafts folder. You can always get back to it from the file browser by clicking the Figma logo or pressing the back arrow.

Tour the interface and set a mobile frame

Figma's editor has four main areas. Knowing where they are helps you navigate quickly throughout the project.

Look at the bottom of the editor. This is the toolbar, where you find tools for creating shapes, frames, and text.
Look at the left sidebar. This is the layers panel, where you see every object in your file listed as a layer.
Look at the right sidebar. This is the properties panel, where you adjust settings like size, colour, and spacing for whatever you have selected.
The large open area in the centre is the canvas, your workspace for arranging designs.

What is a frame?

A frame is a container that holds your design elements. Think of it as the phone screen boundary for your app.

Figma provides frame presets that match real device dimensions so your designs are pixel-accurate from the start.

Now you will create an iPhone 16 frame to act as your mobile screen.

Press F on your keyboard to activate the Frame tool.
In the right sidebar, you will see a list of frame preset categories (Phone, Tablet, Desktop, etc.).
Expand the Phone section by clicking the arrow next to it.
Click iPhone 16 to add the frame to your canvas.

An empty frame appears on the canvas with dimensions 393x852. You can confirm this by checking the W and H values in the right sidebar.

Don't see frame presets in the right sidebar?

Make sure the Frame tool is active (press F again). The presets only appear while the Frame tool is selected.
If you accidentally clicked and dragged on the canvas, you may have created a custom-sized frame instead. Delete it (select it and press Delete or Backspace), then press F and click the preset from the sidebar without dragging.

Help me find the frame presets in Figma.

Your workspace is ready. Next up, you will build your first interactive button using auto layout.

Build Your First Auto Layout Button

Your Figma workspace is set up with a fresh iPhone frame ready to fill. The first element every app needs is a button, and building one from scratch teaches you the most important layout concept in Figma.

Buttons in professional apps resize gracefully when their text changes. Auto layout is the Figma feature that makes this happen automatically, so you never have to manually adjust padding or alignment.

In this step, get ready to:

Create a text layer and wrap it in an auto layout frame.
Style the button with colour, padding, and rounded corners.
Turn the button into a reusable component.

Create a text layer and wrap it in auto layout

Every auto layout frame starts with content inside it. You'll type a label first, then let Figma wrap it in a responsive frame.

Press T on your keyboard to select the Text tool.
Click anywhere on the canvas outside the iPhone frame and type Play.
In the properties panel on the right, set the font to any sans-serif (such as Inter or Roboto) at size 16.
Click on the text layer to select it.
Press Shift+A to add auto layout.
In the properties panel, set both Horizontal and Vertical resizing to Hug contents.
In the layers panel on the left (under the File tab), double-click the frame name and rename it to Button.

You should see a frame called Button in the layers panel wrapping your Play text.

What is auto layout?

Auto layout turns a static frame into a flexible container. Instead of you positioning child layers pixel by pixel, the frame arranges them automatically and resizes to fit.

Setting resizing to Hug contents tells the frame to shrink-wrap around its children. If you changed the text from "Play" to "Play Now", the frame would grow to fit.

Don't see a frame wrapping your text?

Make sure you selected the text layer before pressing Shift+A. If nothing was selected, Figma has nothing to wrap.

If you accidentally pressed Shift+A with the iPhone frame selected, undo with Cmd+Z (macOS) or Ctrl+Z (Windows), select only the text layer, and try again.

Help me add auto layout to my text layer in Figma

Style the button

The frame is ready but invisible. Now you'll add colour, rounding, and padding to make it look like a real button.

Click the Button frame to select it.
In the properties panel on the right, find the Fill section and click the colour swatch.
Enter 1DB954 in the hex field (a green accent colour) and press Enter.
Set Corner radius to 100 to create a fully rounded pill shape.
Expand the Button frame in the layers panel and click the Play text layer inside it.
In the properties panel, change the text fill colour to white (FFFFFF).
Click the Button frame again to select the parent.
In the auto layout section of the properties panel, set Horizontal padding to 32 and Vertical padding to 12.

Your button should now appear as a green pill with white "Play" text, nicely padded on all sides.

What does padding do in auto layout?

Padding is the breathing room between the edge of the frame and the content inside it. Horizontal padding adds space on the left and right. Vertical padding adds space on the top and bottom.

Because the frame is set to Hug contents, increasing padding makes the button grow outward rather than pushing content inward.

Button looks like a rectangle, not a pill?

Double-check the Corner radius value is 100, not 10. A small radius rounds the corners slightly, but a large radius (exceeding half the frame height) creates the pill shape.

Help me fix the corner radius on my Figma button

Turn it into a reusable component

A component in Figma is a reusable master element. Any copies (called instances) stay linked to the original, so updating the master updates every copy automatically.

Click the Button frame to select it.
Press Option+Command+K (macOS) or Ctrl+Alt+K (Windows) to create a main component.

The layer icon in the left panel turns purple, confirming it is now a main component. You can find it later in the Assets tab of the left sidebar.

Why does the icon turn purple?

Purple means "main component." Any time you drag this component from the Assets tab onto the canvas, Figma creates a linked instance (shown with a green diamond icon). Changes to the purple original automatically flow to all instances.

Layer icon didn't turn purple?

Make sure you selected the outer Button frame, not the Play text layer inside it. Only the top-level frame becomes the component.

If you see a green diamond instead, you accidentally created an instance from an existing component. Undo with Cmd+Z (macOS) or Ctrl+Z (Windows) and try again on the original frame.

Help me create a main component in Figma

Your first reusable component is done. Next up, you'll build a music card that really shows off auto layout's power with nested frames and responsive text.

Design a Responsive Music Card

Your button component is ready to reuse across your design. Now it's time to build something more complex: a music card that holds album art, a song title, and an artist name.

Cards are the building blocks of most mobile apps. In this step, you'll design a card that automatically adapts its layout when the content or screen size changes, using nested auto layout frames.

In this step, get ready to:

Create the card's text structure with auto layout.
Add album art and assemble the full card layout.
Make the card responsive and reusable as a component.

Create the card structure

Every card needs a foundation. You'll start by drawing a frame for the card, then create the text layers that display the song and artist information.

Select the Frame tool from the toolbar at the bottom of the editor (or press F).
Draw a frame on the canvas (away from your iPhone frame). Set its width to 345 and height to 200 in the right sidebar.
With the frame selected, click the + next to Fill in the right sidebar.
Click the colour swatch and enter 1E1E1E for a dark background.

Now add the text layers that will display song information inside this frame.

Press T to activate the text tool, then click inside the dark frame and type Midnight Dreams.
Press T again, click below the first text layer, and type Luna Park.
Select both text layers by clicking one, then holding Shift and clicking the other.
Press Shift+A to wrap them in an auto layout frame.
In the auto layout section of the right sidebar, set the gap between items to 4.
Double-click the frame name in the Layers panel (left sidebar) and rename it to metadata.

What is the metadata frame doing?

The metadata frame is a vertical auto layout container. It stacks the song title and artist name with a consistent 4px gap between them.

Nesting auto layout frames inside each other is how professional designers build complex, responsive layouts in Figma.

You should see two text layers neatly stacked inside a frame called metadata in your Layers panel.

Text layers not inside the dark frame?

If your text layers appear outside the 345x200 frame, drag them into it in the Layers panel. Make sure both text layers are children of the dark frame before selecting them for auto layout.

If the auto layout flow is horizontal (text side by side), click the vertical flow icon in the auto layout section of the right sidebar.

Still stuck? Help me fix my metadata frame layout in Figma.

Add album art and assemble the card

Your card needs a visual element to represent the album. You'll add a colourful rectangle as a placeholder for album art, then combine it with your metadata frame into a horizontal layout.

Press R to select the Rectangle tool.
Draw a square inside the dark 345x200 frame. Set its width and height to 80 in the right sidebar.
With the rectangle selected, click the colour swatch next to Fill in the right sidebar.
In the colour picker, click the gradient icon (second icon from the left at the top). Make sure Linear is selected in the dropdown.
Click the left colour stop and enter 667EEA. Click the right colour stop and enter 764BA2.
Set the rectangle's corner radius to 8 in the right sidebar.

Now combine the album art and metadata into a single horizontal card layout.

In the Layers panel, select both the album art rectangle and the metadata frame (hold Shift and click each one).
Press Shift+A to wrap them in a new auto layout frame.
In the auto layout section of the right sidebar, set the flow to Horizontal (the horizontal arrow icon).
Set the gap between items to 12.
Set both the horizontal and vertical padding to 16.
Rename this frame to Card in the Layers panel.
With the Card frame selected, set the corner radius to 12 in the right sidebar.
Make sure the Fill on the Card frame is 1E1E1E. If it's missing, add it now using the + next to Fill.

What does this layout do?

The Card frame is a horizontal auto layout container. The album art square sits on the left, and the metadata frame (with its vertical text stack) sits on the right.

The 16px padding creates breathing room between the card edges and its content. The 12px gap keeps the album art and text nicely separated.

You should see a dark rounded card with a purple gradient square on the left and two lines of text on the right.

Album art and text not side by side?

Make sure the auto layout flow is set to Horizontal, not Vertical. Click the horizontal arrow icon in the auto layout section of the right sidebar.

If the rectangle appears below the text instead of beside it, check the layer order in the Layers panel. The album art rectangle should be listed above the metadata frame. Drag it above if needed.

Need help? Help me fix the layout of my music card in Figma.

Make it responsive

A responsive card adapts to different widths without breaking. You'll set the metadata text to stretch with the card, add size constraints, and then convert the card into a reusable component.

In the Layers panel, click on the metadata frame (the child frame inside Card).
In the right sidebar, find the Horizontal resizing dropdown and change it to Fill container.
Click on the Card frame to select it.
In the right sidebar, click the width value. Click the dropdown arrow next to it and select Add min width. Set the minimum width to 280.
Click the width dropdown again and select Add max width. Set the maximum width to 393.

Why set min and max width?

The min width of 280 ensures the card never gets too narrow to read. The max width of 393 matches your iPhone frame width, so the card never overflows the screen.

Setting metadata to Fill container means the text stretches to fill whatever space is left after the album art. This is how professional designers build cards that look good at any size.

Now turn the card into a reusable component so you can create multiple instances from it.

Select the Card frame.
Press Option+Command+K (macOS) or Ctrl+Alt+K (Windows) to create a component.

The layer icon for Card turns purple in the Layers panel. This means it is now a main component that you can reuse from the Assets tab.

Layer icon didn't turn purple?

Make sure you selected the Card frame itself, not a child layer inside it. Click directly on the frame name in the Layers panel to be sure.

Try the shortcut again, or right-click the frame and select Create component from the menu.

Still not working? Help me turn my Card frame into a component in Figma.

Your responsive Card component is complete. In the next step, you'll drag instances of this card and your Button component into the iPhone frame to assemble a full mobile screen.

Assemble the Mobile Screen

Your reusable Card component is built and ready to go. Now it's time to bring everything together into a complete mobile screen.

You'll use component instances (copies linked to your main component) to populate the iPhone frame with music cards. Then you'll use nested auto layout to keep the header, cards, and navigation bar perfectly spaced and responsive.

In this step, get ready to:

Drag Card instances into the iPhone frame and stack them with auto layout.
Add a "My Music" header and apply auto layout to the full screen.
Build a bottom navigation bar component.

Drag card instances into the frame

Instead of recreating the card from scratch each time, you'll pull copies (instances) from the Assets tab. Instances stay connected to the main component, so any future edits to the original Card automatically update every copy.

Click on your iPhone 16 frame on the canvas to select it.
Open the Assets tab in the left sidebar.
Find your Card component in the list.
Click and drag the Card component onto the iPhone frame to create an instance.
Repeat this 2-3 more times so you have 3-4 card instances stacked vertically inside the frame.

Duplicate instead of dragging

After placing the first instance, you can select it and press Command+D (macOS) or Ctrl+D (Windows) to duplicate it. This is faster than dragging from the Assets tab each time.

Select all your card instances inside the iPhone frame.
Press Shift+A to wrap them in an auto layout frame.
In the Auto layout section of the right sidebar, confirm the flow is set to Vertical.
Set the gap between items to 12.

What did this do?

Pressing Shift+A wrapped your card instances in a new parent frame with auto layout applied. The vertical flow stacks items from top to bottom, and the gap of 12 creates consistent spacing between each card.

This is nested auto layout in action. Each Card already has its own horizontal auto layout inside, and now the cards themselves live in a vertical auto layout frame.

You should see 3-4 dark cards stacked neatly inside your iPhone frame with even spacing between them.

Cards overlapping or not stacking?

Make sure you selected all card instances before pressing Shift+A. If auto layout was applied to only one card, undo with Command+Z (macOS) or Ctrl+Z (Windows), select all cards, and try again.

Also check that the flow is set to Vertical in the right sidebar. If it defaulted to Horizontal, your cards will sit side by side instead of stacking.

Why are my cards overlapping instead of stacking?

Add a header and organize the full screen layout

Your cards are stacked, but the screen still needs a title at the top. You'll add a header and then wrap everything in one master auto layout frame that controls the entire screen's spacing.

Press T to activate the Text tool.
Click inside the iPhone frame, above your card stack, and type My Music.
In the right sidebar, set the font size to 24 and the weight to Bold.

Now wrap everything in a single auto layout frame to control the full screen's padding and spacing.

Select everything inside the iPhone frame (the "My Music" text and the card stack).
Press Shift+A to apply auto layout.
Confirm the flow is set to Vertical in the right sidebar.
Set the gap between items to 24.
Set the Horizontal padding to 24.
Click the individual padding icon in the Auto layout section to set per-edge values.
Set the top padding to 60 and the bottom padding to 24.

Why different top and bottom padding?

The top padding of 60 pushes the content below where a phone's status bar would sit (clock, battery, signal). The bottom padding of 24 gives breathing room above the navigation bar you'll add next.

This asymmetric padding is standard practice in mobile design. It ensures content doesn't collide with system UI elements.

Your iPhone frame should now show "My Music" in bold at the top, followed by a neat stack of cards with even spacing. The content is inset from the edges of the frame.

Text and cards not aligned?

If your "My Music" text ended up below the cards instead of above them, drag it above the card stack in the Layers panel (left sidebar). Layers higher in the list appear higher on screen in a vertical auto layout.

If you don't see individual padding fields, click the icon with four separate edges in the padding section of the right sidebar. This switches from uniform padding to per-edge values.

Help me fix my screen layout spacing.

Build a bottom navigation bar

Every mobile app needs a navigation bar at the bottom for switching between sections. You'll build one with three labels and turn it into a reusable component.

Click on an empty area of the canvas (outside the iPhone frame) to deselect everything.
Press T to activate the Text tool.
Type Home on the canvas.
Create two more text layers next to it: Search and Library.
Select all three text layers.
Press Shift+A to wrap them in an auto layout frame.
In the right sidebar, confirm the flow is set to Horizontal.
Set the horizontal gap to Auto. This distributes the labels with maximum spacing between them (space-between behaviour).
Set the padding to 16 on all sides.
Add a Fill to the frame and set the colour to #121212.
Rename the frame to NavBar in the layers panel.

What does gap Auto do?

Setting the gap to Auto tells Figma to space the child items as far apart as possible within the frame. This creates the same effect as CSS space-between. As the frame width changes, the labels spread evenly across the available space.

Now turn the nav bar into a reusable component and place it in your screen.

Select the NavBar frame.
Press Option+Command+K (macOS) or Ctrl+Alt+K (Windows) to create a main component.
Drag an instance of the NavBar from the Assets tab into the bottom of your iPhone frame (below the card stack).
Select the NavBar instance inside the frame.
In the right sidebar, set the Horizontal resizing (Width) to Fill container. This stretches the nav bar to match the full width of its parent frame.

Why Fill container?

Fill container tells a child layer to stretch to fill the available width of its parent auto layout frame. Without this, the NavBar would stay at whatever fixed width it was created at. With Fill container, it stretches edge to edge and the three labels space themselves evenly across the screen.

Your iPhone frame should now show a complete mobile screen. "My Music" sits at the top, your card stack fills the middle, and a dark nav bar with "Home", "Search", and "Library" spans the bottom.

Nav bar not stretching to full width?

Make sure you selected the NavBar instance (inside the iPhone frame), not the main component (outside). The resizing property only affects how a child behaves inside its parent frame.

If Fill container is not available as an option, check that the NavBar instance is a direct child of an auto layout frame. It should sit inside the vertical auto layout you created earlier.

Help me fix my navigation bar width.

Your mobile screen is fully assembled from reusable components. Next up, you'll bring it to life with interactive prototyping so your buttons respond to clicks.

Add Interactive Prototyping

Your mobile screen looks great, but a real app responds to touch. Buttons change colour when pressed. Cards react when tapped.

In this step, you will make your Button component interactive using variants and prototyping. You will create a pressed state for the button and wire it up so clicking it triggers a smooth visual change in the prototype preview.

In this step, get ready to:

Create button variants with default and pressed states.
Add a prototype connection between variants using the While pressing trigger.
Preview the interactive prototype to confirm the button responds to clicks.

Create button variants

Right now your Button component only has one appearance. To simulate a press interaction, you need a second version of the button with a different colour. Figma handles this with variants, which group multiple versions of a component into a single set.

Find your Button main component on the canvas (the one with the purple diamond icon in the layers panel).
Click on it to select it.
In the right sidebar, click Add variant.

Figma creates an identical copy of your button and places both inside a dashed purple border. This container is called a component set.

In the right sidebar, find the variant property that Figma created automatically (it may be called Property 1).
Click on the property name and rename it to state.
Click on the first variant (the original button).
Set its state value to default.
Click on the second variant (the new copy).
Set its state value to pressed.
With the pressed variant still selected, change its Fill colour to #17A34A (a darker green).

What are variants?

Variants let you group multiple versions of a component into one set. Instead of creating separate Button-Default and Button-Pressed components, you keep both inside a single component set and switch between them using properties.

This keeps your design file organised and makes it easy for anyone using your component to toggle between states from the right sidebar.

You should now see two buttons inside the dashed purple border. The top one is green (#1DB954) and the bottom one is darker green (#17A34A).

Don't see the dashed purple border?

Make sure you selected the main component (purple diamond icon), not an instance (hollow diamond). Only main components can have variants added to them.

If you accidentally selected an instance inside your iPhone frame, right-click it and choose Go to main component to jump to the original.

Help me find my Button main component so I can add variants.

Add prototype connections

With two variants ready, you can now tell Figma what should happen when a user presses the button. This is done through prototype connections, which link one variant to another with a specific trigger and animation.

Switch to the Prototype tab in the right sidebar.
Click on the default variant (the button with fill #1DB954) to select it.
Hover over the edge of the selected variant until you see a blue circle appear.
Click and drag the blue circle to the pressed variant (the darker green button).
Release to create the connection.

An interaction details panel appears. Configure it with these settings:

Set Trigger to While pressing.
Set Action to Change to.
Confirm the destination shows the pressed variant.
Set Animation to Smart animate.
Set Duration to 150ms.

What do these settings mean?

The While pressing trigger means the button changes appearance only while the user holds it down. When they release, it snaps back to the default state automatically.

The Change to action swaps to a different variant within the same component set. Smart animate smoothly interpolates between the two states. 150ms keeps the transition feeling instant and responsive.

You should see a curved arrow (connection noodle) linking your default variant to the pressed variant on the canvas.

Don't see the blue circle on the edge?

Make sure you are on the Prototype tab in the right sidebar, not the Design tab. The blue connection handle only appears in Prototype mode.

Also confirm you clicked directly on the variant frame itself, not on the text layer inside it.

Help me set up prototype connections between my button variants.

Preview your prototype

Time to see your interactive button in action. Figma lets you preview prototypes directly on the canvas without leaving the editor.

Click on your iPhone 16 frame to select it.
Press Shift+Space to open the inline prototype preview.
In the preview window, click and hold on your Play button.
Watch the button change from bright green to darker green while you hold it down.
Release the click and watch it snap back to the default state.

Where is the Preview button?

You can also open the inline preview by clicking the Play button in the top-right toolbar area instead of using the keyboard shortcut. The inline preview floats on the canvas so you can see design changes reflected in real time as you edit.

You should see the button respond to your click. The colour transitions smoothly between the two greens when you press and release.

Click the X on the preview window to close it when you are done testing.

Button not changing colour in the preview?

Make sure the connection goes from the default variant to the pressed variant, not the other way around. Select the connection arrow on the canvas to check its direction.

Also verify the trigger is set to While pressing. If it is set to On click, the button will swap permanently instead of snapping back.

Help me debug why my button prototype interaction isn't working.

Secret mission

Add a "Now Playing" Screen with Navigation

Your music player looks great, but real apps have multiple screens. Can you add a Now Playing screen and wire up navigation transitions so tapping a card reveals the full track details?

Clean Up Your Resources

This project runs entirely in 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:

"Music Player App" design file in Figma (cloud-hosted).
Figma account (free Starter plan).

Keep everything running

No action needed. Choose this if you want to keep your design file for reference, iteration, or portfolio use.

Your "Music Player App" file stays in your Figma drafts or project indefinitely at no cost.
Your Figma Starter account remains free with no subscription charges.

Pause - I'll come back to this later

Since Figma is cloud-based and free, there is nothing to pause. Your file stays available whenever you return.

Close the browser tab with your Figma file. Your work is saved automatically.
When you want to resume, sign back in at figma.com and open your file from the file browser.

Delete - I don't want to use this again

Remove your design file and optionally delete your Figma account entirely.

In the Figma file browser, right-click the "Music Player App" file and select Move to trash.
Select Move file to trash to confirm.
Click Trash in the left sidebar of the file browser.
Right-click the file in Trash and select Permanently delete.
Click Permanently delete file to confirm. This action cannot be undone.

To delete your Figma account entirely (optional):

From the file browser, click your name at the top-left of the screen to open the account menu.
Select Settings.
From the Account tab, scroll down to the Account section at the bottom of the page.
Click Delete account and follow the on-screen prompts.

Account deletion is permanent

Deleting your Figma account cannot be reversed. You will lose access to all files in your account. Only do this if you are sure you no longer need Figma.

That's a Wrap!

Nice work! You just designed your first mobile app screen in Figma. From a blank canvas to a fully interactive prototype with reusable components, responsive layouts, and clickable transitions.

Here's what you learned:

Built responsive auto layout components (a music card and navigation bar) that resize automatically with their content.
Created a reusable button component with interactive states using variants and prototype triggers to simulate real press interactions.
Assembled a complete mobile app screen from reusable components and added prototype interactions to simulate real app behaviour.
Connected multiple screens with navigation transitions for a realistic app flow between a music library and a Now Playing screen.

You now have the foundational Figma skills to design any mobile or web interface. From here, you can explore Figma's community templates, dive into design systems, or start designing your own app ideas.

Ready to quiz yourself?