Skip to main content
Question

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

  • September 20, 2024
  • 5 replies
  • 120 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 comments

5 replies

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
  • 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
  • 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!


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings