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.

Practice

1.

What is the main purpose of using device-specific frames in Figma?

easy

A. To design layouts optimized for mobile, tablet, and desktop screens

B. To add animations to your design

C. To create 3D models within your design

D. To export designs only as PDFs

Solution

1. Step 1: Understand device-specific frames

   Device-specific frames are preset sizes in Figma for mobile, tablet, and desktop screens.

2. Step 2: Identify their purpose

   They help designers create layouts that fit each device's screen size properly.

3. Final Answer:

   To design layouts optimized for mobile, tablet, and desktop screens -> Option A

4. Quick Check:

   Device-specific frames = optimized layouts [OK]

Hint: Remember: device frames match screen sizes for better design [OK]

Common Mistakes:

• Confusing frames with animation tools
• Thinking frames create 3D models
• Assuming frames only export PDFs

2.

Which of the following is the correct way to add a mobile device frame in Figma?

1. Click Frame tool
2. Select Mobile preset
3. Draw frame on canvas

easy

A. Use Rectangle tool and resize manually to mobile size

B. Click Text tool, type 'Mobile', then draw frame

C. Import a mobile image and trace it

D. Click Frame tool, select Mobile preset, then draw frame on canvas

Solution

1. Step 1: Use Frame tool for device frames

   Figma's Frame tool includes presets for devices like Mobile, Tablet, Desktop.

2. Step 2: Select Mobile preset and draw

   Selecting the Mobile preset sets the correct size automatically when you draw the frame.

3. Final Answer:

   Click Frame tool, select Mobile preset, then draw frame on canvas -> Option D

4. Quick Check:

   Frame tool + Mobile preset = correct method [OK]

Hint: Use Frame tool presets for exact device sizes [OK]

Common Mistakes:

• Using Text tool instead of Frame tool
• Manually resizing rectangles instead of presets
• Importing images instead of using frames

3.

Given a desktop frame of width 1440px and a button constrained to the left and right edges, what happens if you resize the frame to 1200px width?

medium

A. The button width shrinks to fit the new frame width

B. The button stays the same size and overflows the frame

C. The button disappears from the frame

D. The button moves to the center but keeps original width

Solution

1. Step 1: Understand constraints on button

   Constraining left and right edges means the button resizes horizontally with the frame.

2. Step 2: Effect of resizing frame width

   When the frame width shrinks from 1440px to 1200px, the button width also shrinks to fit inside.

3. Final Answer:

   The button width shrinks to fit the new frame width -> Option A

4. Quick Check:

   Left-right constraints = button resizes [OK]

Hint: Left-right constraints resize width with frame [OK]

Common Mistakes:

• Assuming button size stays fixed
• Thinking button disappears
• Believing button centers but keeps size

4.

You created a tablet frame and placed an image inside it. The image is set to fixed size but you want it to resize proportionally when the frame changes size. What is the error and how to fix it?

medium

A. You must group the image with the frame to resize together

B. The image's constraints are set to 'Fixed'; change constraints to 'Scale' to resize proportionally

C. The image is raster; convert to vector to resize

D. The frame size is locked; unlock it to resize the image

Solution

1. Step 1: Identify the problem with fixed size

   Fixed size means the image does not change size when the frame resizes.

2. Step 2: Change constraints to allow scaling

   Setting constraints to 'Scale' makes the image resize proportionally with the frame.

3. Final Answer:

   The image's constraints are set to 'Fixed'; change constraints to 'Scale' to resize proportionally -> Option B

4. Quick Check:

   Fixed size blocks resizing; use Scale constraints [OK]

Hint: Use 'Scale' constraints for proportional resizing [OK]

Common Mistakes:

• Trying to unlock frame instead of changing constraints
• Confusing raster/vector with resizing behavior
• Grouping instead of adjusting constraints

5.

You want to design a responsive dashboard that works on mobile, tablet, and desktop using device-specific frames. Which approach best ensures your design adapts smoothly across devices?

hard

A. Use one large frame and crop it differently for each device

B. Design only for desktop and scale down manually for other devices

C. Create separate frames for each device preset and use constraints to adjust elements within each frame

D. Design only for mobile and stretch elements for larger screens

Solution

1. Step 1: Understand device-specific frames for responsiveness

   Using separate frames for mobile, tablet, and desktop lets you design layouts tailored to each screen size.

2. Step 2: Use constraints inside each frame

   Constraints help elements resize or reposition smoothly when frame size changes, ensuring adaptability.

3. Final Answer:

   Create separate frames for each device preset and use constraints to adjust elements within each frame -> Option C

4. Quick Check:

   Separate frames + constraints = smooth responsive design [OK]

Hint: Use separate frames plus constraints for best responsiveness [OK]

Common Mistakes:

• Designing only for desktop or mobile and scaling manually
• Using one frame and cropping instead of designing per device
• Ignoring constraints for element resizing