@Nikola you might find this demo I made interesting… I use design tokens for breakpoints:
Is it possible to create breakpoints modes like in figma? - #6 by azazy
As the web world moves towards container queries and more flexible units like clamp, I think we might start moving away from breakpoint-based design in favour of thinking more modular/componentised systems. (My thinking on this has long been influenced by my designer-developer pals Heydon Pickering and Andy Bell.)
In some ways, we lean on breakpoints because they gave us control for responsive design. We weren’t just designing one fixed-width view anymore, but there was comfort because we could design a different fixed-width view for mobile, tablet, and desktop, and breakpoints were the magic that would make that work in web browsers.
Ultimately, we as designers could move towards more system-based responsive design in Penpot utilising components and design tokens, without having to introduce new features to the UI (and making it harder for other design use cases.) Design tokens have huge potential because they could be used to support more web-specific (and other niche) use cases. For example:
Imagine you wanted your font sizes to use clamp values for a fluid typography system like Utopia.fyi. You could then enter a clamp calculation as a design token value that is applied as a font size. As long as Penpot could accurately render clamp, you don’t need any new input options in the Penpot UI, and the code (via design tokens) would perfectly reflect the design.
For designing responsively more broadly, I’d love Penpot to support the use case where we can change the sizes of our boards and see how our design elements and components adapt to those sizes, and truly see the benefit of flex and grid layouts. This would encourage us to think about designing more flexibly from the outset.
I’m not sure the best way to implement this… right now Penpot does some clever stuff with adjusting your layout and item properties when you change your board size, which is surely useful for many people, but can break the responsiveness of a layout (as it changes the values you previously set). Perhaps this is an option inside Inspect mode, or its own type of preview.
I’d love to know if anyone else thinks this way! (Or if it’s just my weird brain haha, I’ve had a lot of coffee this Monday morning!)
