Bird
Raised Fist0
Figmabi_tool~5 mins

Why responsive design serves all devices in Figma - Why Use It

Choose your learning style10 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction
Responsive design helps your dashboards and reports look good and work well on any device. It solves the problem of charts and tables being too big or too small on phones, tablets, or desktops.
When your sales report needs to be viewed on both desktop and mobile phones without zooming or scrolling horizontally
When your marketing dashboard should adjust layout automatically for tablets and laptops
When you want your data visualizations to be clear and readable on different screen sizes
When users access your reports from different devices and you want a consistent experience
When you want to avoid creating separate versions of the same report for each device
Steps
Step 1: Open your report file
- Figma main workspace
Your report design appears on the canvas
Step 2: Select the frame containing your dashboard
- Layers panel or directly on canvas
Frame is highlighted and its properties show in the right sidebar
Step 3: Click on the 'Constraints' section in the right sidebar
- Right sidebar under Design tab
Constraint options appear allowing you to set how elements resize
Step 4: Set horizontal and vertical constraints for each element to 'Left and Right' or 'Scale'
- Constraints section for each selected element
Elements will resize or move to fit different screen widths and heights
💡 Use 'Scale' to resize elements proportionally, 'Left and Right' to stretch between edges
Step 5: Preview your design on different device frames
- Use Figma's device preview or resize the frame manually
You see how your dashboard adjusts layout and size on phones, tablets, and desktops
Before vs After
Before
Dashboard frame fixed at 1200x800 pixels, charts overflow or get cut off on smaller screens
After
Dashboard frame resizes to 375x667 pixels for phone, charts and tables adjust width and height to fit without overflow
Settings Reference
Constraints
📍 Right sidebar under Design tab when a frame or element is selected
Controls how elements resize or move when the frame size changes
Default: Left and Top
Frame size
📍 Properties panel at the top when a frame is selected
Defines the canvas size for your design to simulate different devices
Default: Custom
Common Mistakes
Not setting constraints on elements
Elements stay fixed in size and position, causing layout issues on different devices
Set appropriate constraints like 'Left and Right' or 'Scale' so elements adapt when frame size changes
Using fixed pixel sizes for all elements
Fixed sizes do not adjust on smaller or larger screens, making content hard to read or clipped
Use relative sizing and constraints to allow elements to resize smoothly
Summary
Responsive design makes dashboards look good on any device by adjusting layout and size automatically
Use Figma's constraints settings to control how elements resize or move inside frames
Always preview your design on different device sizes to ensure readability and usability

Practice

(1/5)
1. Why is responsive design important for websites?
Responsive design means:
easy
A. The website uses only one fixed size for all devices.
B. The website adjusts its layout to fit different screen sizes.
C. The website works only on desktop computers.
D. The website ignores mobile users.

Solution

  1. Step 1: Understand responsive design purpose

    Responsive design means the website changes layout to fit screens of all sizes.

  2. Step 2: Compare options with definition

    Only "The website adjusts its layout to fit different screen sizes." describes adjusting layout for different screen sizes, matching responsive design.

  3. Final Answer:

    The website adjusts its layout to fit different screen sizes. -> Option B

  4. Quick Check:

    Responsive design = layout adjusts to screen size [OK]
Hint: Responsive means adapting layout to screen size [OK]
Common Mistakes:
  • Thinking responsive means fixed size
  • Assuming it works only on desktop
  • Ignoring mobile users
2. Which CSS technique is commonly used in responsive design to adjust layouts?
Choose the correct syntax example:
easy
A. @media (max-width: 600px) { body { font-size: 1.2rem; } }
B. font-size: 16px fixed;
C. layout: fixed 600px;
D. @screen 600px { body { font-size: 1.2rem; } }

Solution

  1. Step 1: Identify correct media query syntax

    CSS media queries use @media (condition) { rules } to apply styles based on screen size.

  2. Step 2: Check options for valid syntax

    @media (max-width: 600px) { body { font-size: 1.2rem; } } uses correct @media syntax; others are invalid CSS.

  3. Final Answer:

    @media (max-width: 600px) { body { font-size: 1.2rem; } } -> Option A

  4. Quick Check:

    Media queries use @media (condition) [OK]
Hint: Look for '@media' keyword for responsive CSS [OK]
Common Mistakes:
  • Using invalid CSS like '@screen'
  • Adding 'fixed' keyword incorrectly
  • Confusing px with rem units
3. Given this CSS snippet:
@media (max-width: 500px) { .menu { display: none; } }

What happens when the screen width is 480px?
medium
A. The menu changes color.
B. The menu stays visible.
C. The menu is hidden from view.
D. The menu moves to the bottom.

Solution

  1. Step 1: Understand media query condition

    The rule applies when screen width is 500px or less.

  2. Step 2: Apply condition to 480px screen

    Since 480px is less than 500px, the CSS inside applies, hiding the menu.

  3. Final Answer:

    The menu is hidden from view. -> Option C

  4. Quick Check:

    Screen ≤ 500px hides menu [OK]
Hint: Check if screen size meets media query condition [OK]
Common Mistakes:
  • Ignoring media query conditions
  • Assuming menu changes color without code
  • Thinking menu moves without position rules
4. This CSS code is meant to hide an image on small screens but it doesn't work:
@media max-width: 400px { img { display: none; } }

What is the error?
medium
A. Media queries don't work on images.
B. Wrong selector for images.
C. display: none; is invalid.
D. Missing parentheses around max-width condition.

Solution

  1. Step 1: Check media query syntax

    Media queries require parentheses around conditions, like @media (max-width: 400px).

  2. Step 2: Identify missing parentheses

    The code misses parentheses, so CSS is invalid and ignored.

  3. Final Answer:

    Missing parentheses around max-width condition. -> Option D

  4. Quick Check:

    Media queries need parentheses [OK]
Hint: Always wrap media conditions in parentheses [OK]
Common Mistakes:
  • Omitting parentheses in @media
  • Using wrong selectors
  • Thinking display:none is invalid
5. You want a button in Figma to look good on phones and desktops. Which approach best uses responsive design principles?
hard
A. Use flexible width and height with constraints, plus test on different screen sizes.
B. Set fixed pixel sizes for the button and ignore resizing.
C. Design only for desktop size and scale down manually.
D. Create separate buttons for each device without constraints.

Solution

  1. Step 1: Understand responsive design in Figma

    Responsive design uses flexible sizes and constraints to adapt elements to screen sizes.

  2. Step 2: Evaluate options for best practice

    "Use flexible width and height with constraints, plus test on different screen sizes." uses flexible sizing and testing, matching responsive design principles.

  3. Final Answer:

    Use flexible width and height with constraints, plus test on different screen sizes. -> Option A

  4. Quick Check:

    Flexible constraints + testing = responsive design [OK]
Hint: Use flexible constraints and test on devices [OK]
Common Mistakes:
  • Using fixed sizes only
  • Designing for one device only
  • Ignoring testing on multiple screens