Skip to main content
Question

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

  • September 20, 2024
  • 5 replies
  • 215 views
Emma_Oude_Groote_Beverborg

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
  • Alamaki
  • 48 replies
  • 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

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
  • Pavel_Kiselev
  • Power Member
  • 438 replies
  • 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
  • Alamaki
  • 48 replies
  • 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

Okay, thank you for responding!

Terms & ConditionsCookie settingsAccessibility statement