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.
I vote to go with the first option! It’s good to trust your team (or if you don’t trust your team, practicing beginning to trust them). And if they don’t use the component as intended then that gives you an opportunity to build trust and invite them into the process: ask them for feedback on what will help them work accurately and efficiently. It may be documentation, for example!
On the tactical end of things I’d say is that if the architecture and visual design of the components will truly be 1:1 no matter the device (iOS v Android) then I think the added bulk of 2x-ing your variant sets isn’t worth it. Remember, Figma loads all variants in the background when you drop an instance on the canvas, so if you’re concerned about file performance and memory usage then option 2 is a riskier path to embark upon.
Ah! And another downside to using variants to manage device/OS is you’ll have to choose one of these device types as your default. if it’s iOS, then designers working on Android will have that extra adjustment to make with every component they drop onto the canvas.