UI

Managing platform-specific UI elements

Romina Kavcic

I weigh custom UI elements against platform-specific ones. Here's how I choose the best approach.

  • Assess development time, performance impact, and visual consistency.

  • Weigh tradeoffs.

The goal? Optimal user experience, always.


Choose the best approach:

➡️ Hybrid approach

Mix your UI elements with platform specific components. For example, you might adopt a native iOS calendar on iOS app, but keep the rest of the custom components. This way, our app feels native yet distinctly ours.

➡️ Platform-First design

In this case we would use only platform specific UI elements. An iOS app would follow Apple's design principles for a native experience. An Android app would use Material Design for user familiarity.


🚨 Structure libraries

Regardless of your choice, keep platform-specific elements out of your custom library. If using Figma Variables or Tokens Studio, create extra design tokens and a separate library for platform-specific styles and components.


Each approach has its advantages, and the best choice will depend on your product goals. Good luck 🙌


Read more:

What are the best practices for implementing platform-specific design guidelines? (Linkedin)

🔗 Read the article

5 Best Practices for Designing Cross-Platform UI/UX in 2024

🔗 Read the article

The Ultimate Showdown: Flutter Widgets vs. Traditional UI Elements

🔗 Read the article

Cross-platform app design guide- Android & iOS

🔗 Read the article

I'm Romina Kavcic. I coach design teams on implementing design systems, optimizing design processes, and developing design strategy.

I'm Romina Kavcic. I coach design teams on implementing design systems, optimizing design processes, and developing design strategy.

© 2022 - 2024 The Design System Guide by Romina Kavcic

© 2022 - 2024 The Design System Guide by Romina Kavcic

© 2022 - 2024 The Design System Guide by Romina Kavcic