{"id":19663,"date":"2024-11-19T06:34:00","date_gmt":"2024-11-19T06:34:00","guid":{"rendered":"https:\/\/uxmag.com\/?p=19663"},"modified":"2024-11-19T06:34:03","modified_gmt":"2024-11-19T06:34:03","slug":"a-brief-history-of-design-systems-part-2","status":"publish","type":"post","link":"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2","title":{"rendered":"A Brief History of Design Systems. Part 2"},"content":{"rendered":"\n<p><em>From atomic design to AI-driven systems: Understanding the evolution and adoption patterns of modern UX frameworks.<\/em><\/p>\n\n\n\n<p>Design systems have rapidly emerged as a cornerstone of modern digital strategy, yet their development is still relatively recent. What started as design prototype handoffs has evolved into dynamic frameworks that allow businesses to manage design at scale, driving efficiency and consistency across digital platforms. In just a few short years, design systems have gone from niche tools to an essential part of digital transformation.<\/p>\n\n\n\n<p>What makes this evolution significant is the growing convergence of design and development, now more interconnected than ever through data <a href=\"https:\/\/en.wikipedia.org\/wiki\/API\" target=\"_blank\" rel=\"noreferrer noopener\">API<\/a>s and collaborative tools. This integration enables teams to work faster and more efficiently, ensuring that design decisions are executed quickly and with low risk across both front-end experiences and back-end systems.<\/p>\n\n\n\n<p>As companies push forward with digital innovation, understanding how design systems have developed \u2014 and how they are increasingly powered by AI and integrated platforms \u2014 can provide key insights into the future of UX and business operations. This article will explore those pivotal moments and emerging trends that are reshaping how we approach design today.<\/p>\n\n\n\n<p>The journey from rigid guidelines to flexible, living systems has paralleled the broader shifts in technology and business strategy, influencing not just how designers work, but how entire organizations approach problem-solving and innovation.<\/p>\n\n\n\n<p>In the first part of this series, <em><a href=\"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-1\" target=\"_blank\" rel=\"noreferrer noopener\">A Brief History of Design Systems, Part 1<\/a><\/em>, we explored the early history of design systems, from ancient design principles to the digital revolution of the early 2000s, uncovering some basic tenets of the societal implications of technological advancement.<\/p>\n\n\n\n<p>Now, in Part 2, we will examine the pivotal moments in recent history that have shaped design systems, from the rise of collaborative tools and platforms to the advent of Artificial Intelligence \u2014 and how these frameworks have become the foundation for modern UX and digital transformation \u2014 while providing a roadmap (hopefully) for what lies ahead.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"484\" src=\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/2016-2024-Infographic-1024x484.png\" alt=\"\" class=\"wp-image-19676\" srcset=\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/2016-2024-Infographic-1024x484.png 1024w, https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/2016-2024-Infographic-300x142.png 300w, https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/2016-2024-Infographic-768x363.png 768w, https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/2016-2024-Infographic-1536x725.png 1536w, https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/2016-2024-Infographic-2048x967.png 2048w, https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/2016-2024-Infographic-400x189.png 400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Infographic created by the author<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Design systems 1.0<\/h2>\n\n\n\n<p>By 2016, we experienced a key moment in the evolution of digital design systems. For the first time, the convergence of industry standards allowed the business community \u2014 from designers to tech professionals \u2014 to collaborate on design systems at a large scale. This marks the unofficial beginning of what we can call <strong>Design Systems 1.0<\/strong>.<\/p>\n\n\n\n<p>The collaborative chemistry of designers and engineers was no longer just a talking point but a practical reality. With the advent of better software and standardized methodology, teams could now work together more efficiently, creating a cohesive system that bridges the gap between the two crafts.<\/p>\n\n\n\n<p>The rise of <a href=\"https:\/\/en.wikipedia.org\/wiki\/Sketch_(software)\" target=\"_blank\" rel=\"noreferrer noopener\">Sketch<\/a> in 2016 was a crucial turning point for UI design. After dominating the field for over two decades, Adobe Photoshop finally had a challenger \u2014 with Sketch instantly becoming the most popular tool for UI design. For visual designers, Sketch provided a huge boost in power and flexibility. Unlike Photoshop, which was originally created for photo editing, Sketch was built specifically for interface design, making it faster, more efficient, and more collaborative \u2014 just better in every way.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><\/p>\n<cite><em><strong>Takeway #1<\/strong>: <\/em>The launch of Sketch in 2016 revolutionized UI design, making it more efficient and collaborative while catalyzing the widespread adoption of design systems across businesses.<\/cite><\/blockquote>\n\n\n\n<p>With Sketch\u2019s arrival, UI improvements led to automation in ways that hadn\u2019t been seen before. Designers could now build and share massive design libraries at transformative speeds and with exceptional reliability, allowing for easier front-end engineering handoff.<\/p>\n\n\n\n<p>Yet, while Sketch made collaboration more accessible, it also came with limitations. Transferring these design libraries between teams still required some degree of manual intervention, and syncing them with engineering environments wasn\u2019t inherently seamless. These early tools, although revolutionary, came with a learning curve and significant friction.<\/p>\n\n\n\n<p>At that time, I recall spending entire project cycles managing <a href=\"https:\/\/en.wikipedia.org\/wiki\/Quality_assurance\" target=\"_blank\" rel=\"noreferrer noopener\">quality assurance<\/a> (QA) issues, mainly due to misalignment between design and development. Our processes were still evolving and had significant pain points that begged for industry solutions yet to come.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A new mindset: \u201cThe Platform is the Product\u201d<\/h2>\n\n\n\n<p>As Sketch gained momentum, businesses \u2014 especially small and medium-sized ones \u2014 began rethinking their digital strategies. The ability to maintain platform control and independence became increasingly within reach for smaller organizations and individuals. While platforms like <a href=\"https:\/\/en.wikipedia.org\/wiki\/WordPress\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress<\/a> and <a href=\"https:\/\/en.wikipedia.org\/wiki\/Squarespace\" target=\"_blank\" rel=\"noreferrer noopener\">Squarespace<\/a> had dominated for years, offering affordable, easy-to-use solutions, they came with limitations, particularly for brands looking to customize their digital experience.<\/p>\n\n\n\n<p>However, having complete control over a platform with custom design and engineering was still prohibitively expensive for many. As a result, companies often made compromises. They would use platforms like WordPress for simple \u201cbrochureware\u201d websites to showcase their brand while relying on other systems for more complex business operations.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><\/p>\n<cite><em><strong>Takeway #2<\/strong>: <\/em>As businesses grew more digitally mature, many realized that design systems weren\u2019t just about efficiency \u2014 they were critical to maintaining brand value and ensuring a unified digital presence.<\/cite><\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"416\" src=\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/ds-value-chart-1024x416.png\" alt=\"\" class=\"wp-image-19677\" srcset=\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/ds-value-chart-1024x416.png 1024w, https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/ds-value-chart-300x122.png 300w, https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/ds-value-chart-768x312.png 768w, https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/ds-value-chart-1536x623.png 1536w, https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/ds-value-chart-2048x831.png 2048w, https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/ds-value-chart-400x162.png 400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Design systemization offers more than just speed and efficiency; it<\/em> <em>enhances brand value by increasing customer satisfaction. Infographic by the author<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">The emergence of prototyping and collaboration tools<\/h2>\n\n\n\n<p>By 2016, new tools and platforms for prototyping and collaboration began to gain prominence, radically transforming how teams worked together. Gone were the days of exchanging heavy design files that slowed down workflows and introduced countless QA issues. In their place, high-fidelity HTML prototypes, code repositories, and frameworks, bundled with productivity-boosting features, allowed projects to scale faster and better with fewer risks.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.invisionapp.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">InVision<\/a>, when combined with Sketch, became the leading tool for design handoff by 2017, establishing itself as the source of truth for prototypes. However, even with these advances, the tools themselves were often susceptible to glitches from human error. While Sketch and InVision made handoffs more efficient, they didn\u2019t fully resolve the age-old tension between design intent and development execution. Getting a project through review cycles faster was one thing \u2014 ensuring consistency between design and code was another challenge entirely.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><\/p>\n<cite><em><strong>Takeway #3<\/strong>: <\/em>Tools like InVision and Sketch significantly improved collaboration between design and development teams, but the challenge of seamless design-to-code execution remained.<\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Breaking free from the print mindset: a new digital workflow<\/h2>\n\n\n\n<p>Despite all these technological advancements, many designers were still stuck in a print mindset. For decades, documents were thought of as static pages, and screen technology was still evolving. Even in 2016, designers were printing out layouts and pinning them to walls for review. It wasn\u2019t until platforms like <a href=\"https:\/\/en.wikipedia.org\/wiki\/Material_Design\" target=\"_blank\" rel=\"noreferrer noopener\">Material Design<\/a>, <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook<\/a>, and <a href=\"https:\/\/zeroheight.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Zeroheight<\/a> became widely adopted that product teams began to shift toward truly digital-first workflows.<\/p>\n\n\n\n<p>Around this time, <a href=\"https:\/\/bradfrost.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Brad Frost<\/a>\u2019s 2016 book <em><a href=\"https:\/\/books.google.com.ua\/books\/about\/Atomic_Design.html?id=1e92vgAACAAJ&amp;source=kp_book_description&amp;redir_esc=y\" target=\"_blank\" rel=\"noreferrer noopener\">\u201cAtomic Design\u201d<\/a><\/em> played a key role in documenting and standardizing the practice of design systems 1.0. Frost outlined the approach that broke down complex interfaces into reusable components \u2014 atoms, molecules, and organisms \u2014 that could be systematically applied across projects. This standardization of practice was sorely needed at the time, when (to be brutally honest) design as a practice did not have much influence in many organizations \u2014 UI design was typically undervalued as a \u201ccosmetic\u201d aspect of product engineering.<\/p>\n\n\n\n<p>The fundamentals outlined in his book still serve as essential reading for anyone looking to understand the design systems of today. \u201c<em>Atomic Design<\/em>\u201d provided a framework that helped teams transition from static, page-based thinking to component-based systems, laying the groundwork for the design systems revolution.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><\/p>\n<cite><em><strong>Takeway #4<\/strong>: <\/em>Brad Frost\u2019s \u201c<em>Atomic Design<\/em>\u201d provided the much-needed structure for design systems to evolve from static style guides to scalable, reusable components, helping organizations reach consensus on digital-first project workflows.<\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">The rise of platforms<\/h2>\n\n\n\n<p>As digital tools evolved, a seismic shift in how businesses \u2014 particularly <a href=\"https:\/\/en.wikipedia.org\/wiki\/Small_and_medium-sized_enterprises\" target=\"_blank\" rel=\"noreferrer noopener\">small and medium-sized enterprises<\/a> (SMBs) \u2014 approached their digital strategies began to take place. Central to this shift was the idea of platforms not merely as a support tool but as the core of the product offering itself, by managing content independently, commonly referred to as a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Content_management_system\" target=\"_blank\" rel=\"noreferrer noopener\">content management system<\/a> (CMS). Companies recognized that establishing direct control and autonomy over their digital ecosystems, rather than relying on third-party managed solutions, could give them a competitive edge in the marketplace.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Low-code and no-code: expanding accessibility<\/h3>\n\n\n\n<p>The rise of <a href=\"https:\/\/en.wikipedia.org\/wiki\/Low-code_development_platform\" target=\"_blank\" rel=\"noreferrer noopener\">low-code<\/a> and <a href=\"https:\/\/en.wikipedia.org\/wiki\/No-code_development_platform\" target=\"_blank\" rel=\"noreferrer noopener\">no-code<\/a> platforms continued to change the landscape. Platforms like <a href=\"https:\/\/en.wikipedia.org\/wiki\/Wix.com\" target=\"_blank\" rel=\"noreferrer noopener\">Wix<\/a> and <a href=\"https:\/\/en.wikipedia.org\/wiki\/Shopify\" target=\"_blank\" rel=\"noreferrer noopener\">Shopify<\/a> blurred the lines between ease of use and customization, offering more flexibility than WordPress and without requiring full-blown development skills. No-code platforms allow users to build websites, applications, and even complex workflows using visual interfaces, empowering non-developers to create what was once the domain of experienced engineers.<\/p>\n\n\n\n<p>For many SMBs, these low-code and no-code platforms presented a middle ground between fully custom solutions and traditional website builders. They allowed businesses to maintain a level of control and flexibility without the need to invest in expensive engineering teams. This opened up new opportunities for small-scale e-commerce ventures, personal branding sites, and community-driven platforms.<\/p>\n\n\n\n<p>However, as companies grew, many began realizing the benefits of having complete platform autonomy, especially for scalability and unique, brand-specific experiences. Having full technical control means maintaining independence over every interaction, design choice, and user journey. This capability, once exclusive to enterprises with extensive technical resources, became accessible to more businesses with the rise of developer-focused tools and frameworks.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><\/p>\n<cite><em><strong>Takeway #5<\/strong>: <\/em>While no-code solutions provide an entry point, fully custom, scalable digital ecosystems allow businesses to maintain complete platform independence and control.<\/cite><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Conventional platforms for business and publishing<\/h3>\n\n\n\n<p>Despite the rise of low-code and no-code platforms, many enterprises still rely on traditional platforms like <a href=\"https:\/\/en.wikipedia.org\/wiki\/Drupal\" target=\"_blank\" rel=\"noreferrer noopener\">Drupal<\/a> and <a href=\"https:\/\/en.wikipedia.org\/wiki\/Sitecore\" target=\"_blank\" rel=\"noreferrer noopener\">Sitecore<\/a> for large-scale projects. These content management systems (CMS) offer high customization but require more technical expertise. They are favored for projects needing advanced security, multi-language support, and complex user roles, especially for organizations with strong IT resources.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><\/p>\n<cite><em><strong>Takeway #6<\/strong>:<\/em> Traditional CMS platforms remain essential for enterprises with complex needs, offering greater customization and security.<\/cite><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Social media: a platform within platforms<\/h3>\n\n\n\n<p>Social media platforms like <a href=\"https:\/\/en.wikipedia.org\/wiki\/Facebook\" target=\"_blank\" rel=\"noreferrer noopener\">Facebook<\/a>, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Instagram\" target=\"_blank\" rel=\"noreferrer noopener\">Instagram<\/a>, and <a href=\"https:\/\/en.wikipedia.org\/wiki\/LinkedIn\" target=\"_blank\" rel=\"noreferrer noopener\">LinkedIn<\/a> allow businesses to engage massive audiences without their own website, offering built-in solutions for e-commerce and community engagement. However, these platforms limit control over content and data. Most businesses use a hybrid approach, leveraging social media\u2019s reach while maintaining independence through their own self-managed digital platforms for a more consistent brand experience.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><\/p>\n<cite><em><strong>Takeway #7<\/strong>:<\/em> A hybrid approach combines the reach of social media with the autonomy of maintaining a self-managed digital platform.<\/cite><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Salesforce: bridging low-code and conventional development<\/h3>\n\n\n\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/Salesforce\" target=\"_blank\" rel=\"noreferrer noopener\">Salesforce<\/a> bridges the gap between low-code and conventional development. Its <a href=\"https:\/\/www.salesforce.com\/eu\/products\/platform\/lightning\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lightning Platform<\/a> allows non-developers to create apps and automate processes, while its <a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.apexcode.meta\/apexcode\/apex_intro_what_is_apex.htm\" target=\"_blank\" rel=\"noreferrer noopener\">Apex<\/a> programming language offers more advanced customization for businesses needing more control. Salesforce\u2019s flexibility, combined with its <a href=\"https:\/\/appexchange.salesforce.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">AppExchange<\/a> marketplace, makes it a powerful tool for businesses to scale while maintaining operational control.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><\/p>\n<cite><em><strong>Takeway #8<\/strong>:<\/em> Salesforce\u2019s low-code solutions allow businesses to scale quickly while offering advanced customization options for future growth.<\/cite><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Platforms as business enablers<\/h3>\n\n\n\n<p>Choosing the right platform has become one of the most important decisions for businesses in the digital age. Whether it\u2019s a CMS for content publishing, an e-commerce platform for retail, or a no-code tool for custom workflows, the platform is now an enabler of business transformation. Companies that have direct governance over their platforms and are able to adapt to changing user demands will have a competitive advantage in a digital-first world.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Figma: the game-changer in design platforms<\/h2>\n\n\n\n<p>The rise of <a href=\"https:\/\/en.wikipedia.org\/wiki\/Figma\" target=\"_blank\" rel=\"noreferrer noopener\">Figma<\/a> as a game-changer in design systems has been well-documented. One of the core reasons for its success was its all-in-one platform approach. While Sketch and InVision had their strengths, their bifurcated system created gaps in the design-to-development handoff, leading to friction between teams. Figma resolved these issues by consolidating design, prototyping, and collaboration features into a single platform, offering real-time, multi-user interfaces that brought designers, engineers, and other stakeholders together in unprecedented ways.<\/p>\n\n\n\n<p>This shift was more than just an advancement in design technology; it was an industry-wide transformation. By enabling real-time collaboration across disciplines, Figma turned design into a \u201cmultiplayer game,\u201d setting a new standard for speed, quality, and teamwork. It quickly displaced Sketch and InVision as the preferred tool for UI and UX design and became a serious rival to <a href=\"https:\/\/en.wikipedia.org\/wiki\/Adobe_XD\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe XD<\/a>, which, despite being part of the larger <a href=\"https:\/\/en.wikipedia.org\/wiki\/Adobe_Creative_Cloud\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Creative Cloud<\/a> ecosystem, couldn\u2019t keep pace with Figma\u2019s user-friendly, cloud-native architecture.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><\/p>\n<cite><em><strong>Takeway #9<\/strong>:<\/em> Figma\u2019s rise marked a critical inflection point in design systems \u2014 moving from fragmented workflows to unified, collaborative platforms that meet the fast-paced demands of modern design teams.<\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Adobe Experience Manager and the evolution of design platforms<\/h2>\n\n\n\n<p>While Figma was disrupting the design world, <a href=\"https:\/\/business.adobe.com\/products\/experience-manager\/adobe-experience-manager.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Experience Manager<\/a> (AEM) established itself as a best-in-class content management system (CMS). Before AEM, Sitecore led the market in CMS platforms. But AEM\u2019s game-changing product, with faster workflows and <a href=\"https:\/\/experienceleague.adobe.com\/en\/docs\/experience-manager-65\/content\/assets\/dynamic\/dynamic-media\" target=\"_blank\" rel=\"noreferrer noopener\">Dynamic Media<\/a>, Adobe\u2019s <a href=\"https:\/\/business.adobe.com\/blog\/basics\/digital-asset-management\" target=\"_blank\" rel=\"noreferrer noopener\">digital asset management<\/a> system (DAM), set a new benchmark for power and efficiency.<\/p>\n\n\n\n<p>The deep integration with Adobe Creative Cloud gave design professionals an entirely holistic way to manage content and creative assets. However, Adobe\u2019s digital design tool, Adobe XD, failed to achieve market dominance as Figma became the standard. This was further impacted by Adobe\u2019s failed attempt to acquire Figma in 2023.<\/p>\n\n\n\n<p>Despite this setback, Adobe also introduced <a href=\"https:\/\/business.adobe.com\/products\/workfront.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Workfront<\/a>, a project management tool that fits right into <a href=\"https:\/\/en.wikipedia.org\/wiki\/Adobe_Creative_Suite\" target=\"_blank\" rel=\"noreferrer noopener\">Create Suite<\/a>, allowing teams to plan projects, manage resources, and track progress within the Adobe ecosystem. When used with other Adobe tools, Workfront could become a serious competitor to other project management software, offering creative teams a transformative method of integrating and streamlining systems for design and development.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><\/p>\n<cite><em><strong>Takeway #10<\/strong>:<\/em> AEM became the leader in CMS by integrating smoothly into Adobe\u2019s ecosystem, but its UI design tool, Adobe XD, failed to achieve the same dominance in a design landscape shaped by Figma\u2019s innovations.<\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">The COVID-19 impact: digital platform adoption surges<\/h2>\n\n\n\n<p>The COVID-19 pandemic was a pivotal moment for digital platform adoption. As businesses worldwide shifted to remote work, tools for real-time collaboration became essential. Platforms like <a href=\"https:\/\/en.wikipedia.org\/wiki\/Slack_(software)\" target=\"_blank\" rel=\"noreferrer noopener\">Slack<\/a>, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Zoom_(software)\" target=\"_blank\" rel=\"noreferrer noopener\">Zoom<\/a>, and <a href=\"https:\/\/en.wikipedia.org\/wiki\/Microsoft_Teams\" target=\"_blank\" rel=\"noreferrer noopener\">Microsoft Teams<\/a> saw explosive growth, quickly becoming the go-to solutions for virtual meetings and team collaboration. <a href=\"https:\/\/en.wikipedia.org\/wiki\/Atlassian\" target=\"_blank\" rel=\"noreferrer noopener\">Atlassian<\/a>\u2019s suite of tools also gained traction, facilitating teamwork across distributed teams, while creative collaboration platforms like <a href=\"https:\/\/www.mural.co\/\" target=\"_blank\" rel=\"noreferrer noopener\">Mural<\/a> and <a href=\"https:\/\/en.wikipedia.org\/wiki\/Miro_(collaboration_platform)\" target=\"_blank\" rel=\"noreferrer noopener\">Miro<\/a> proliferated, offering virtual whiteboard capabilities that enabled remote brainstorming sessions.<\/p>\n\n\n\n<p>Cloud adoption, which was already accelerating, surged as companies scrambled to ensure their systems could support a global workforce operating from home. The near-global work-from-home (WFH) experiment wasn\u2019t just sustainable \u2014 it thrived. Businesses realized they could tap into a wider pool of talent, assembling teams not based on geography but on skill sets, and working even more effectively in a remote, multiplayer fashion.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><\/p>\n<cite><em><strong>Takeway #11<\/strong>:<\/em> The pandemic accelerated the adoption of digital platforms and transformed remote work into a lasting model, enabling businesses to collaborate seamlessly in real time, regardless of physical location.<\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Figma\u2019s continuous innovation: from design to whiteboard<\/h2>\n\n\n\n<p>Figma didn\u2019t stop at revolutionizing UI design. In response to the growing demand for real-time, collaborative tools, Figma introduced <a href=\"https:\/\/www.figma.com\/figjam\/\" target=\"_blank\" rel=\"noreferrer noopener\">FigJam<\/a>, a whiteboard platform designed to make brainstorming and ideation accessible to all, not just designers. With its intuitive interface, FigJam democratized collaboration, allowing entire teams \u2014 from marketers to developers \u2014 to contribute to the design process.<\/p>\n\n\n\n<p>Figma\u2019s ease of adoption made it the de facto tool for not just design teams but entire organizations. It became a hub where research, insights, audits, analytics, and design could all live in one place, enhancing the efficiency and reusability of team assets. This elevated Figma\u2019s position as the leading aggregator of design truth, consolidating its hold on the market and positioning itself as a rival to platforms like Mural and Miro.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><\/p>\n<cite><em><strong>Takeway #12<\/strong>:<\/em> Figma\u2019s continuous innovation, including the introduction of FigJam, expanded its role from a UI design tool to a comprehensive platform for team collaboration, further entrenching its dominance in the design space.<\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Platform maturity and the rise of developer kits<\/h2>\n\n\n\n<p>As design platforms matured, so did the need for seamless integration between design and development. Figma\u2019s introduction of <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/15339657135383-Guide-to-variables-in-Figma\" target=\"_blank\" rel=\"noreferrer noopener\">Variables<\/a> in 2021, which replaced <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360039238753-Styles-in-Figma\" target=\"_blank\" rel=\"noreferrer noopener\">Styles<\/a>, was a key innovation in this regard.<\/p>\n\n\n\n<p>Variables allowed designers to tokenize brand attributes, making it easier to sync with developer kits such as Material Design or others, depending on the platform. Synchronizing design and developer kits empower Figma to manage dynamic content and themes, such as dark and light modes or multi-brand systems. This tokenization was a major productivity boost, enabling designers and developers to control the appearance of user interfaces in real time \u2014 <strong><em>directly syncing design files with developed API<\/em><\/strong><em><strong>s<\/strong><\/em>.<\/p>\n\n\n\n<p>Since the advent of desktop publishing for digital media, this has been the holy grail of design and dev integration. A style guide for a brand can be compressed into a single sheet of data managed efficiently by Figma and hosted live. UI changes can be done in the background, completely detached from front-end work.<\/p>\n\n\n\n<p>What\u2019s more, developer kits enable Figma to model higher-level objects and components very precisely to the components used on CMS platforms, mimicking front-end semantics and further strengthening Figma\u2019s role as the source of truth for design.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><\/p>\n<cite><em><strong>Takeway #13<\/strong>:<\/em> Developer Kits and Design Kits have become essential for modern design systems, enabling frictionless collaboration between design and development teams, with Figma leading the charge in innovation and ease of use.<\/cite><\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"562\" src=\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/Design-System-Comparison-1024x562.png\" alt=\"\" class=\"wp-image-19678\" srcset=\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/Design-System-Comparison-1024x562.png 1024w, https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/Design-System-Comparison-300x165.png 300w, https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/Design-System-Comparison-768x421.png 768w, https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/Design-System-Comparison-1536x843.png 1536w, https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/Design-System-Comparison-2048x1124.png 2048w, https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/Design-System-Comparison-400x220.png 400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Dynamic design systems manage UI design as the managed base of an organization\u2019s technology stack, enabling more extensibility for automated experiences. Infographic created by the author<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Design systems 2.0<\/h2>\n\n\n\n<p>The recent advances in Figma have transformed how design patterns are built, moving away from static, disjointed structures to dynamic, <em>white-label<\/em> products that are highly customizable \u2014 ushering in what we can call <strong>Design Systems 2.0<\/strong>. Not to be confused with design <em>templates<\/em>, a dynamic design <em>system<\/em> is not locked into pre-set visuals or rigid components but rather, variables assigned to UX patterns. The only standardized element is the underlying code structure, allowing for endless flexibility in how the design itself evolves.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Opportunities for automation<\/h3>\n\n\n\n<p>One of the greatest strengths of Design Systems 2.0 is the opportunity for automation. Dynamic systems can be integrated with code libraries and APIs to automate repetitive design tasks, such as updating UI elements across a platform in real time. For example, changes made to a button component in one part of the system can instantly propagate across every interface where that button is used. This not only reduces manual labor but also ensures consistency, speed, and accuracy in design updates across multiple touchpoints.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Personalization at scale<\/h3>\n\n\n\n<p>A dynamic design system also opens the door to advanced personalization, allowing brands to create custom experiences for individual users (or multiple brands). By integrating customer data, designers can programmatically adjust interface elements \u2014 such as color schemes, content layout, or product recommendations \u2014 based on a user\u2019s accessibility requirements, preferences, or behavior. The standardized code structure ensures these personalized elements can be seamlessly integrated into the broader design framework without causing disruptions or inconsistencies.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">A\/B testing made simple<\/h3>\n\n\n\n<p>The flexibility of Design Systems 2.0 also makes <a href=\"https:\/\/en.wikipedia.org\/wiki\/A\/B_testing\" target=\"_blank\" rel=\"noreferrer noopener\">A\/B testing<\/a> far more efficient. Because design elements are modular and standardized at the code level, designers can quickly test multiple variations of a design without the need to create entirely new templates or assets. Teams can experiment with different design patterns and content strategies, then gather performance data and implement changes quickly. This approach can revolutionize iteration cycles, allowing businesses to quickly optimize their interfaces based on real user feedback.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><\/p>\n<cite><em><strong>Takeway #14<\/strong>:<\/em> Design Systems 2.0 enable automation, personalization, and A\/B testing at scale.<\/cite><\/blockquote>\n\n\n\n<p>In summary, dynamic design systems not only allow for greater creativity and flexibility in how interfaces are crafted, but they also introduce new levels of efficiency and intelligence. As these systems continue to evolve, they will likely play a central role in how businesses create digital experiences that are more responsive, personalized, and data-driven than ever before.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A glimpse into the future of AI-driven design<\/h2>\n\n\n\n<p>As we stand at the threshold of a new era in design systems, AI has the potential to fundamentally change how we think about digital design and development. As static design systems of yesterday are evolving into dynamic ecosystems, many of the manual processes of today will need to adapt to tomorrow\u2019s AI-assisted workflows.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The rise of intelligent design operations<\/h3>\n\n\n\n<p>AI is set to make a big difference in the daily work of design teams. No longer will keeping designs consistent mean manual reviews and constant updates to documentation. AI will act as an active partner in the design process, both safeguarding and guiding \u2014 spotting inconsistencies and offering suggestions based on how components are used \u2014 and may even anticipate design needs before they come up.<\/p>\n\n\n\n<p>This shift is particularly powerful in large organizations where design systems must scale across multiple products and teams. AI assistants are becoming sophisticated enough to understand context, making them great partners in maintaining design integrity. They can identify when a component deviation is an intentional innovation versus an accidental inconsistency, helping teams govern the balance between system compliance and creative freedom.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dynamic adaptation and personalization<\/h3>\n\n\n\n<p>Perhaps the most transformative aspect of AI in design systems is its ability to enable truly dynamic experiences. Traditional design systems offered consistency through standardization \u2014 every user saw the same components in the same way. AI-enhanced design systems, however, can adapt in real time to user needs, preferences, and contexts while maintaining brand coherence.<\/p>\n\n\n\n<p>This adaptation goes beyond simple responsive design. Perhaps one of the most exciting frontiers for dynamic design systems is the integration of agentive (autonomous) AI. AI-driven systems allow design elements to adjust on their own in real time, based on user needs or business goals. For example, AI can study how users interact with a website and make automatic design changes to improve ease of use or increase sales. Agentive AI could even generate entirely new design patterns based on predictive models, further automating the design process and unlocking new levels of personalization and performance optimization.<\/p>\n\n\n\n<p>Imagine components that automatically adjust their complexity based on user expertise or navigation systems that reorganize themselves based on usage patterns. Color schemes might subtly shift based on time of day or user behavior while maintaining accessibility standards. Typography could dynamically adjust for optimal readability based on viewing conditions and user characteristics.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The designer\u2019s evolution<\/h3>\n\n\n\n<p>This technological leap is catalyzing a profound evolution in the role of designers. Rather than focusing solely on creating static components, designers are becoming system architects and AI collaborators. They\u2019re developing skills in prompt engineering \u2014 the art of guiding AI to generate appropriate design variations. They\u2019re learning to create not just components but component generation rules that AI can follow to maintain brand integrity across limitless variations.<\/p>\n\n\n\n<p>The relationship between designers and developers is also being redefined. AI is beginning to serve as a translator between design intent and technical implementation, suggesting optimal code patterns for design decisions and flagging potential implementation challenges before they arise. This is creating a more fluid, collaborative environment where the traditional handoff between design and development becomes a continuous conversation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ethical design at scale<\/h3>\n\n\n\n<p>As AI becomes more integrated into design systems, new ethical issues arise. For instance, how do we ensure AI-driven personalization won\u2019t create discriminatory experiences? How do we maintain transparency about which aspects of a user\u2019s experience are AI-influenced? These questions should compel organizations to develop new frameworks for ethical AI design principles.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The future design canvas<\/h3>\n\n\n\n<p>We\u2019re moving toward design systems that are less like static libraries and more like collaborative AI partners. They\u2019ll not only manage and maintain design assets but actively participate in the creative process. They\u2019ll analyze user interactions, suggest improvements, and even predict future design needs based on emerging trends and user behaviors.<\/p>\n\n\n\n<p>Success will come not from having the most components or the strictest guidelines, but from creating the most intelligent and adaptable design systems. Teams will need to become comfortable with systems that learn and evolve while ensuring they remain anchored to core brand values and user needs.<\/p>\n\n\n\n<p>Integrating AI into design systems brings incredible potential but also real challenges. Organizations will need to balance quality control, skill-building, and ethical concerns while keeping the human element that makes design meaningful. The goal isn\u2019t to let AI replace human creativity but to use it as a tool to amplify it, supporting rather than fully automating design choices.<\/p>\n\n\n\n<p>Going forward, the most successful organizations will treat AI as a way to evolve traditional design systems, not replace them; these new workflows unlock a fresh level of creativity, allowing designers to focus on crafting experiences that feel personal and engaging. With AI managing routine tasks, designers can bring a new depth to the user experience, making it more dynamic, relevant, and genuinely human-centered.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Key business challenges<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Legacy Systems<\/strong>: Many organizations still rely on outdated infrastructures that are not compatible with modern, dynamic design systems. Overcoming these technical barriers and replacing legacy systems with more modern frameworks will be critical for businesses aiming to innovate and stay competitive.<\/li>\n\n\n\n<li><strong>Internal Governance<\/strong>: As design systems become central to business operations, internal governance will of design will be a significant factor. Maintaining consistency across teams will ensure that dynamic systems function properly. Organizations must develop clear standards and processes to avoid fragmented design efforts and maintain quality at scale.<\/li>\n\n\n\n<li><strong>Shifting Skill Sets<\/strong>: The rise of dynamic design systems will require shifts in skill sets across design and development teams. Designers will need to become more comfortable with data, automation, and real-time interfaces, while developers will need a deeper understanding of design workflows. Upskilling teams to navigate this evolving landscape will be a crucial factor for future success.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">A new publishing mindset<\/h2>\n\n\n\n<p>As design systems evolve, so too does the mindset around publishing. Content is no longer seen as static or fixed; instead, it is becoming more fluid, dynamic, and responsive to changing contexts. Modern publishing will become increasingly situational and conversational, adapting to user interactions, environments, and real-time data. This shift requires organizations to think beyond traditional paradigms and embrace more flexible approaches that allow content and design to evolve together.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Looking ahead<\/h3>\n\n\n\n<p>As organizations continue to push the boundaries of what design systems can achieve, the lessons learned from past innovations will be invaluable. Businesses that can embrace these new mindsets \u2014 where publishing is more dynamic, design is more integrated, and teams are more collaborative \u2014 will thrive in this evolving landscape.<\/p>\n\n\n\n<p><em>The article originally appeared on&nbsp;<a href=\"https:\/\/medium.com\/@jgulsen_97727\/a-brief-history-of-design-systems-part-2-fb00a7af7985\" target=\"_blank\" rel=\"noreferrer noopener\">Medium<\/a>.<\/em><\/p>\n\n\n\n<p><em>Featured image courtesy: <a href=\"https:\/\/www.linkedin.com\/in\/jimgulsen\/\" target=\"_blank\" rel=\"noreferrer noopener\">Jim Gulsen<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>From atomic design to AI-driven systems: Understanding the evolution and adoption patterns of modern UX frameworks. Design systems have rapidly emerged as a cornerstone of modern digital strategy, yet their development is still relatively recent. What started as design prototype handoffs has evolved into dynamic frameworks that allow businesses to manage design at scale, driving<\/p>\n","protected":false},"author":2670,"featured_media":19675,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[1],"tags":[],"topics":[3225,3229,3228,3215,3230],"class_list":{"0":"post-19663","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-uncategorized","8":"topics-design-evolution","9":"topics-design-methodology","10":"topics-design-process","11":"topics-design-systems","12":"topics-history-of-technology","13":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>A Brief History of Design Systems. Part 2 - UX Magazine<\/title>\n<meta name=\"description\" content=\"In this second part of the history of design systems, the article covers the past decade&#039;s shift from static design guidelines to dynamic tools that bridge design and developer frameworks. It examines how design systems have become essential for creating consistent, scalable, and user-centered experiences across platforms. The piece highlights their role in fostering collaboration between designers and developers, enhancing brand cohesion, and setting the stage for AI-powered innovation in design practices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Brief History of Design Systems. Part 2\" \/>\n<meta property=\"og:description\" content=\"In this second part of the history of design systems, the article covers the past decade&#039;s shift from static design guidelines to dynamic tools that bridge design and developer frameworks. It examines how design systems have become essential for creating consistent, scalable, and user-centered experiences across platforms. The piece highlights their role in fostering collaboration between designers and developers, enhancing brand cohesion, and setting the stage for AI-powered innovation in design practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2\" \/>\n<meta property=\"og:site_name\" content=\"UX Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/uxmag\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-19T06:34:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-19T06:34:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/cover-history-of-ds-part2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"765\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jim Gulsen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxmag\" \/>\n<meta name=\"twitter:site\" content=\"@uxmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jim Gulsen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2#article\",\"isPartOf\":{\"@id\":\"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2\"},\"author\":{\"name\":\"Nataliia Vlasenko\",\"@id\":\"https:\/\/uxmag.com\/#\/schema\/person\/7155568a86e268cd0e8ca7197f9487ca\"},\"headline\":\"A Brief History of Design Systems. Part 2\",\"datePublished\":\"2024-11-19T06:34:00+00:00\",\"dateModified\":\"2024-11-19T06:34:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2\"},\"wordCount\":4381,\"publisher\":{\"@id\":\"https:\/\/uxmag.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/cover-history-of-ds-part2.png\",\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2\",\"url\":\"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2\",\"name\":\"A Brief History of Design Systems. Part 2 - UX Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/uxmag.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2#primaryimage\"},\"image\":{\"@id\":\"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/cover-history-of-ds-part2.png\",\"datePublished\":\"2024-11-19T06:34:00+00:00\",\"dateModified\":\"2024-11-19T06:34:03+00:00\",\"description\":\"In this second part of the history of design systems, the article covers the past decade's shift from static design guidelines to dynamic tools that bridge design and developer frameworks. It examines how design systems have become essential for creating consistent, scalable, and user-centered experiences across platforms. The piece highlights their role in fostering collaboration between designers and developers, enhancing brand cohesion, and setting the stage for AI-powered innovation in design practices.\",\"breadcrumb\":{\"@id\":\"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2#primaryimage\",\"url\":\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/cover-history-of-ds-part2.png\",\"contentUrl\":\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/cover-history-of-ds-part2.png\",\"width\":1400,\"height\":765},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/uxmag.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design Systems\",\"item\":\"https:\/\/uxmag.com\/topics\/design-systems\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"A Brief History of Design Systems. Part 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/uxmag.com\/#website\",\"url\":\"https:\/\/uxmag.com\/\",\"name\":\"UX Magazine\",\"description\":\"UX Magazine is a central, one-stop resource for everything related to user experience. We provide a steady stream of current, informative, and credible information about UX and related fields to enhance the professional and creative lives of UX practitioners and those exploring the field. Our content is driven and created by an impressive roster of experienced professionals\",\"publisher\":{\"@id\":\"https:\/\/uxmag.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/uxmag.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/uxmag.com\/#organization\",\"name\":\"UX Magazine\",\"alternateName\":\"uxmag\",\"url\":\"https:\/\/uxmag.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/uxmag.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/uxmag.com\/wp-content\/uploads\/2021\/01\/UX-Magazine-logo-2.png\",\"contentUrl\":\"https:\/\/uxmag.com\/wp-content\/uploads\/2021\/01\/UX-Magazine-logo-2.png\",\"width\":2440,\"height\":428,\"caption\":\"UX Magazine\"},\"image\":{\"@id\":\"https:\/\/uxmag.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/uxmag\",\"https:\/\/x.com\/uxmag\",\"https:\/\/www.linkedin.com\/company\/ux-magazine\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/uxmag.com\/#\/schema\/person\/7155568a86e268cd0e8ca7197f9487ca\",\"name\":\"Nataliia Vlasenko\",\"url\":\"https:\/\/uxmag.com\/contributors\/nataliia-vlasenko\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Brief History of Design Systems. Part 2 - UX Magazine","description":"In this second part of the history of design systems, the article covers the past decade's shift from static design guidelines to dynamic tools that bridge design and developer frameworks. It examines how design systems have become essential for creating consistent, scalable, and user-centered experiences across platforms. The piece highlights their role in fostering collaboration between designers and developers, enhancing brand cohesion, and setting the stage for AI-powered innovation in design practices.","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:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2","og_locale":"en_US","og_type":"article","og_title":"A Brief History of Design Systems. Part 2","og_description":"In this second part of the history of design systems, the article covers the past decade's shift from static design guidelines to dynamic tools that bridge design and developer frameworks. It examines how design systems have become essential for creating consistent, scalable, and user-centered experiences across platforms. The piece highlights their role in fostering collaboration between designers and developers, enhancing brand cohesion, and setting the stage for AI-powered innovation in design practices.","og_url":"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2","og_site_name":"UX Magazine","article_publisher":"https:\/\/www.facebook.com\/uxmag","article_published_time":"2024-11-19T06:34:00+00:00","article_modified_time":"2024-11-19T06:34:03+00:00","og_image":[{"width":1400,"height":765,"url":"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/cover-history-of-ds-part2.png","type":"image\/png"}],"author":"Jim Gulsen","twitter_card":"summary_large_image","twitter_creator":"@uxmag","twitter_site":"@uxmag","twitter_misc":{"Written by":"Jim Gulsen","Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2#article","isPartOf":{"@id":"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2"},"author":{"name":"Nataliia Vlasenko","@id":"https:\/\/uxmag.com\/#\/schema\/person\/7155568a86e268cd0e8ca7197f9487ca"},"headline":"A Brief History of Design Systems. Part 2","datePublished":"2024-11-19T06:34:00+00:00","dateModified":"2024-11-19T06:34:03+00:00","mainEntityOfPage":{"@id":"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2"},"wordCount":4381,"publisher":{"@id":"https:\/\/uxmag.com\/#organization"},"image":{"@id":"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2#primaryimage"},"thumbnailUrl":"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/cover-history-of-ds-part2.png","inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2","url":"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2","name":"A Brief History of Design Systems. Part 2 - UX Magazine","isPartOf":{"@id":"https:\/\/uxmag.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2#primaryimage"},"image":{"@id":"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2#primaryimage"},"thumbnailUrl":"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/cover-history-of-ds-part2.png","datePublished":"2024-11-19T06:34:00+00:00","dateModified":"2024-11-19T06:34:03+00:00","description":"In this second part of the history of design systems, the article covers the past decade's shift from static design guidelines to dynamic tools that bridge design and developer frameworks. It examines how design systems have become essential for creating consistent, scalable, and user-centered experiences across platforms. The piece highlights their role in fostering collaboration between designers and developers, enhancing brand cohesion, and setting the stage for AI-powered innovation in design practices.","breadcrumb":{"@id":"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2#primaryimage","url":"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/cover-history-of-ds-part2.png","contentUrl":"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/11\/cover-history-of-ds-part2.png","width":1400,"height":765},{"@type":"BreadcrumbList","@id":"https:\/\/uxmag.com\/articles\/a-brief-history-of-design-systems-part-2#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/uxmag.com\/"},{"@type":"ListItem","position":2,"name":"Design Systems","item":"https:\/\/uxmag.com\/topics\/design-systems"},{"@type":"ListItem","position":3,"name":"A Brief History of Design Systems. Part 2"}]},{"@type":"WebSite","@id":"https:\/\/uxmag.com\/#website","url":"https:\/\/uxmag.com\/","name":"UX Magazine","description":"UX Magazine is a central, one-stop resource for everything related to user experience. We provide a steady stream of current, informative, and credible information about UX and related fields to enhance the professional and creative lives of UX practitioners and those exploring the field. Our content is driven and created by an impressive roster of experienced professionals","publisher":{"@id":"https:\/\/uxmag.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/uxmag.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/uxmag.com\/#organization","name":"UX Magazine","alternateName":"uxmag","url":"https:\/\/uxmag.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uxmag.com\/#\/schema\/logo\/image\/","url":"https:\/\/uxmag.com\/wp-content\/uploads\/2021\/01\/UX-Magazine-logo-2.png","contentUrl":"https:\/\/uxmag.com\/wp-content\/uploads\/2021\/01\/UX-Magazine-logo-2.png","width":2440,"height":428,"caption":"UX Magazine"},"image":{"@id":"https:\/\/uxmag.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/uxmag","https:\/\/x.com\/uxmag","https:\/\/www.linkedin.com\/company\/ux-magazine\/"]},{"@type":"Person","@id":"https:\/\/uxmag.com\/#\/schema\/person\/7155568a86e268cd0e8ca7197f9487ca","name":"Nataliia Vlasenko","url":"https:\/\/uxmag.com\/contributors\/nataliia-vlasenko"}]}},"_links":{"self":[{"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/posts\/19663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/users\/2670"}],"replies":[{"embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/comments?post=19663"}],"version-history":[{"count":0,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/posts\/19663\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/media\/19675"}],"wp:attachment":[{"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/media?parent=19663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/categories?post=19663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/tags?post=19663"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/topics?post=19663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}