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.

Practice

1. What is the main idea behind mobile-first design in Figma?

easy

A. Start designing for small screens before larger ones

B. Design only for desktop screens

C. Create designs without considering screen size

D. Start with the largest screen and scale down

Solution

1. Step 1: Understand mobile-first design concept

   Mobile-first means beginning your design on small screens like phones.

2. Step 2: Compare options

   Only Start designing for small screens before larger ones correctly describes starting with small screens first.

3. Final Answer:

   Start designing for small screens before larger ones -> Option A

4. Quick Check:

   Mobile-first = Start small screens first [OK]

Hint: Remember: mobile-first means start small, then scale up [OK]

Common Mistakes:

• Thinking mobile-first means designing only for desktop
• Ignoring screen size order
• Starting with large screens first

2. Which Figma feature helps create flexible layouts that adjust automatically when screen size changes?

easy

A. Vector Networks

B. Auto Layout

C. Pen Tool

D. Slice Tool

Solution

1. Step 1: Identify layout tools in Figma

   Auto Layout arranges elements and adapts them when resizing frames.

2. Step 2: Eliminate unrelated tools

   Pen Tool and Vector Networks are for drawing; Slice Tool is for exporting parts.

3. Final Answer:

   Auto Layout -> Option B

4. Quick Check:

   Flexible layouts = Auto Layout [OK]

Hint: Auto Layout adjusts elements automatically on resize [OK]

Common Mistakes:

• Confusing drawing tools with layout tools
• Using Slice Tool for layout
• Ignoring Auto Layout's role in responsiveness

3. Given a Figma frame set to 375px width (mobile), you apply Auto Layout with horizontal spacing and constraints set to 'Left and Right'. What happens when you resize the frame to 768px (tablet)?

medium

A. Elements stretch horizontally to fill the wider frame

B. Elements stay fixed size and do not move

C. Elements overlap each other

D. Elements disappear from the frame

Solution

1. Step 1: Understand Auto Layout with horizontal spacing and constraints

   Auto Layout with left and right constraints makes elements stretch or space out when frame width changes.

2. Step 2: Predict behavior on resizing from 375px to 768px

   The elements will stretch horizontally to fill the larger width.

3. Final Answer:

   Elements stretch horizontally to fill the wider frame -> Option A

4. Quick Check:

   Auto Layout + constraints = stretch on resize [OK]

Hint: Left and right constraints stretch elements on wider frames [OK]

Common Mistakes:

• Assuming elements stay fixed size
• Thinking elements overlap
• Believing elements disappear

4. You designed a mobile screen in Figma but when scaling up to desktop size, the layout breaks and elements overlap. What is the most likely cause?

medium

A. The frame size was set too small initially

B. You used too many colors in the design

C. Auto Layout was not used or constraints are missing

D. The text font size is too large

Solution

1. Step 1: Identify why layout breaks on scaling

   Without Auto Layout or proper constraints, elements do not adjust and can overlap when resizing.

2. Step 2: Evaluate other options

   Frame size, colors, or font size do not cause layout overlap on scaling.

3. Final Answer:

   Auto Layout was not used or constraints are missing -> Option C

4. Quick Check:

   Layout breaks = Missing Auto Layout or constraints [OK]

Hint: Always use Auto Layout and constraints for responsive designs [OK]

Common Mistakes:

• Blaming colors or font size for layout issues
• Ignoring Auto Layout importance
• Not checking constraints settings

5. You want to create a mobile-first dashboard in Figma that adapts from 375px (mobile) to 1024px (desktop). Which workflow best ensures a smooth scale-up?

hard

A. Design only mobile frame and export as is for all devices

B. Design desktop frame first, then shrink elements manually for mobile

C. Create separate unrelated frames for each device size without linking

D. Design mobile frame with Auto Layout and constraints, then duplicate and adjust for tablet and desktop

Solution

1. Step 1: Understand mobile-first workflow

   Start with mobile frame using Auto Layout and constraints for flexibility.

2. Step 2: Scale design by duplicating and adjusting for larger screens

   Duplicating and adjusting keeps consistency and adapts layout smoothly.

3. Step 3: Evaluate other options

   Designing desktop first or unrelated frames causes more work and inconsistency.

4. Final Answer:

   Design mobile frame with Auto Layout and constraints, then duplicate and adjust for tablet and desktop -> Option D

5. Quick Check:

   Mobile-first + Auto Layout + scale-up = Design mobile frame with Auto Layout and constraints, then duplicate and adjust for tablet and desktop [OK]

Hint: Start mobile with Auto Layout, then duplicate and adjust up [OK]

Common Mistakes:

• Starting with desktop design first
• Not using Auto Layout or constraints
• Creating unrelated frames for each device