Skip to main content
Question

Strategies for handling different breakpoints for a component?


AlicePackard

What strategies have folks found useful in managing breakpoints for a component? There’s a few factors that I think can make this tricky:

  • The size of the component (as in, “atoms”, “molecules”, “organisms” etc. … a checkbox component is much less likely to need to worry about breakpoint, whereas a global navigation component would)
  • The complexity of its composition (how much stuff is inside it)
  • The nature of the product (is it a web app, a marketing site, a etc)

I also think about all the different options we have at our disposal, natively in Figma:

  • Variants
  • Separate components (using slash-naming, frames, and pages to create folders or groups of components that related)
  • Multiple libraries (e.g. having a mobile library VS a desktop library)

This is just an off-the-top-of-my-head list—what other factors do you consider when you’re deciding how to approach different breakpoints for a component? And do you sometimes use different approaches, or do you commit to one and stick with it (e.g. always using variants to manage breakpoint)?

0 replies

Be the first to reply!

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings