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

Ask the community
1

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?

2

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.

3

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?

4

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

1 Like
5

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

6

Okay, thank you for responding!