Skip to main content

Using variants for the foundations (for desktop/mobile) or creating 2 separate libraries?


Hey


I’m creating a design system for a Saas that has a desktop design and a app(mobile) design. I’m creating 2 component libraries, one for desktop and one for mobile. I plan to use both libraries in the one document, because I will be creating the desktop and mobile designs in one document.


I need advice on how to structure the styles/foundations (text styles, padding, margin, border radius, grid, icons, colors, etc) for these components. How would you advice to structure and create this?

Variant updating is so buggy I’ve almost stopped using them. I’d go with separate components with naming convention to find both or eiter one as needed.

Hey Alamaki, thanx for your comment! Yes I plan to use separate components.


What’s your take on building foundations for desktop and mobile? Do you use variables (I’m sorry not variants) for that?

Here is some evidence it’s possible oven on pro plan


https://www.figma.com/community/plugin/1297031341980383999/source-foundation


Open n a new playgroup and check for extra scaling options. Variable modes enable various font sizes, spacing and radii


The last bit to address is a mobile specific library that you would have to maintain too. This one is for touch related patterns

Haven’t really tried variable modes yet. Seems useful for that, although I would err on the side of simplicity using them

Okay, thank you for responding!

Reply


Terms & ConditionsCookie settings