How does a Design System structure looks like with multiple platforms (iOS, Android, Web, etc.)?

Question

Hello world,
I’m setting up a design system in Figma for which I have a library named “core”. Here are all the components which are equal for web, iOS and Android.
Coming from Sketch I did the same.

In addition, I had for Web, iOS and Android a separate file which had components only for their specific usage. So that designers use only components which they are allowed to (for example iOS only).
In Figma, it seems like that everything is inside one file … is that right?

I tried to separate them, but even if I’m not switching on the core library, I still can see and use components in their …
Is there a good explain tutorial or structure for this?
I really appreciate your advices and help &#128591;
Thanks in advance &#x1f450;

Paul_Befort · Accepted Answer

Thanks, Phil, for the advice. I actually did the same, good to hear it’s a way.
The only problem I have with this solution is that I still see ALL elements also from core, even I haven’t activated this library in a different project … As soon as I activate the Web Library I will see also iOS elements if I search for them inside the assets panel … Am I doing something wrong in the library activation?

Phil_Larsen · Answer

You could have the core library, and then a separate library file for iOS and another for Android, etc. It would result in two library files that need to be applied to future files, but that separates the components that are exclusive to certain platforms.

How does a Design System structure looks like with multiple platforms (iOS, Android, Web, etc.)?

4 replies

Cookie policy

Cookie settings

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded

Cookie policy

Cookie settings