Skip to main content
Emma_Oude_Groote_Beverborg
September 20, 2024
Question

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

  • September 20, 2024
  • 5 replies
  • 363 views

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
September 20, 2024

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
September 20, 2024

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
September 20, 2024

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
September 23, 2024

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
September 23, 2024

Okay, thank you for responding!