Mobile-first design workflow in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why start with mobile in a mobile-first design workflow?

In mobile-first design, why do designers begin with the mobile version before scaling up to desktop?

A Because mobile devices have more processing power than desktops.

B Because desktop screens are smaller and need simpler designs.

C Because mobile users prefer complex interfaces over simple ones.

D Because mobile screens have less space, forcing prioritization of content and features.

💡 Hint

Think about screen size and content importance.

Mobile screens are smaller, so starting with mobile forces designers to focus on the most important content and features first.

❓ data_modeling

intermediate

Organizing components for mobile-first design in Figma

Which approach best helps organize reusable components for a mobile-first workflow in Figma?

A Use raster images instead of vector components for faster loading.

B Build components starting with mobile sizes and use variants for different screen sizes.

C Design all screens separately without components to keep them unique.

D Create components only for desktop layouts and duplicate them for mobile.

💡 Hint

Think about reusability and adapting designs across screen sizes.

Starting with mobile components and using variants allows easy adaptation to larger screens while maintaining consistency.

❓ visualization

advanced

Best practice for responsive layout visualization in Figma

You want to show how a mobile-first design adapts from mobile to tablet to desktop in a single Figma frame. Which method is best?

A Create separate frames for each device size side by side with consistent spacing.

B Stack all device frames vertically with different background colors.

C Place all device frames overlapping to save space.

D Use one frame and zoom in and out to show different sizes.

💡 Hint

Think about clarity and easy comparison.

Side-by-side frames with consistent spacing allow clear visual comparison of how the design changes across devices.

🎯 Scenario

advanced

Handling complex navigation in mobile-first design

Your app has many navigation options. In a mobile-first design, what is the best way to handle navigation on small screens?

A Show all navigation links in a horizontal bar at the top.

B Display navigation links as a long vertical list on the main screen.

C Use a hamburger menu or bottom navigation to keep the interface clean.

D Hide navigation completely and rely on search only.

💡 Hint

Think about space and ease of use on small screens.

Hamburger menus or bottom navigation keep the interface clean and accessible on small screens without overwhelming the user.

🔧 Formula Fix

expert

Why does this mobile-first prototype look broken on desktop?

You designed a mobile-first prototype in Figma using fixed widths for all elements. On desktop preview, the layout looks cramped and does not expand. What is the likely cause?

A Using fixed widths prevents elements from resizing on larger screens.

B The prototype needs more colors to look good on desktop.

C Mobile-first means designs should only work on mobile, not desktop.

D You forgot to add shadows to the elements.

💡 Hint

Think about how fixed sizes affect responsiveness.

Fixed widths lock element sizes, so they don't adapt to larger screens, causing cramped layouts on desktop.