Figma Support Forum

Global or individual design system?

Hi all,

I’m a UX Designer for a software company and my goal next year to have a well structured design system.

We have our product on 5 different platforms (iOS, Android, Web, TV, and Apple TV) All these platforms have their unique users, some specific designs, interactions, animations and UI.

But our design language, the look and feel is so similar. CTAs are same, colours are same, typography is same so most of the foundations are same across all platforms.

I have one design system created in Figma at the moment which we are using for the Web. When I need a component for iOS I use the Web’s components and maybe slightly tweak it.

My question is do you think I need to have 5 different design systems for each platform or one global design system to rule all?

Also, can you copy across the components from one design system to another?

Creating 5 design systems sounds too much work but having one, I need to be so specific for each time I design a component.

Would love to hear your opinions and experiences.

Thanks

Hi Umut_Aydin,

I think it would be helpful to read Shopify’s experience on multi-platform design systems.

The gist their blog post is that one design system was seen as too much of a “bible”, and often lead to stalemate-type situations. In the end Shopify decided to make a split.

(P.S. I also love the couch anecdote in there. Somebody ordered a purple couch in the color described in the design system :laughing: )

Thank you for the reply. I think that’s a great article and it almost validates what I had in mind. But I think I was questioning myself because of making 5 different design systems for each platform.

So do you think having been worked on one design system so far (Web) can I easily transfer it to other platforms and keep the variants, themes, names etc? or have to rename and link them all over again?

Thank you

What some companies do is use a global library for tokens that are going to stay the same. E.g. a certain red is your brand color. Then you’d load the brand asset library as well as the web specific library.

In my opinion this adds a layer of complexity. Personally I would look at which platforms have the most commonality (I’d say mobile - web - tv) and make three libraries. If you have a lot of resources to maintain things, maybe make more specific libraries.

Now, you are saying they have so many commonalities, so maybe for your company you’d consider just a single library.

The answer really depends on how much difference there is between the components.

Hey, thanks for the advice. I think creating a design token (foundation) file in Figma that will apply to all 5 platforms might work.

I still don’t know what’s the best way to implement this, it’s actually quite time consuming changing assets across each platform when there’s a change.

For example, we’ve been updating our icon library, button shape and colour. I have at the moment 3 Figma library that apply to each platform (web, apps tv).

Web and apps share the same buttons, icons shadow typography etc. I’ve been making changes in one and have to jump back forth between app and web.

I think your suggestion make sense. Maybe Web, ios and Android can chare one library and Apple tv and Google TV can share one library.

Would love to hear others’ suggestions
thanks