Device-specific frames (mobile, desktop, tablet) in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ visualization

intermediate

Identify the correct frame size for a mobile dashboard

You are designing a BI dashboard for mobile devices in Figma. Which frame size best fits a typical mobile screen for clear visualization without horizontal scrolling?

A 1920 x 1080 pixels (full HD desktop)

B 1440 x 900 pixels (desktop laptop size)

C 768 x 1024 pixels (tablet portrait size)

D 375 x 667 pixels (iPhone 8 size)

💡 Hint

Think about the most common mobile screen size for smartphones.

375 x 667 pixels matches a common mobile screen size (like iPhone 8), ideal for mobile dashboards to avoid horizontal scrolling and ensure readability.

🧠 Conceptual

intermediate

Why use different frames for desktop and tablet in BI design?

Why is it important to create separate frames for desktop and tablet when designing BI dashboards in Figma?

A Because desktop and tablet have different screen sizes and user interactions, requiring tailored layouts for usability.

B Because Figma does not allow resizing frames after creation.

C Because tablet screens always have higher resolution than desktops.

D Because desktop dashboards should only use dark themes, tablets use light themes.

💡 Hint

Think about how users interact differently on desktop vs tablet.

Different devices have different screen sizes and input methods, so separate frames help optimize layout and user experience for each device.

❓ data_modeling

advanced

Adjusting BI data visualization for tablet frame

You have a desktop BI dashboard frame sized 1440 x 900 pixels. To adapt it for a tablet frame of 768 x 1024 pixels, which approach best maintains readability and usability?

A Keep the same layout and scale down all elements proportionally.

B Rearrange visual elements into a vertical stack and increase font sizes for touch interaction.

C Remove all charts and replace with text summaries only.

D Use the desktop frame as is and let users zoom in on the tablet.

💡 Hint

Consider how tablet users interact differently than desktop users.

Rearranging elements vertically and increasing font sizes improves touch usability and readability on smaller tablet screens.

🔧 Formula Fix

advanced

Fixing overlapping elements in mobile BI frame

In your Figma mobile frame (375 x 667 px), some charts overlap when previewed on a real device. What is the most likely cause?

A Using fixed pixel positions without constraints or auto-layout causing overlap on smaller screens.

B Setting frame size larger than the device screen.

C Using vector graphics instead of raster images.

D Applying a dark theme to the frame.

💡 Hint

Think about how elements behave inside frames when screen size changes.

Without constraints or auto-layout, fixed positions can cause elements to overlap on smaller or different screen sizes.

🎯 Scenario

expert

Designing a responsive BI dashboard across devices

You must design a BI dashboard that works well on mobile (375x667), tablet (768x1024), and desktop (1440x900). Which strategy best ensures consistent user experience across these device-specific frames?

A Use a single large frame and rely on users to zoom and scroll on smaller devices.

B Design only the desktop frame and scale it down for tablet and mobile.

C Create separate frames for each device with tailored layouts and use Figma components to maintain consistent styles.

D Design only the mobile frame and scale it up for tablet and desktop.

💡 Hint

Think about how to keep style consistent but layouts optimized for each device.

Separate frames allow device-specific layouts, while components keep styles consistent, ensuring good experience on all devices.