{"id":35632,"date":"2022-06-22T08:22:38","date_gmt":"2022-06-22T15:22:38","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=35632"},"modified":"2026-05-08T08:31:24","modified_gmt":"2026-05-08T15:31:24","slug":"mobile-design-systems","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/","title":{"rendered":"Mobile Design Systems \u2013 Tips and Examples"},"content":{"rendered":"<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/t8y9TQGdBdNIniyuxg2STplrx7JYCuJxdCYUO3n1QTMzRi5am6h-1YqOVMjIEZRRxVUWFicf_ET-UHUj1hTKMu8OUwUJOyayyj3CF4zrV8RBpe8B00LUgDW5-Uc_GGUWZRwe3Zl52UqEK2KPmA\" alt=\"\"\/><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p>Many digital products only exist on mobile, but they often adapt web component libraries for native mobile apps. According to a <a href=\"https:\/\/dbanks.design\/blog\/multi-platform\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Clarity 2020 talk<\/a>, <em>&#8220;less than 10% of public design systems support platforms other than the web?&#8221;<\/em><\/p>\n<p>Unlike web-based <a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">design systems<\/a>, mobile design systems must adapt to native operating systems and platform-specific <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI patterns<\/a>.<\/p>\n<p>What if you could sync the code components from a mobile design system and use them in design? UXPin&#8217;s Merge technology allows you to bring coded UI components to UXPin&#8217;s design editor and use them to build functional prototypes. Reach the new heights of consistency. <a href=\"https:\/\/uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Request access to UXPin Merge<\/a>.<\/p>\n<section class=\"discover-merge\">\n<div class=\"discover-merge__container\">\n<div class=\"discover-merge__left\">\n<p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n<p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n<p>            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\"><br \/>\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button><br \/>\n            <\/a>\n        <\/div>\n<div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n<\/p><\/div>\n<\/section>\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}<\/p>\n<p>.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}<\/p>\n<p>.discover-merge__left {\n    width: 50%;\n}<\/p>\n<p>.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}<\/p>\n<p>.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}<\/p>\n<p>.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}<\/p>\n<p>.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}<\/p>\n<p>.discover-merge__button:hover {\n    cursor: pointer;\n}<\/p>\n<p>.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}<\/p>\n<p>@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}<\/p>\n<p>@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }<\/p>\n<p>    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}<\/p>\n<\/style>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\" id=\"h-the-importance-of-a-mobile-design-system\">The Importance of a Mobile Design System<\/h2>\n<p>Many design systems include responsive components, which are great for web app usage but might not be suitable for native mobile applications. For example, UI elements like alerts, snackbars, date pickers, etc., render differently on iOS vs. Android native applications.<\/p>\n<p>It&#8217;s not unusual for an Android app to use a floating action button (FOB), whereas this component doesn&#8217;t exist on iOS, which may confuse Apple users.<\/p>\n<p>So, a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-to-responsive-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">responsive design<\/a> system alone isn&#8217;t enough when designing a native user experience. UX designers must create a mobile design system that adheres to platform-specific policies, guidelines, UI patterns, best practices, and constraints. If you&#8217;re building a mobile app from the ground up, tools like <a href=\"https:\/\/www.adalo.com\" target=\"_blank\" rel=\"noopener noreferrer\">Adalo<\/a>, a no-code app builder that pairs AI-powered generation with a visual canvas to help teams design and publish custom database-driven apps without code, can accelerate development while maintaining consistent design patterns.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-maintaining-cohesion-and-consistency\">Maintaining Cohesion and Consistency<\/h3>\n<p>One of the most significant benefits of a design system is cohesion and consistency. Teams deliver projects with minimal design drift and errors when everyone uses the same component library.<\/p>\n<p>Native applications can disrupt this cohesion and consistency by rendering shapes, sizes, colors, and other UI elements differently to the design system&#8217;s guidelines.<\/p>\n<p>A great example of this inconsistency is <a href=\"https:\/\/bootcamp.uxdesign.cc\/creating-a-mobile-design-system-d5c8dc5612e1\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">how Trade Me&#8217;s component library changed<\/a> after implementing a mobile design system. You will notice that the app&#8217;s buttons looked more like native buttons before implementation. The redesign helped align these components with the web component library to deliver a more consistent and cohesive cross-platform user experience.<\/p>\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/yyEcd7ZXgGHngjquUqV77jFoFFxV5etDtS2_3dHMUwI1LcDtYwdZ4TG7fRV-Asxc3urLVBGQ0hAOD525OJuFYt4tisjKm_FKkuIk-S5BgHb9oNgTCTaRriLJST4GWszev1iTCEmomaNikXQIFg\" alt=\"buttons in Trade Me mobile design systems\" width=\"650\"\/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/bootcamp.uxdesign.cc\/creating-a-mobile-design-system-d5c8dc5612e1\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Source<\/a><\/figcaption><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\" id=\"h-tips-for-creating-a-mobile-design-system\">Tips for Creating a Mobile Design System<\/h2>\n<h3 class=\"wp-block-heading\" id=\"h-identifying-mobile-design-system-components\">Identifying Mobile Design System Components<\/h3>\n<p>Building a mobile design system starts with listing your product&#8217;s components. It&#8217;s good to screenshot user interfaces from iOS and Android versions of your product to visualize your product&#8217;s aesthetics across platforms.<\/p>\n<p>The aim is to identify each UI element while looking for inconsistencies. For example, you might find you have different button styles for iOS and Android, which may differ from your web component library.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-leveraging-native-ui-design-patterns\">Leveraging Native UI Design Patterns<\/h3>\n<p><a href=\"https:\/\/material.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google&#8217;s Material Design<\/a> and <a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/ios\/overview\/themes\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">iOS Human Interface Guidelines<\/a> provide comprehensive libraries of components and documentation for building respective native applications.<\/p>\n<p>UX designers can use this documentation as a foundation to guide design decisions to deliver a familiar user experience. For example, how can designers leverage a feature like Android&#8217;s FOB to enhance the product and user experience? And how will that component look in the product&#8217;s design system?<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-component-library-theming\">Component Library Theming<\/h3>\n<p>If you&#8217;re building a mobile design system from scratch, adapting an open-source <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">component library<\/a> is an excellent strategy for developing and scaling fast.<\/p>\n<p>UX designers can leverage expertly designed component libraries thoroughly tested for usability and accessibility to focus on building and scaling their products instead of creating everything from scratch.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-react-component-libraries\/#h-5-chakra-ui\" target=\"_blank\" rel=\"noreferrer noopener\">Open-source mobile React libraries<\/a> like <a href=\"https:\/\/mui.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MUI<\/a>, <a href=\"https:\/\/rn.mobile.ant.design\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Ant Design Mobile<\/a>, <a href=\"https:\/\/nativebase.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">NativeBase<\/a>, and <a href=\"https:\/\/akveo.github.io\/react-native-ui-kitten\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">UI Kitten<\/a> provide themeable components UX designers can adapt to meet brand and product specifications.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-bottom-up-designing-with-atomic-design\">Bottom-Up Designing With Atomic Design<\/h3>\n<p>Using <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">Brad Frost&#8217;s Atomic Design principles<\/a> gives designers a bottom-up approach to designing elements, components, and UI patterns. The idea is to start from the smallest elements, or atoms, and scale your designs to complete pages.<\/p>\n<p>Applying Atomic Design practices enables designers to create a solid foundation of reusable components to develop and scale a design system. This Atomic approach also encourages the DS team to reuse the same building blocks (<em>&#8220;atoms,&#8221; &#8220;molecules,&#8221; and &#8220;organisms&#8221;<\/em>) for designing new UIs rather than creating new parts from scratch\u2013thus keeping the design system lean and efficient.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-5-great-examples-of-mobile-design-systems\">5 Great Examples of Mobile Design Systems<\/h2>\n<p>These five high-quality open-source mobile design systems offer comprehensive libraries of themeable components for developing native and cross-platform applications.<\/p>\n<p>We&#8217;ve chosen these five because they provide clear design language, UI kits, and component libraries, so designers and engineers can collaborate using the same UI elements. These examples offer dark\/light themes, accessibility features, and adaptive designs for multi-platform product development.<\/p>\n<p>You can customize these mobile design systems to meet brand and product requirements or use the component libraries as inspiration for building your design system from scratch.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-nativebase\">NativeBase<\/h3>\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/mobile-design-system-nativebase-1024x421.png\" alt=\"mobile design system nativebase\" class=\"wp-image-35645\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/mobile-design-system-nativebase-1024x421.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/mobile-design-system-nativebase-700x288.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/mobile-design-system-nativebase-768x316.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/mobile-design-system-nativebase-1536x631.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/mobile-design-system-nativebase-2048x842.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p><a href=\"https:\/\/nativebase.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">NativeBase<\/a> is a cross-platform React toolkit for developing iOS, Android, and web applications. The themeable component library makes it easy to change the global color palette, type scale, font stacks, breakpoints, spacing, border-radius values, and more.<\/p>\n<p>NativeBase is fully accessible using <a href=\"https:\/\/react-native-aria.geekyants.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">React Native Aria<\/a>, <em>&#8220;React Hooks to build accessible React Native design systems,&#8221;<\/em> giving design and engineering teams a solid foundation for building accessible products.<\/p>\n<p>NativeBase includes a component library for engineers and a matching UI kit for designers. The library provides <a href=\"https:\/\/docs.nativebase.io\/getting-started\" target=\"_blank\" rel=\"noreferrer noopener\">comprehensive documentation<\/a> for usage, best practices, theming, and templates for building mobile applications.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-ui-kitten\">UI Kitten<\/h3>\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Zrzut-ekranu-2022-06-22-o-17.19.42-1024x449.png\" alt=\"UI Kitten mobile design system\" class=\"wp-image-35643\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Zrzut-ekranu-2022-06-22-o-17.19.42-1024x449.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Zrzut-ekranu-2022-06-22-o-17.19.42-684x300.png 684w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Zrzut-ekranu-2022-06-22-o-17.19.42-768x337.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Zrzut-ekranu-2022-06-22-o-17.19.42-1536x674.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Zrzut-ekranu-2022-06-22-o-17.19.42-2048x899.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p><a href=\"https:\/\/akveo.github.io\/react-native-ui-kitten\/#kitten-tricks\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">UI Kitten<\/a> is a React Native UI library version of the <a href=\"https:\/\/eva.design\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Eva Design System<\/a>. Designers can use UI Kitten and Eva to develop multi-platform applications for any device. The comprehensive UI ecosystem includes <a href=\"https:\/\/akveo.github.io\/eva-icons\/#\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Eva Icons<\/a> with over 480 commonly-used icons to complement its UI components.<\/p>\n<p>Eva and UI Kitten are highly customizable, with features designed specifically for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/enterprise-design-thinking\/\">enterprise design<\/a>. UI Kitten provides documentation for implementing the design system for new and existing products, with comprehensive <a href=\"https:\/\/akveo.github.io\/react-native-ui-kitten\/docs\/getting-started\/where-to-start#where-to-start\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">step-by-step getting started guides<\/a>.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-material-design-system\">Material Design System<\/h3>\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Zrzut-ekranu-2022-06-22-o-17.18.00-1024x422.png\" alt=\"Material Design Mobile Design System\" class=\"wp-image-35641\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Zrzut-ekranu-2022-06-22-o-17.18.00-1024x422.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Zrzut-ekranu-2022-06-22-o-17.18.00-700x289.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Zrzut-ekranu-2022-06-22-o-17.18.00-768x317.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Zrzut-ekranu-2022-06-22-o-17.18.00-1536x633.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Zrzut-ekranu-2022-06-22-o-17.18.00-2048x844.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p>Google&#8217;s <a href=\"https:\/\/material.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Material Design System<\/a> is one of the largest and most comprehensive design systems in the world. In 2022, Google released Material Design 3, which includes important native updates for foldable devices and Android 12.&nbsp;<\/p>\n<p>Even though Material is a Google\/Android product, the design system includes a library of <a href=\"https:\/\/material.io\/develop\/ios\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">iOS-specific native components<\/a>, so designers can easily build cross-platform applications.<\/p>\n<p>Material Design is highly customizable with theming for color, typography, dark\/light mode, shapes, spacing, and more. Designers also have over 2,500 <a href=\"https:\/\/fonts.google.com\/icons\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Material Symbols<\/a> (icons) in three styles to complement their designs accordingly.<\/p>\n<p>UXPin includes Material Design&#8217;s UI kit and MUI&#8217;s React component library built-in\u2013no additional plugins, extensions, or uploads are required. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to use these component libraries to develop your mobile design system today.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-ant-design-mobile\">Ant Design Mobile<\/h3>\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/ant-design-mobile-system-1024x507.png\" alt=\"ant design mobile system\" class=\"wp-image-35639\" width=\"650\"\/><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p><a href=\"https:\/\/rn.mobile.ant.design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ant Design Mobile<\/a> is an open-source design system used by many Chinese-based organizations, including Alipay, Koubei, and Taobao, to name a few.<\/p>\n<p>The comprehensive design system includes native mobile and web component libraries to build multi-platform digital products. Ant provides platform-specific UI patterns for Android and iOS, so designers simply drag and drop to start prototyping and testing.<\/p>\n<p>Ant Mobile Design offers UI kits for popular design tools and component libraries for React, Vue, and Angular, making it one of the most versatile design systems worldwide.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-rei-cedar\">REI Cedar<\/h3>\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/rei-cedar-design-system-1024x539.png\" alt=\"rei cedar design system\" class=\"wp-image-35635\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/rei-cedar-design-system-1024x539.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/rei-cedar-design-system-570x300.png 570w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/rei-cedar-design-system-768x404.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/rei-cedar-design-system-1536x809.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/rei-cedar-design-system-2048x1078.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p><a href=\"https:\/\/rei.github.io\/rei-cedar-docs\/\" target=\"_blank\" rel=\"noreferrer noopener\">REI&#8217;s Cedar<\/a> is a cross-platform design system with platform-specific (Android, iOS, web, etc.) components and patterns. Cedar&#8217;s excellent documentation includes resources for designers and developers with CodeSandbox examples of every element.<\/p>\n<p>Cedar includes guidelines, behavior, best practices, dos and don&#8217;ts, and accessibility recommendations below every component and UI pattern. The UI kit and component library use design tokens to customize color, sizing, spacing, motion, forms, breakpoints, typography, and more.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-bonus-more-cross-platform-design-systems\">Bonus &#8211; More Cross-Platform Design Systems<\/h3>\n<p>We highly recommend checking out these design systems for inspiration and guidance when developing your own design system.&nbsp;<\/p>\n<p>These design systems are for creating products on the respective platforms rather than building standalone applications, but it&#8217;s helpful to see how these organizations use components, write documentation, etc.<\/p>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/polaris.shopify.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Shopify Polaris<\/a><\/li>\n<li><a href=\"https:\/\/atlassian.design\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Atlassian Design System<\/a><\/li>\n<li><a href=\"https:\/\/developer.microsoft.com\/en-us\/fluentui#\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Microsoft Fluent UI<\/a><\/li>\n<li><a href=\"https:\/\/www.lightningdesignsystem.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Salesforce Lightning Design System<\/a><\/li>\n<li><a href=\"https:\/\/primer.style\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">GitHub Primer<\/a><\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\" id=\"h-building-managing-scaling-and-sharing-mobile-design-systems-in-uxpin\">Building, Managing, Scaling, and Sharing Mobile Design Systems in UXPin<\/h2>\n<p>UXPin offers a solution no matter where you are in design system maturity. You can create your own design system from scratch or import an established code-based component library using our <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge technology<\/a>.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-building-a-design-system-from-scratch\">Building a Design System From Scratch<\/h3>\n<p>Designers can use UXPin&#8217;s built-in design system feature to <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/#creating-a-design-system\" target=\"_blank\" rel=\"noreferrer noopener\">build a design system from scratch<\/a>. UXPin automatically segments the system into Colors, Typography, Assets, and Components, with the option to <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/#adding-descriptions\" target=\"_blank\" rel=\"noreferrer noopener\">add descriptions<\/a> for documentation.<\/p>\n<p>The design system team can <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/#setting-permissions\" target=\"_blank\" rel=\"noreferrer noopener\">set permissions<\/a> for the design system and its components to prevent unauthorized changes. They can also share the design system with team members, external collaborators, and stakeholders\u2013even if they don&#8217;t have an active UXPin account.<\/p>\n<p>Engineers can use the design system&#8217;s style guide to create theme tokens for development to streamline future design handoffs.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-merge-design-and-development\"><em>Merge <\/em>Design and Development<\/h3>\n<p>Use UI coded components from your design system as a single source of truth. Request access to <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a>. Merge syncs code components from a repository to UXPin&#8217;s editor, so designers and engineers use the same design system.<\/p>\n<p>Using the same component library means designers and engineers work within the same constraints, thus streamlining design handoffs and product development workflows.<\/p>\n<p>With standardized, approved components, engineers no longer have to interpret design files, prototypes, and documentation; they simply copy\/paste from the repository and any UXPin changes to begin the development process.<\/p>\n<p>Designers can use code components to build fully functioning prototypes that enhance usability testing with meaningful, actionable results from end-users. Merge also improves feedback from stakeholders who can use and interact with prototypes as they would using the final product. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Request access to UXPin Merge<\/a>.<\/p>\n<div class=\"wp-block-buttons\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Many digital products only exist on mobile, but they often adapt web component libraries for native mobile apps. According to a Clarity 2020 talk, &#8220;less than 10% of public design systems support platforms other than the web?&#8221; Unlike web-based design systems, mobile design systems must adapt to native operating systems and platform-specific UI patterns. What<\/p>\n","protected":false},"author":3,"featured_media":35633,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199,205],"tags":[],"class_list":["post-35632","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems","category-mobile-design"],"yoast_title":"","yoast_metadesc":"Check out 8 examples of great mobile design systems you can use and learn how to do it properly. Read our article.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Mobile Design Systems \u2013 Tips and Examples | UXPin<\/title>\n<meta name=\"description\" content=\"Check out 8 examples of great mobile design systems you can use and learn how to do it properly. Read our article.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mobile Design Systems \u2013 Tips and Examples\" \/>\n<meta property=\"og:description\" content=\"Check out 8 examples of great mobile design systems you can use and learn how to do it properly. Read our article.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-22T15:22:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-08T15:31:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/mobile-design-systems.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mobile-design-systems\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mobile-design-systems\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Mobile Design Systems \u2013 Tips and Examples\",\"datePublished\":\"2022-06-22T15:22:38+00:00\",\"dateModified\":\"2026-05-08T15:31:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mobile-design-systems\\\/\"},\"wordCount\":1660,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mobile-design-systems\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/mobile-design-systems.png\",\"articleSection\":[\"Blog\",\"Design Systems\",\"Mobile Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mobile-design-systems\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mobile-design-systems\\\/\",\"name\":\"Mobile Design Systems \u2013 Tips and Examples | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mobile-design-systems\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mobile-design-systems\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/mobile-design-systems.png\",\"datePublished\":\"2022-06-22T15:22:38+00:00\",\"dateModified\":\"2026-05-08T15:31:24+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Check out 8 examples of great mobile design systems you can use and learn how to do it properly. Read our article.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mobile-design-systems\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mobile-design-systems\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mobile-design-systems\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/mobile-design-systems.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/mobile-design-systems.png\",\"width\":1200,\"height\":600,\"caption\":\"mobile design systems\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mobile-design-systems\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mobile Design Systems \u2013 Tips and Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Mobile Design Systems \u2013 Tips and Examples | UXPin","description":"Check out 8 examples of great mobile design systems you can use and learn how to do it properly. Read our article.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/","og_locale":"en_US","og_type":"article","og_title":"Mobile Design Systems \u2013 Tips and Examples","og_description":"Check out 8 examples of great mobile design systems you can use and learn how to do it properly. Read our article.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/","og_site_name":"Studio by UXPin","article_published_time":"2022-06-22T15:22:38+00:00","article_modified_time":"2026-05-08T15:31:24+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/mobile-design-systems.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Mobile Design Systems \u2013 Tips and Examples","datePublished":"2022-06-22T15:22:38+00:00","dateModified":"2026-05-08T15:31:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/"},"wordCount":1660,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/mobile-design-systems.png","articleSection":["Blog","Design Systems","Mobile Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/","name":"Mobile Design Systems \u2013 Tips and Examples | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/mobile-design-systems.png","datePublished":"2022-06-22T15:22:38+00:00","dateModified":"2026-05-08T15:31:24+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Check out 8 examples of great mobile design systems you can use and learn how to do it properly. Read our article.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/mobile-design-systems.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/mobile-design-systems.png","width":1200,"height":600,"caption":"mobile design systems"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/mobile-design-systems\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Mobile Design Systems \u2013 Tips and Examples"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=35632"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35632\/revisions"}],"predecessor-version":[{"id":59386,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35632\/revisions\/59386"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/35633"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=35632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=35632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=35632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}