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)?