Breakpoint-based design in Figma - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is breakpoint-based design in Figma?

Breakpoint-based design is a way to create layouts that change smoothly at specific screen widths, called breakpoints, to make sure designs look good on all device sizes.

beginner

Why do we use breakpoints in design?

We use breakpoints to adjust the layout and content so it fits well on different screen sizes like phones, tablets, and desktops, improving user experience.

intermediate

How do you set breakpoints in Figma?

In Figma, you create frames for different screen widths representing breakpoints, then design each frame to show how the layout changes at that size.

intermediate

What is the difference between fixed and fluid layouts in breakpoint-based design?

Fixed layouts have set widths that don’t change, while fluid layouts adjust their size smoothly between breakpoints to fit the screen better.

beginner

Name a best practice when designing breakpoints.

Design for common device widths like mobile (320-480px), tablet (768px), and desktop (1024px+), and test your design at these breakpoints to ensure usability.

What does a breakpoint represent in design?

A A font size setting

B A color style in the design

C A type of image format

D A specific screen width where layout changes

A breakpoint is a screen width where the design layout adjusts to fit the device better.

Which Figma feature helps you create breakpoint-based designs?

A Frames with different widths

B Text styles

C Plugins only

D Color palettes

Frames with different widths represent breakpoints and help visualize layout changes.

Why is breakpoint-based design important for dashboards?

A To add more colors

B To make dashboards look good on all devices

C To increase file size

D To remove charts

It ensures dashboards are usable and readable on phones, tablets, and desktops.

Which layout type adjusts smoothly between breakpoints?

A Fluid layout

B Fixed layout

C Static layout

D Grid layout

Fluid layouts resize smoothly to fit screen sizes between breakpoints.

At which breakpoint would you typically design for tablets?

A 1440px

B 320px

C 768px

D 1024px

768px is a common breakpoint width for tablets.

Explain how breakpoint-based design improves user experience in dashboards.

Think about how dashboards look on phones vs desktops.

Describe the steps to create a breakpoint-based design in Figma.

Focus on how frames represent different device widths.