I’m curious to hear how the community feels about this topic, especially with the new-ish Figma features like component properties that definitely affect this issue.
I’m starting to create a design system for an app that lives on both iOS and Android. I have a “Foundation” library that houses colors, type styles, high-level elements, etc., and am starting to create the component library. Almost all components will be 1:1 the same between iOS/Android, except for width. We’re designing for a 375px screen for iOS and 360px for Android.
What’s the best way to approach this?
I see two options here:
-
Make one component sized for iOS (eg. a full-width button would be 343px wide to account for 16px margins on the side) and trust that the designers using the system will know to manually resize the components to fit Android.
-
Make iOS and Android variants for everything (eg. iOS button is 343px and the Android variant looks identical but is just shrunk to 328px). When designers place a component, all they have to do is select iOS or Android in the property dropdown.
First option would make building the system much easier (half as many variants to manage), but is potentially messy as you’re assuming the designers will know how to properly use it.
Second option is a lot more work and seems silly to make so many variants just to shrink the width of things by a tiny bit, but would be more intuitive to use.
Thoughts? Am I approaching this all wrong?