Design system tools history

How we got here: the design tools arms race leading to Figma

In the past two decades, the landscape of UI design tools has transformed radically, from repurposed desktop software to specialized, cloud-based collaborative platforms. This evolution was driven by solving the right problems that designers faced: the tools that addressed these pain points ultimately won out.

Several key tensions defined the “design tools arms race”:

• Desktop vs. cloud: Early design software ran on local machines, while newer tools embraced the web for accessibility and seamless updates.
• Single-player vs. multiplayer: Traditional tools were single-user and file-based, whereas modern tools enable real-time collaboration.
• Screens vs. systems: The focus shifted from crafting individual page mockups to managing entire design systems of reusable components and styles.
• Static mocks vs. interactive prototypes: Designers moved from static images to clickable prototypes that better simulate user experience.
• Files vs. web-native workflows: Instead of sending around exported files, web-centric tools allowed sharing a live source of truth in the browser.
• Design silos vs. developer handoff: New tools increasingly facilitate developer-friendly outputs (specs, code, or tokens), bridging the gap between design and development.

Below is a historical timeline showing how these factors played out, and how each successive tool tried to solve the shortcomings of the last.
We’ll see why Photoshop, Sketch, InVision, Abstract, Adobe XD, and ultimately Figma each rose or fell in the race to meet designers’ needs.

Act 1: Wrong tools for the job (2000s-2010)

In the 2000s, Adobe Photoshop was the dominant tool for interface design, not because it was well-suited for the job, but because there were few alternatives. Photoshop was originally built for photo editing and print graphics, yet designers adopted it for web and app UI design out of necessity. This was akin to “using a hammer to dig a hole,” as one designer quipped. Basic interface tasks like maintaining consistent buttons or updating text across screens were tedious in Photoshop, which lacked specialized UI features.

Adobe Fireworks (originally by Macromedia) was one bright spot, a tool explicitly “made for web designers” to create website prototypes and application UIs. Fireworks supported vector objects, pages, symbols, and slices tailored to screen design. Many UI designers preferred it over Photoshop for its focus and agility. However, Adobe discontinued Fireworks in 2013, citing overlap with Photoshop and Illustrator. By the late 2000s, Adobe had introduced rudimentary UI-oriented features into Photoshop (like layer comps for multiple screen states, and later artboards), but these felt bolted on.

Until about 2010, professional designers were still creating the majority of their mockups using software intended for photo editing and print design. The 2000s were a decade of using the wrong tools for the job. Designers hacked their workflows in Photoshop with naming conventions, endless PSD files, and manual “redline” annotations to communicate with developers. Collaboration was largely ad-hoc, sharing static images or PDFs via email, and version control meant appending _v7_final_final.psd to filenames.

why it mattered: The stage was set for a new generation of tools that would actually cater to interface designers’ needs.

Act 2: Sketch changes the game (2010-2015)

The year 2010 marked a turning point with the launch of Sketch by Bohemian Coding. Sketch was the first mainstream design tool built from the ground up for UI/UX design rather than photo editing. It stripped away the print-centric complexity of Adobe’s suite and focused on what digital product designers needed: flexible artboards, vector shapes, text styles, and reusable symbols.

By removing photo filters, printing presets, and other baggage, Sketch offered a lightweight, faster workflow for interface design. As one founder’s analogy went, “If Illustrator was a Swiss army knife, Sketch was a scalpel”, a specialized tool for screen design.

Several innovations helped Sketch rapidly gain a following:

• Reusable symbols and styles: Sketch reintroduced the concept of symbols (which had existed in Flash and Fireworks) to mainstream design. Designers could create a button or icon once and reuse it across screens; updating the master would update all instances. This approach to consistency was a precursor to today’s design systems.
• Artboards & grids: Native support for multiple artboards in one document made it easy to design many screens or responsive variants side by side (something Photoshop added only later).
• Vector-first: UIs often need resolution-independent graphics. Sketch was vector-based by default (unlike Photoshop’s bitmap foundation), which suited modern high-DPI screens and iconography.
• Plugin ecosystem: Sketch was extensible, and a vibrant plugin ecosystem sprang up. Designers could add tools for icon libraries, content generation, design linting, and more. This extensibility kept Sketch lean while enabling power-user workflows through third-party plugins.
• Affordability and OS: Sketch was Mac-only (which limited its audience but matched where many design teams worked) and sold for a low one-time price (~$99) rather than Adobe’s hefty suite licenses.

The impact was enormous. Sketch quickly attracted designers frustrated with Photoshop’s complexity. By the early-to-mid 2010s, Sketch had overtaken Photoshop as the primary UI design tool for many companies. Adobe inadvertently accelerated this: when Adobe killed Fireworks in 2013, many loyal Fireworks users flocked to Sketch. For a period, Sketch became synonymous with modern digital product design.

However, Sketch’s architecture had its own limitations. It remained a desktop, single-user application: collaboration meant sending Sketch files back and forth (often via Dropbox or email), which led to version chaos if multiple people worked on the same file. Sketch files were essentially the new PSDs, lighter and more tailored, but still files that could conflict or go out of sync. Moreover, being Mac-only excluded Windows- or Linux-based team members from the design process.

why it mattered: Sketch “changed the game” by solving the core UI design problem that Photoshop never addressed, ushering in a new era of fast, vector-based design for screens. Yet, its single-player, file-based nature meant new problems were on the horizon, particularly around teamwork and integrating design with prototyping and development.

Act 3: The collaboration problem (2015-2017)

By the mid-2010s, design teams were hitting a pain point: collaboration. As products became more complex, multiple designers often needed to work in parallel, and developers needed easy access to design outputs. Sketch provided no mechanism for live collaboration or feedback. Designers were “still working with software that only allows a single user to work on a file at a time.” The result was what many called “version hell”: dozens of Sketch files with overlapping changes, and uncertainty over which version was final.

This period saw a flurry of stop-gap solutions and new tools aimed at collaboration and handoff:

InVision (2011): prototyping and handoff platform

InVision emerged as a platform to upload static design screens and link them into interactive prototypes. Designers could sync artboards from Sketch or Photoshop to InVision, then stakeholders and developers could comment on or inspect the prototype in a browser. This greatly improved design communication. By 2015, InVision had over 2 million users and was a critical companion to Sketch at many companies. However, InVision itself was an external, read-only layer atop the design files. It did not let multiple people actually design together in real time.

Abstract (2017): version control for Sketch

Taking inspiration from developer tools (Git), Abstract launched as “a platform for file-based design collaboration” bringing branching, merging, and version history to Sketch files. Designers would manage Sketch documents in Abstract, check out branches to make changes, and then merge them back, similar to how engineers collaborate on code. This addressed the versioning issue (no more landing-page_final_FINAL.sketch files) and allowed some parallel work without overwriting each other’s changes.

By late 2017, Abstract exited beta and was in use at thousands of companies. It was a clever solution to a collaboration problem, but it required designers to adopt a complex new workflow, and it was essentially bolting a Git-like system onto an app (Sketch) that wasn’t originally built for cloud collaboration.

Adobe XD (2015): the incumbent strikes back

Recognizing the Sketch wave and the collaboration gap, Adobe rushed to develop its own modern UI design tool. First previewed as “Project Comet” and later released as Adobe XD in 2016, it offered a stripped-down, fast design interface (more similar to Sketch) and included built-in prototyping features. Adobe “introduced XD in 2015 as a response to the market loss that Sketch and Figma had presented.”

While XD was reasonably fast and eventually cross-platform, Adobe was late to the party. By the time XD matured, many designers had already adopted Sketch or Figma. Moreover, early versions of XD lacked the rich plugin ecosystem and features parity, making it feel like a follower.

Figma (2015-2016): browser-based, multiplayer design

Amid these developments, a startup called Figma was quietly building a design tool with real-time collaboration as a core feature, not an afterthought. Figma launched its beta in 2015 and publicly in 2016 as the first truly browser-based UI design app. It was often described as “Google Docs for design”. Multiple people could literally open the same file and work together concurrently, seeing each other’s cursors and edits live. This was a breakthrough: no other design tool had enabled multiplayer editing at this scale before.

Figma’s approach directly addressed the collaboration problem. Because it was built web-native and cloud-first, there were no separate files to manage; the “source of truth” was a URL everyone could access. Designers, developers, copywriters, and clients could all comment on or inspect the live design file. As Designlab’s 2018 review noted, “Figma has the advantage of having been designed with true collaboration in mind from the outset. Developers [didn’t have] to integrate collaborative capabilities into an existing single-user product.” In other words, Figma had the right architecture for teamwork, whereas other players were trying to retrofit collaboration (Sketch with Abstract, Adobe with cloud docs) onto older paradigms.

By 2017, the writing was on the wall. Many teams still used Sketch (often with Abstract or InVision), but the limitations were frustrating.
Forward-thinking companies began trying Figma for its collaboration benefits. Internally, even InVision sensed the shift: an InVision sales executive in 2016 warned they were “losing more and more business to a small upstart called Figma.”

why it mattered: Figma made collaboration the default, not an afterthought. No more “who has the master file?” No more emailing Sketch files. The cloud-native, multiplayer architecture solved the version hell problem that plagued Sketch + Dropbox workflows.

Act 4: The systems era (2017-2020)

As design teams matured, design systems rose to prominence. Organizations like Google, IBM, Airbnb, and Shopify established centralized libraries of UI components and styles to ensure consistency across products. This trend placed new demands on design tools: it was no longer just about drawing individual screens, but about creating and maintaining a scalable system of components, often with multiple contributors.

During 2017-2020, both Sketch and Figma evolved rapidly to support the design systems movement, but with different degrees of success:

Sketch’s response: libraries & plugins

In 2017, Sketch introduced Shared Libraries, allowing teams to store Symbols in a central file and use them across documents. If a master component updated in the Library, those changes could propagate to everyone’s designs. This was crucial for consistency and was Sketch’s most requested feature, signaling how important design systems had become.

Sketch also improved its plugin API to enable tools that connected design to code. For example, in 2017 Airbnb built Lona, a tool to generate cross-platform UI code from Sketch components; and Shopify built Polaris Telescope, a plugin to quickly retrieve implementation guidelines for design components. These community-driven plugins underscore the era’s theme: bridging the gap between design and development.

However, managing Sketch libraries and plugins could be cumbersome, especially without real-time collaboration. Updates weren’t truly instant for everyone if individuals delayed pulling the latest library changes.

Figma’s rise: components, team libraries, and real-time systems

Figma, being cloud-based, offered an inherently easier way to manage design systems. From early on it had Components (analogous to Sketch Symbols) and by 2018 introduced Team Libraries so that shared components and styles could be published and used across files with one click. The real-time aspect meant that the moment a component was updated in Figma’s library, everyone saw it update in their files (or at least got a notification to review updates).

Figma also iterated quickly on system-friendly features: it added Constraints for responsive design, Auto Layout (2019) to create fluid, stackable components, and later Variants (2020) which let designers bundle multiple component states into one unified component set (e.g. a button with primary/secondary states, different sizes, etc.). These features made maintaining a design system far more practical. By treating design files as living documents in the cloud, Figma enabled a single source of truth that both designers and developers could reference.

InVision’s fade

InVision, which had thrived as a collaboration layer, began to struggle in this era. It attempted to expand beyond prototyping, notably launching InVision Studio in 2018 as a standalone screen design tool to compete with Sketch/Figma, and a Design System Manager (DSM) to store components. But these arrived late and didn’t gain much traction.

Why? Figma in particular made several of InVision’s functions redundant: Figma’s built-in prototyping reduced the need to export to InVision, and Figma’s cloud libraries competed with DSM. InVision’s user base peaked around 2018-2019 and then declined as Figma’s soared. By 2019, surveys showed Figma’s usage eclipsing InVision’s for prototyping purposes. In short, InVision got caught in the middle. It wasn’t a creation tool like Figma, but Figma had encroached on its collaboration niche.

Abstract vs. Figma

Similarly, Abstract’s proposition (version control for design) became less compelling once teams adopted Figma. If everyone could collaborate in one live Figma file, the need to manage branches of Sketch files diminished. Abstract did gain a following in big organizations using Sketch during 2017-2018, but Figma’s real-time, single-source approach was a fundamentally different solution to the same problem. As Figma adoption grew, Abstract found itself addressing a shrinking market of Sketch-only teams.

why it mattered: By 2020, Figma had clear momentum. It was becoming the standard at startups and increasingly in big companies, not just for design, but as a collaborative space for whole product teams. Design systems drove this shift: Figma’s multiplayer architecture and systems features solved the major problems its predecessors could not (cloud access, live collaboration, unified design+prototype workflow, easy library updates).

Act 5: Design tokens and developer handoff (2020-2023)

Entering the 2020s, the focus expanded to bridging design and code even more directly. The concept of design tokens (named values for colors, typography, spacing, etc., used in both design tools and in code) gained popularity as a way to ensure consistency and facilitate design-to-development handoff. The question arose: could design tools and code speak the same language?

Figma’s developer-centric features

In mid-2023, Figma announced a major update centered on designers and developers working together. It introduced Variables (essentially Figma’s take on design tokens) and a new Dev Mode workspace. Variables allow designers to define reusable values (colors, font sizes, spacing scales, etc.) and switch “modes” (for example, light vs dark theme values), connecting directly to the idea of tokens that engineers use in code. This meant a design change (like updating a primary color) could map to a token that developers also reference.

Dev Mode provided developers a more code-like view in Figma, with features such as code snippets, integrations to VS Code, and easier inspection of token names and component properties. In short, Figma was evolving from a pure design tool into a collaborative environment for product teams to go “from design to build” more seamlessly.

Adobe’s $20B bid (and miss)

In September 2022, Adobe stunned the industry by announcing plans to acquire Figma for $20 billion, a testament to Figma’s dominance and perhaps Adobe’s own inability to dislodge it with XD. The proposal immediately raised questions about competition, and indeed regulators scrutinized it heavily.

By late 2023, after a year of review, Adobe “mutually agreed to terminate the merger agreement” due to no clear path to regulatory approval. In Adobe’s official statement, they noted they still believed in the deal’s merits but had to move forward independently given the opposition. This twist meant Figma would remain an independent company (much to many users’ relief), continuing to challenge Adobe on its own. Adobe XD, meanwhile, has largely fallen by the wayside. Adobe stopped adding major features, and many assumed XD would not survive long-term.

Sketch’s “too late” pivot

By 2020, Sketch’s user base had eroded as Figma surged. In response, Sketch’s developers belatedly introduced features that, years earlier, had set Figma apart. In 2020-21, Sketch launched Sketch for Teams with a web-based workspace, and in March 2021 added real-time co-editing (Sketch 71). They essentially built a cloud service around the macOS app: documents could sync to a web platform where collaborators (with Mac licenses) could simultaneously edit. Sketch also transitioned fully to a subscription licensing model in this period.

Unfortunately, these changes were seen as “catching up” to Figma rather than leapfrogging it. Reviewers noted that the long-awaited collaboration feature was nicely implemented, but Sketch still carried the baggage of Mac-only limitation (the web app, while useful for commenting or handoff, did not allow designing on Windows). Moreover, features like a browser inspect mode for developers, while added, were already table stakes that Figma (and even Adobe XD) had for a while. As one 2021 commentary summed up: “Sketch doesn’t offer anything more than what other apps offer. It adds [only what] everyone else has for free and still [lacks] what all UI/UX professionals really expected: cross-platform support.”

The fall of InVision

InVision’s arc completed in dramatic fashion. After struggling for a few years, InVision announced in January 2024 that it would be shutting down by end of 2024. A FastCompany report recounts how InVision, once valued at $1.9B in 2019, was undone by a mix of Figma’s competition and its own strategic missteps.

In the mid-2010s, InVision’s prototype links were ubiquitous at Fortune 100 companies, but it failed to evolve into a full creation tool.
Looking back, founder Clark Valberg admitted, “We could have built something better than Figma, before Figma. [But] we didn’t fully appreciate the competitive threat Figma posed until it was game over.” InVision spent heavily on content marketing and auxiliary products, but was “in a constant state of trying to play catch-up” on the product side.

The epilogue of InVision’s story reinforces the theme: as design and collaboration converged into unified tools, any separate link in the workflow (a prototype tool, a handoff tool, a version control tool) had to either transform or perish. Figma’s all-in-one platform simply made many of those single-purpose tools obsolete.

why it mattered: By 2023, the design tool landscape had effectively consolidated around Figma as the leader, with Adobe (Illustrator/Photoshop/XD) and Sketch as niche alternatives. The focus was now less on adding more drawing tools, and more on deeper integration: design systems, design-to-code, and even AI-assisted design.

Act 6: AI and “what’s next?” (2024-future)

As of 2024-2025, a new frontier is emerging in design tooling: artificial intelligence. The question now is how AI will change the way we design and build products, and whether today’s design tools will evolve into something entirely different.

Where we are now

By 2024, the race was over. Figma had become the industry standard. Sketch had retreated to a Mac-loyalist niche. Adobe XD was on life support.
InVision was dead. The next competition wouldn’t be about collaboration or design systems (those were solved problems). The new frontier was AI.

Generative design tools

Several startups and projects are exploring AI that can generate UI designs from prompts. For example, Galileo AI gained attention by producing editable Figma mockups from a text description. More significantly, Figma itself has introduced Figma Make, an AI-powered feature where you can “describe the interface” in words and have Figma generate a suggested UI layout, complete with editable components.

Early demos show that you can prompt, say, “a mobile onboarding screen with a title, image, and sign-up form,” and Figma Make will create a reasonable facsimile in your file, which you can then refine. This hints at a future where designers act more as curators or editors of AI-generated designs, focusing on higher-level direction while the AI handles pixel-level exploration. Of course, design is nuanced. Visual and UX quality still require human judgment, and AI outputs often need heavy tweaking. But the efficiency gains for rapid ideation are enticing.

Design to code (finally?)

A long-standing dream has been tools that directly translate high-fidelity designs into production-ready code. We’ve seen many attempts: from Dreamweaver’s generator in the early 2000s, to modern tools like Webflow (design in a coded framework) and Vercel’s v0 (which uses AI to turn Figma designs into React code).

v0 is particularly noteworthy in 2024/25: it integrates with Figma’s API to analyze designs and spit out front-end code. However, reviews indicate it’s “not quite magic yet”. It can produce boilerplate for simple designs, but struggles with complex layouts and often requires significant cleanup and manual fixups. One tester noted “it seems to convert your Figma file as a flattened screenshot rather than truly understanding components or constraints”, leading to imperfect results.

The takeaway is that design-to-code is very hard to get right, but progress is being made. Figma’s introduction of variables and tokens is one step (making the design file structurally more like code), and AI will likely improve in mapping design intent to real UI code.

Design systems as AI context

At Figma’s Schema 2025 conference, a new theme emerged: design systems aren’t just for humans anymore. They’re becoming context layers that enable higher-quality AI outputs. As Figma’s team noted, “Design systems are the context by which your whole brand unfolds and is experienced. They are the context by which your team is going to differentiate and ship better products faster.”

This means maintaining robust design systems isn’t just for human consistency, but could enable AI to work with our designs more intelligently.
Features like Code Connect and the Model Context Protocol (MCP) allow design systems to feed context directly to AI coding tools like GitHub Copilot, improving the precision and quality of AI-generated code.

Open questions

Three unresolved questions will shape the next five years:

• Will designers still draw boxes? If AI can generate a decent first pass at an interface, perhaps the designer’s role becomes more about defining the problem, the user flows, the content, and the constraints, and then refining AI outputs. It’s similar to how architects now use CAD software heavily (they still design, but some drafting tasks are automated).
• Can AI truly understand design intent? Current AI tools can match patterns and generate plausible layouts, but understanding context, user needs, brand voice, and nuanced interaction design remains a human skill. The question is whether AI will get good enough to handle more of this, or whether it will always need human direction.
• Who will win the AI race? Figma today sits at the top due to solving collaboration and systems problems with the right architecture. But to maintain its lead, it will need to tackle these emerging AI demands. Meanwhile, competitors (whether Adobe, a revived Sketch, or entirely new players) will aim to leapfrog via AI or other innovations.

why it mattered: The next “arms race” among design tools will be who best integrates AI to make designers more productive without sacrificing control or creativity. Figma’s bet on design systems as AI context positions them well, but the story is far from over.

Conclusion: solving the right problem wins the race

Looking back over this narrative, a clear theme emerges: the tool that solved the real problems won. Each major player in the design tools saga had strengths and blind spots, and their success depended on aligning with the true needs of designers at the time:

• Adobe Photoshop: Hugely powerful, but it was solving the wrong problem for UI designers. Photoshop was built for photo editing and print graphics, not interfaces. It introduced the concept of layers and had tons of features, but lacked the structure and efficiency UI design required (no reusable components, no multi-screen workflow). Thus, it was ripe for disruption once an alternative appeared.
• Sketch: Identified the right problem (the need for a dedicated, lightweight UI design tool) and initially succeeded brilliantly. Sketch’s focus (vector UIs, symbols, artboards) and depth-over-breadth philosophy made it beloved. However, its architecture was single-player and desktop-bound. In an increasingly connected and cross-platform world, this became its downfall. Sketch solved yesterday’s problem (making individual designers faster) but not the emerging one (multiple designers working together remotely).
• InVision: Nailed a crucial problem of the 2010s (how to prototype and get feedback) and for years was indispensable. Its mistake was remaining a separate tool rather than a fully integrated solution. InVision was always a step in between design and development, not where design itself happened. Once Figma and others combined design + prototyping + comments in one place, a standalone prototyping tool felt unnecessary.
• Abstract: Tackled the right problem (version control and collaboration) but in a too roundabout way. Abstract was essentially a band-aid for Sketch’s single-user design: it introduced heavy concepts from software development to designers. While pioneering and useful for some, it couldn’t compete once a “native” solution (Figma’s multiplayer files) arrived that made version control largely invisible.
• Adobe XD: A case of right problem, arguably wrong execution. Adobe did recognize the need for a simpler, screen-focused, collaborative tool (XD had some live co-editing and sharing features eventually). But by entering in 2016, Adobe was chasing a moving target. XD never truly leapt ahead of Sketch or Figma in any major way; at best it achieved parity in some features. Adobe’s real answer ended up being attempting to buy Figma.
• Figma: Solved the right problems at the right time with the right architecture. It recognized that multiplayer collaboration, cross-platform accessibility, and design systems integration were the pain points to attack (not just offering another drawing tool). By being browser-based and real-time from day one, Figma built what Sketch or Adobe would later scramble to retrofit. Figma also saw the importance of bridging to development (hence features like Inspect, and later Variables/Dev Mode). This combination (a design tool that’s not just for designers in isolation, but for the whole team’s workflow) is what made it a category winner.

For students, practitioners, or anyone interested in product design, the rise of Figma is more than a tale of one app beating another. It’s a case study in product strategy and identifying user needs. The evolution teaches us that:

• Adopting new technology paradigms (like cloud and multiplayer) can redefine an industry if they truly solve user pain (no one misses manually merging design files).
• A tool’s success isn’t just about features in isolation, but about fitting into a broader workflow. Integration and removing friction can trump having the most powerful drawing tools.
• The future will always bring new challenges (today it’s AI and design-to-code), and the next winners will be those who address those challenges without forgetting the core needs of users (in this case, delivering great user experiences).

The arms race isn’t over. But if history is any guide, the winners will be those that focus on solving the right problems at the right time, just as Figma did in the 2010s. As design and development continue to converge, we’ll watch keenly to see which tools adapt and which new players might emerge with even better solutions. In the end, designers will gravitate to whatever empowers them to create, collaborate, and bring their ideas to life with the least friction, and the companies that enable that will write the next act of this story.