Skip to main content
Emma_Oude_Groote_Beverborg
Sep 20, 2024 10:40 AM UTC
Question

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

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?

This topic has been closed for replies.

5 replies

Alamaki
Sep 20, 2024 11:02 AM UTC

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.

Emma_Oude_Groote_Beverborg
Sep 20, 2024 3:09 PM UTC

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?

Pavel_Kiselev
Power Member
Sep 20, 2024 4:02 PM UTC

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

Alamaki
Sep 23, 2024 9:12 AM UTC

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

Emma_Oude_Groote_Beverborg
Sep 23, 2024 10:07 AM UTC

Okay, thank you for responding!