Designing the Future: How Automation and AI are Revolutionizing Design Systems

In 2017, a thought-provoking exploration by Benjamin Wilkins linked design systems with machine learning to create code from basic wireframes. This ignited two streams of thought among the community:
(1.) Astonishment at the incredible potential, and
(2.) Apprehension about the implications for our careers.
As Nir Benita humorously quipped on Twitter, “I thought I had more time before I would be replaced by a machine.”

This conversation resurfaced recently when the team at Diagram* introduced Genius, an AI-powered tool that can interpret your Figma files and offer suggestions using components from your design system. This development actualizes Wilkins’ initial ideas. Jem Gold, a former AI research scientist at Airbnb, confirmed on Twitter that the early explorations were prototypes and had not been fully developed. However, these prototypes sparked the concept of AI-enhanced design, a concept that is becoming a reality as technology advances.

Marshall McLuhan, a renowned philosopher and theorist, stated that “We shape our tools, and thereafter our tools shape us.” This applies fittingly to the new generation of tools – from plugins and widgets to AI-enabled tech – that are revolutionizing design and raising existential questions: What is the role of a designer or developer when design and code can be automated? What happens when our tools evolve beyond enhancing our skills to completing our tasks? What implications does this have for the future of our practices and the entire industry?

Understanding the Evolution of Plugins & Widgets
The history of plugins and widgets is closely tied with design. The first plugins were developed in the 1970s for text editors and publishing software like Hypercard and QuarkXPress on Apple’s Macintosh computers. This gave rise to a microeconomy of creators who developed and sold custom effects, brushes, and styles for others to use.

Since then, many software companies have embraced user-generated enhancements, encouraging their growth through community forums and in-app marketplaces. Plugins for design systems are generally functionality-oriented and can be divided into two categories: those that automate existing tasks or extend features such as collecting analytics, testing designs, enhancing accessibility, etc.

The Figma Community page, for instance, showcases various plugins that automate routine tasks. Icon and image generators that help creators save time by avoiding the need to create assets from scratch or compress them are some of the most popular plugins. Other plugins automate workflows, convert designs to HTML, or transform designs into slide presentations. The common theme across all these is the reduction of complexity and workflow optimization.

Repetitive design tasks can cause physical discomfort, something anyone who has suffered from carpal tunnel syndrome or searched for “ergonomic keyboard designs” can attest to. Matthew Ström, a product design manager at Stripe, explains that complex design systems offer multiple solutions to any given problem. As a design system expands, each new iteration requires more time and effort. Automated testing and low or no-code tools can substantially expedite this process and save countless hours of manual work.

AI-Powered Future of Design Systems
While plugins enhance functionality and widgets enhance usability, AI provides a new foundation for both. By examining popular plugins and widgets, we can identify existing pain points and predict how AI might address them.

One evident need is the quick generation of icons, imagery, text, and other content. Several companies are already stepping up to meet this challenge. Shopify, for instance, recently announced AI-generated product descriptions for their storefronts, which they refer to as “Shopify Magic.” In a similar vein, Diagram’s latest plugin, Magician, employs deep generative models to insert icons, copy, and imagery into Figma design files based on text prompts.

As AI becomes more integrated into our design systems, it’s clear that its potential goes beyond merely automating repetitive tasks. The possibilities are virtually limitless, but a few key areas where AI might make significant contributions include:

  1. Predictive Design: AI has the potential to predict user behaviors and preferences, enabling designers to create personalized experiences in real-time. This could mean tailoring interfaces, graphics, and interactions based on user data and past behavior, or even making design suggestions during the creation process.
  2. Context-Aware Design: With AI’s ability to understand and interpret context, design systems could become more dynamic and responsive to individual users. This might include adapting to different screen sizes and devices, adjusting for user accessibility needs, or even reacting to environmental factors like lighting or time of day.
  3. Simplified Complexity: As design systems continue to grow in complexity, AI could help simplify the process of managing and navigating these systems. This might involve intelligent search and organization features, automated versioning and updates, or AI-driven analysis to identify inefficiencies or redundancies in the system.
  4. Improved Collaboration: AI could also enhance collaboration within design teams by facilitating communication, automating routine tasks, and providing insights to guide decision-making. This could include real-time feedback during the design process, AI-driven project management tools, or even virtual assistants to help manage workflows and deadlines.

As we look to the future, it’s clear that the intersection of AI and design systems holds enormous potential. While there may be concerns about job displacement or the loss of human creativity, it’s important to remember that these tools are designed to augment our abilities, not replace them. As with any technological innovation, the key will be finding ways to harness these capabilities while still preserving the human elements that make design such a powerful and expressive medium.

In closing, as the philosopher Marshall McLuhan reminded us, “We shape our tools, and thereafter our tools shape us.” As AI becomes more integrated into our design systems, we have the opportunity to shape these tools in ways that not only enhance our capabilities but also reflect our values, creativity, and humanity. The future of design systems may be automated, but it’s also incredibly bright.

See Also