{"id":50516,"date":"2023-10-09T02:44:20","date_gmt":"2023-10-09T09:44:20","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=50516"},"modified":"2023-10-19T04:41:39","modified_gmt":"2023-10-19T11:41:39","slug":"design-system-contribution-model","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-contribution-model\/","title":{"rendered":"Design System Contribution Model \u2013 How to Set it Up"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/design-system-contribution-model-1024x512.png\" alt=\"design system contribution model\" class=\"wp-image-50517\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/design-system-contribution-model-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/design-system-contribution-model-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/design-system-contribution-model-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/design-system-contribution-model.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Navigating design system contribution can be challenging, often demanding coordinated efforts from multiple stakeholders. This article serves as a comprehensive guide, laying down the structured roadmap of a design system contribution model to standardize practices and ensure quality. From identifying key stakeholders to creating an agile workflow for contributions, it covers every aspect, including how tools can boost your contribution process.<\/p>\n\n\n\n<p><strong>Key takeaways:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A Design System Contribution Model standardizes how new elements are added to a design system, ensuring quality and consistency.<\/li>\n\n\n\n<li>Governance, versioning, and documentation are essential elements in controlling and tracking the evolution of a design system.<\/li>\n\n\n\n<li>UXPin&#8217;s Patterns feature accelerates the contribution process, allowing quick iterations and real-world testing of new design system components.<\/li>\n<\/ul>\n\n\n\n<p>Streamline your design system contribution process while bridging the gap between design and development with UXPin&#8217;s Merge technology. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page<\/a> for more details and how to request access.<\/p>\n\n\n\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            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button>\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    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.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}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.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}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-a-design-system-contribution-model\">What is a Design System Contribution Model?<\/h2>\n\n\n\n<p>A design system contribution model is a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-rodmap\/\" target=\"_blank\" rel=\"noreferrer noopener\">structured roadmap<\/a> for adding or modifying new elements in a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-design-system-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system<\/a>. It outlines:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Who<\/strong> can contribute<\/li>\n\n\n\n<li><strong>What<\/strong> qualifies for a contribution<\/li>\n\n\n\n<li><strong>How<\/strong> to go from proposal to implementation<\/li>\n<\/ul>\n\n\n\n<p>This model standardizes practices, ensuring that the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-structure\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system evolves<\/a> in a consistent and controlled manner.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-do-you-need-a-design-system-contribution-model\">Why Do You Need a Design System Contribution Model?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/09\/user-search-user-centered.webp\" alt=\"\" class=\"wp-image-50507\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/09\/user-search-user-centered.webp 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/09\/user-search-user-centered-700x280.webp 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Organizations use contribution models to overcome the challenges of decentralized <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/digital-product-development-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">digital product development<\/a> using distributed teams. Design systems often span multiple teams and departments, from designers to developers to product managers. Without a structured approach to contributions, you risk inconsistencies, duplicated efforts, and the dilution of the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system&#8217;s quality<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-a-contribution-model-helps-evolve-a-design-system\">How a Contribution Model Helps Evolve a Design System<\/h2>\n\n\n\n<p>The contribution model safeguards a design system&#8217;s integrity. It acts as a quality filter, ensuring that every addition aligns with the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-metrics\/\" target=\"_blank\" rel=\"noreferrer noopener\">system&#8217;s goals and standards<\/a>. Setting clear rules and processes helps coordinate multiple stakeholders, thus streamlining efforts and fostering collaboration. This model keeps the evolving design system coherent and efficient.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-who-are-the-stakeholders-in-a-design-system-contribution-model\">Who are the Stakeholders in a Design System Contribution Model?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/mobile-screens-pencils-prototyping.png\" alt=\"mobile screens pencils prototyping\" class=\"wp-image-34093\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/mobile-screens-pencils-prototyping.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/mobile-screens-pencils-prototyping-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Here are five typical <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/stakeholder-analysis-for-product-teams\/\" target=\"_blank\" rel=\"noreferrer noopener\">stakeholders<\/a> for a design system contribution model:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Designers<\/li>\n\n\n\n<li>Developers<\/li>\n\n\n\n<li>Product Managers<\/li>\n\n\n\n<li>Quality Assurance Engineers<\/li>\n\n\n\n<li>Stakeholders<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-designers\">Designers<\/h3>\n\n\n\n<p>Designers are the primary creators and curators of the design system. They contribute graphic elements, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI components<\/a>, and layout templates. Their expertise ensures the design system aligns with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-needs\/\" target=\"_blank\" rel=\"noreferrer noopener\">user needs<\/a>, style guide, and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-language\/\" target=\"_blank\" rel=\"noreferrer noopener\">design language<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-developers\">Developers<\/h3>\n\n\n\n<p>Developers implement the designs into <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/\" target=\"_blank\" rel=\"noreferrer noopener\">reusable code<\/a>. They ensure the design system remains technically <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-review-template-balancing-desirability-viability-feasibility\/\" target=\"_blank\" rel=\"noreferrer noopener\">feasible and efficient<\/a>, turning design assets into functional components. Their contributions often include code samples, technical documentation, and updates on platform limitations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-product-managers\">Product Managers<\/h3>\n\n\n\n<p>Product Managers are the bridge between <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-goals-vs-business-goals-finding-the-ux-tipping-point\/\" target=\"_blank\" rel=\"noreferrer noopener\">business objectives and design goals<\/a>. They prioritize contributions based on project needs, timelines, and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-strategy\/\" target=\"_blank\" rel=\"noreferrer noopener\">strategic alignment<\/a>. By defining the scope and setting priorities, they control the rate and direction at which the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-maturity-how-to-improve-your-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system evolves<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-quality-assurance-engineers\">Quality Assurance Engineers<\/h3>\n\n\n\n<p>QA Engineers ensure that both the design and code meet quality benchmarks. They validate that contributions adhere to defined guidelines and don&#8217;t introduce errors or inconsistencies. Their role is critical for maintaining the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/advice-to-new-design-system-managers\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system&#8217;s reliability and integrity<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-stakeholders\">Stakeholders<\/h3>\n\n\n\n<p>Management includes executives and decision-makers who provide the resources and support for the design system. They may not contribute directly, but their approval often dictates the scope and scale of contributions. The design system team must inform and align management to ensure long-term investment in the system.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-examples-of-design-system-contribution-models\">Examples of Design System Contribution Models<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example-1-pluralsight\">Example #1: Pluralsight<\/h3>\n\n\n\n<p><a href=\"https:\/\/design-system.pluralsight.com\/guides\/contribute\">Pluralsight&#8217;s design system contribution model<\/a> employs a structured approach, facilitating bug reporting through GitHub issues and feature proposals via bi-weekly meetups or GitHub.&nbsp;<\/p>\n\n\n\n<p>Contributing code follows a specific guide and demands adherence to coding conventions, thorough testing, and the use of the design system itself in new components.&nbsp;<\/p>\n\n\n\n<p>Submissions go through Pull Requests (PRs), which require review by the Design System team, often involving multiple rounds of feedback. The Design System team prioritizes the review of submitted PRs within a 7-day window and updates affected packages after merging. The process encourages teams to contribute regularly and real-world testing of the newly implemented features.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example-2-atlassian\">Example #2: Atlassian<\/h3>\n\n\n\n<p><a href=\"https:\/\/atlassian.design\/resources\/contribution\">Atlassian&#8217;s design system contribution model<\/a> emphasizes participation and contribution. Participation includes open communication via Slack channels and bi-weekly Design System sparring sessions for robust feedback.&nbsp;<\/p>\n\n\n\n<p>The design system team only accepts specific contributions: code bug fixes, Figma library corrections, and documentation updates. It does not accept small enhancements or major changes.<\/p>\n\n\n\n<p>The restriction on larger contributions is due to the time needed to consider the system-wide impact, but the company encourages engagement through participation channels for ongoing collaboration and support.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example-3-gov-uk\">Example #3: GOV.UK<\/h3>\n\n\n\n<p><a href=\"https:\/\/design-system.service.gov.uk\/community\/contribution-criteria\/\">GOV.UK&#8217;s Design System has a strict contribution model<\/a> that ensures high-quality components and patterns. Contributions begin with a proposal demonstrating a new component or pattern&#8217;s usefulness and uniqueness. Proposals meeting these criteria undergo a review by the Design System working group.<\/p>\n\n\n\n<p>Before publication, the Design System working group scrutinizes the implementation to ensure it is usable, consistent, and versatile based on defined criteria, including user research, coding standards, and versatility across services.<\/p>\n\n\n\n<p>For community resources or tools linked to the Design System, a set of checks ensures it has a clear owner, aligns with the system&#8217;s standards, and meets other requirements, including documentation and support.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example-4-zalando\">Example #4: Zalando<\/h3>\n\n\n\n<p>Zalando&#8217;s design system relies on a contribution model that balances centralized governance with decentralized contributions.&nbsp;<\/p>\n\n\n\n<p>A central team called ZDS mainly maintains the design system and provides standard components and styles to feature teams.&nbsp;<\/p>\n\n\n\n<p>When these feature teams, which focus on different segments of the customer journey, identify a need for a new component or modification, they reach out to the ZDS team. Teams submit contributions, ranging from light (minor tweaks) to heavy (new components), through a Google Form that updates a GitHub board for tracking.<\/p>\n\n\n\n<p>The contribution process is structured and involves multiple steps, including proposal, kick-off, collaboration, and review. ZDS hosts weekly meetings to review contribution tickets and provides &#8220;Open House&#8221; sessions for in-depth discussions. Communication and collaboration are essential, with contributors encouraged to document everything on GitHub and involve the right stakeholders for effective decision-making.<\/p>\n\n\n\n<p>After ZDS finalizes a contribution, several steps ensure the update is well-communicated and integrated before merging the Pull Request. These include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updating the design system documentation and design files,<\/li>\n\n\n\n<li>Showcasing changes in a weekly demo<\/li>\n\n\n\n<li>Sending out email newsletters to keep both designers and developers in the loop.<\/li>\n<\/ul>\n\n\n\n<p>This holistic approach ensures that Zalando&#8217;s design system is consistent yet flexible to the needs of a large organization.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example-5-nord-health\">Example #5: Nord Health<\/h3>\n\n\n\n<p>Nord&#8217;s contribution model balances centralized governance and community input. Product teams can propose new features or design tweaks that fit their needs, while a central design system team oversees the overall direction, ensuring quality and consistency.&nbsp;<\/p>\n\n\n\n<p>The design system team categorizes contributions into <em>light<\/em>, <em>medium<\/em>, and <em>heavy<\/em>. Teams submit their ideas through a contribution ticket that syncs to an issue tracker backlog for review every Monday.<\/p>\n\n\n\n<p>The contribution process involves multiple steps, starting with an initial conversation to understand the requirement and avoid rework. The design system team schedules a kick-off meeting for medium and heavy contributions to finalize the scope and timelines. Nord values collaboration and often pairs its team members with the contributing product team to focus on specific requirements.<\/p>\n\n\n\n<p>Nord provides a comprehensive set of tools and guidelines for contributors, from a Figma Design file and GitHub repository to Slack channels and various design guidelines. These supporting resources facilitate a smooth contribution process and ensure all new additions align with Nord&#8217;s high standards for accessibility, usability, and design consistency.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-do-you-need-to-create-a-design-system-contribution-model\">What do you Need to Create a Design System Contribution Model?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/01\/continuous-discovery-helps-keep-track-of-trends.png\" alt=\"\" class=\"wp-image-38793\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/01\/continuous-discovery-helps-keep-track-of-trends.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/01\/continuous-discovery-helps-keep-track-of-trends-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-governance-who-owns-the-design-system\">Governance: Who owns the design system?<\/h3>\n\n\n\n<p>Ownership determines control and accountability. Designate a core team to govern the design system. This team sets guidelines, approves contributions, and ensures the system meets <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-goals-vs-business-goals-finding-the-ux-tipping-point\/\">user needs and business goals<\/a>. Without clear ownership, you risk creating a fragmented system.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-versioning-how-to-manage-updates\">Versioning: How to manage updates?<\/h3>\n\n\n\n<p>Control design system updates through a robust versioning strategy by implementing <a href=\"https:\/\/docs.npmjs.com\/about-semantic-versioning\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">semantic versioning<\/a> to differentiate between minor tweaks, feature additions, and breaking changes. This approach minimizes disruption while allowing the system to evolve and adapt.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/version-control-for-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Version control<\/a> prevents conflicts and keeps everyone on the same page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-documentation-standards-what-should-be-included\">Documentation standards: What should be included?<\/h3>\n\n\n\n<p>Each component or guideline should have documentation detailing its purpose, usage scenarios, and limitations. A well-documented system accelerates onboarding and encourages consistent implementation across projects.<\/p>\n\n\n\n<p>Read <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-documentation-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">this article to learn more about documenting design systems<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-create-a-design-system-contribution-process\">How to Create a Design System Contribution Process<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/success-done-pencil.png\" alt=\"success done pencil\" class=\"wp-image-33353\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/success-done-pencil.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/success-done-pencil-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>The design system contribution process is a structured workflow that guides how team members propose, develop, review, and integrate new features (components, patterns, guidelines, etc.) into the existing design system.<\/p>\n\n\n\n<p>This process involves initial evaluation based on set criteria, an internal review of proposals, a collaborative phase of design and development, and a final review and approval by designated stakeholders.<\/p>\n\n\n\n<p>Here are five key steps of a typical contribution process or workflow.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-perform-initial-evaluation\">Perform initial evaluation<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Decide what you aim to contribute\u2013a new UI component, design pattern, or a set of guidelines. Clearly defining the type of contribution filters out irrelevant or redundant inputs right from the start.<\/li>\n\n\n\n<li>Set rigid criteria for what makes a valid contribution. Criteria could range from code quality to relevance and usability.<\/li>\n\n\n\n<li>Create a checklist to evaluate contributions quickly. If a contribution fails the checklist, it doesn&#8217;t proceed to the next stage. This step saves time and ensures quality.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Make a plan<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Outline the submission process. Use templates to standardize proposal submissions, ensuring contributors provide all necessary information.<\/li>\n\n\n\n<li>Describe your internal review process, including automated checks, peer reviews, and reviews from governing teams.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Pitch it in a presentation<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Invite stakeholders for a feedback round. This step ensures the proposal aligns with both user needs and business goals.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-the-contribution-model\">Design the contribution model<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clarify the collaboration process between designers and developers. Pinpoint which tools facilitate effective communication and design handoffs.<\/li>\n\n\n\n<li>Specify the tools and platforms teams must use in the development and design stages. Uniform tools enhance collaboration and reduce friction.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-seek-approval\">Seek approval<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Determine how many review cycles a contribution goes through and what each process entails. Multiple rounds can ensure rigor but avoid needless complexity.<\/li>\n\n\n\n<li>State who decides whether a contribution gets accepted or rejected\u2013<em>typically the governance team or a lead stakeholder, maintaining the system&#8217;s integrity.<\/em><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-streamlining-design-system-contribution-with-uxpin\">Streamlining Design System Contribution with UXPin<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/merge\/patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Patterns<\/a> streamlines contribution by empowering designers to prototype and test code components in the design process. It eliminates the need to develop new patterns and components before testing, letting designers instantly create, test, and share new patterns by combining existing <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge<\/a> UI elements.\u00a0<\/p>\n\n\n\n<p>For example, a team working on an eCommerce platform can quickly assemble a new product card for the homepage with updated micro-interactions, use Patterns to save it, and pass it to developers and other designers for immediate feedback and implementation.<\/p>\n\n\n\n<p>This agile workflow accelerates the contribution process, allowing quick iterations and real-world testing. <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Patterns<\/a> feature ensures that all contributions are not just theoretical but immediately usable, bridging the gap between design and development teams. By using Patterns, you&#8217;re not just contributing to a design system\u2013you&#8217;re making it more dynamic, collaborative, and aligned with the needs of your evolving product.<\/p>\n\n\n\n<p>Evolve your design system with the world&#8217;s most advanced UX design tool. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page<\/a> for more details and how to request access.<\/p>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover Merge<\/a><\/center><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Navigating design system contribution can be challenging, often demanding coordinated efforts from multiple stakeholders. This article serves as a comprehensive guide, laying down the structured roadmap of a design system contribution model to standardize practices and ensure quality. From identifying key stakeholders to creating an agile workflow for contributions, it covers every aspect, including how<\/p>\n","protected":false},"author":3,"featured_media":50517,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199],"tags":[],"class_list":["post-50516","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems"],"yoast_title":"","yoast_metadesc":"Let's learn about setting up design system contribution model. From a definition, benefits to examples \u2013 find out how to do it right.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Design System Contribution Model \u2013 How to Set it Up | UXPin<\/title>\n<meta name=\"description\" content=\"Let&#039;s learn about setting up design system contribution model. From a definition, benefits to examples \u2013 find out how to do it right.\" \/>\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\/design-system-contribution-model\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design System Contribution Model \u2013 How to Set it Up\" \/>\n<meta property=\"og:description\" content=\"Let&#039;s learn about setting up design system contribution model. From a definition, benefits to examples \u2013 find out how to do it right.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-contribution-model\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-09T09:44:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-19T11:41:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/design-system-contribution-model.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=\"10 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\\\/design-system-contribution-model\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-contribution-model\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Design System Contribution Model \u2013 How to Set it Up\",\"datePublished\":\"2023-10-09T09:44:20+00:00\",\"dateModified\":\"2023-10-19T11:41:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-contribution-model\\\/\"},\"wordCount\":1912,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-contribution-model\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/design-system-contribution-model.png\",\"articleSection\":[\"Blog\",\"Design Systems\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-contribution-model\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-contribution-model\\\/\",\"name\":\"Design System Contribution Model \u2013 How to Set it Up | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-contribution-model\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-contribution-model\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/design-system-contribution-model.png\",\"datePublished\":\"2023-10-09T09:44:20+00:00\",\"dateModified\":\"2023-10-19T11:41:39+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Let's learn about setting up design system contribution model. From a definition, benefits to examples \u2013 find out how to do it right.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-contribution-model\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-contribution-model\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-contribution-model\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/design-system-contribution-model.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/design-system-contribution-model.png\",\"width\":1200,\"height\":600,\"caption\":\"design system contribution model\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-contribution-model\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design System Contribution Model \u2013 How to Set it Up\"}]},{\"@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":"Design System Contribution Model \u2013 How to Set it Up | UXPin","description":"Let's learn about setting up design system contribution model. From a definition, benefits to examples \u2013 find out how to do it right.","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\/design-system-contribution-model\/","og_locale":"en_US","og_type":"article","og_title":"Design System Contribution Model \u2013 How to Set it Up","og_description":"Let's learn about setting up design system contribution model. From a definition, benefits to examples \u2013 find out how to do it right.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-contribution-model\/","og_site_name":"Studio by UXPin","article_published_time":"2023-10-09T09:44:20+00:00","article_modified_time":"2023-10-19T11:41:39+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/design-system-contribution-model.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-contribution-model\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-contribution-model\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Design System Contribution Model \u2013 How to Set it Up","datePublished":"2023-10-09T09:44:20+00:00","dateModified":"2023-10-19T11:41:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-contribution-model\/"},"wordCount":1912,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-contribution-model\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/design-system-contribution-model.png","articleSection":["Blog","Design Systems"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-contribution-model\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-contribution-model\/","name":"Design System Contribution Model \u2013 How to Set it Up | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-contribution-model\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-contribution-model\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/design-system-contribution-model.png","datePublished":"2023-10-09T09:44:20+00:00","dateModified":"2023-10-19T11:41:39+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Let's learn about setting up design system contribution model. From a definition, benefits to examples \u2013 find out how to do it right.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-contribution-model\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/design-system-contribution-model\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-contribution-model\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/design-system-contribution-model.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/design-system-contribution-model.png","width":1200,"height":600,"caption":"design system contribution model"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-contribution-model\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Design System Contribution Model \u2013 How to Set it Up"}]},{"@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\/50516","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=50516"}],"version-history":[{"count":2,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/50516\/revisions"}],"predecessor-version":[{"id":50521,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/50516\/revisions\/50521"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/50517"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=50516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=50516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=50516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}