Smarter, Faster, Human: The Future of Design Systems with AI

Practical Benefits in Action: Accessible Color-Palette Expansion Using GenAI

AI-driven workflows have shown their strength in enhancing accessibility while maintaining brand identity. For example, consider the original color palette shown in Figure 1, comprising eight colors for use in a company’s design system for data visualization. While visually appealing, it lacked complementary, accessible shades that would support complex data visualizations and ensure compliance with accessibility standards.

Using GenAI, I extended this palette to create a new, accessibility-optimized color palette. The AI-generated palette introduced complementary colors that adhered to WCAG (Web Content Accessibility Guidelines) standards, providing contrast ratios that are suitable for use in data-heavy applications such as dashboards.

A Sample Prompt for Generative AI

Generate a set of 16 tints and shades of color that are complementary to the following hex codes: [#4E79A7, #F28E2C, #76B7B2, #E15759, #AF7AA1, #59A14F, #EDC949, #9C755F]. Ensure that each color meets WCAG AA standards for contrast when on and black and white backgrounds, respectively, and label each output with its contrast ratio.

As shown in Figure 2, the output of this prompt provided hues that were not only accessible but also visually harmonious, staying true to the original brand palette. This AI-powered innovation reduced the manual effort of experimenting with color combinations and testing them for compliance, reducing what could have been weeks of work into hours.

Results

The results of this prompt provided the following benefits:

• time saved—Reduced color-palette generation time by over 80%.
• team impact—Empowered nondesign stakeholders to confidently implement these colors across projects.
• business outcome—Faster deployment of data visualizations with reduced back-and-forth between designers and developers.

The Human Role in AI-Driven Systems

AI speeds up workflows and automates rote steps, but design systems require greater human control to produce artistic, inclusive, culturally flexible outputs. AI lacks the strong contextual understanding and empathy necessary to know what users want or need. That’s where human expertise can help.

Where Humans Excel

The validation of AI results requires human judgment. For instance, AI could create some beautiful UI elements, but miss small cultural sensitivity or accessibility requirements. Designers must review these results to make them consistent with branding and user inclusiveness. Plus, human empathy can address the real-world experiences of all user groups, which AI cannot do.

Collaborative Workflows

Good AI-human collaboration is iterative. AI, for example, can design a scalable element such as a color scheme or a document, then designers can tweak it to be usable and culturally suitable. When designing accessible elements, the AI might provide early versions, then designers could design what is accessible and appealing to users. By combining an AI’s productivity with human imagination and creativity, teams can design innovative systems that focus on both function and value. This collaboration makes sure AI complements rather than takes the place of the human designer.

A Case Study: Figma Components with AI—Accelerating Data Visualization

Now, let’s consider an AI-powered approach to designing Figma components for data visualization.

The Challenge

Designing and documenting data-visualization components for enterprise applications is often a time-intensive, detail-oriented process. Creating scalable, configurable variants of charts such as line charts, bar charts, donut charts, and Sankey charts, as well as a comprehensive data table would typically require months of effort. This would include ideating variants, defining properties, and ensuring compliance with accessibility standards.

The AI-Powered Approach

This approach leveraged GenAI tools to streamline the creation of configurable data-visualization components at scale. Here’s how the process unfolded.

1. Prompting the AI to Generate Configurable Variants and Properties

Targeted AI prompts generated suggestions for multiple configurable variants of each chart type. Examples included the following:

• line chart—The AI proposed variants for single-series versus multi-series lines, options for grid-line density, and axis-scaling properties.
• bar chart—Suggested horizontal versus vertical bars, stacked versus grouped formats, and adjustable bar-spacing properties.
• donut chart—Variants included single versus multi-segment charts, inner-radius adjustments, and percentage label positioning.
• Sankey chart—The AI proposed configurable flow thickness, node placement, and interactive ToolTip options.
• data table—The AI recommended properties such as sortable headers, row grouping, and column resizing.

Prompt Example

Generate configurable variants for a line chart in Figma, with properties for axis scaling, gridline density, and multi-series support. Ensure all variants comply with WCAG color-contrast requirements and support screen-reader compatibility.

The AI tool instantly provided a structured, JSON-like output, detailing the properties and visual states for each type of chart, then seamlessly converted this output into Figma designs.

2. Autogenerating the Documentation

Using additional prompts, the AI drafted the initial documentation for each component, including usage guidelines, property descriptions, and visual examples. The AI generated the following two types of documentation:

1. Example documentation—For the bar chart, the AI generated detailed explanations regarding when to use stacked versus grouped charts and offered accessible color recommendations for each state.
2. AI prompt examples for documentation—Draft documentation for a donut chart included when to use it, accessibility requirements, and configuration options such as inner radius and percentage labels.

3. Providing Accessibility by Design

The AI prompts explicitly required compliance with accessibility standards, ensuring that all data-visualization colors and dimensions were WCAG compliant—for example, using contrasting hues for better visibility and generating chart labels in legible font sizes.

The Results

The combined power of AI and human expertise completed what would traditionally have taken months in just three weeks, producing the following results:

• scalable components—Created and implemented fully configurable variants of six data-visualization components in Figma.
• accelerated documentation—The AI-generated documentation required only minor human adjustments, significantly reducing the designer’s workload.
• accessibility compliance—Charts were 100% compliant with accessibility standards, ensuring inclusivity for all users.

Addressing Ethical Challenges in AI

AI can accelerate and scale design systems, but presents ethical risks so we must tread carefully. If left unchecked, the overuse of AI could be the source of usability gaps, discrimination, or even cultural demise.

Overcoming the Risks of Excessive Automation

The automation of design could rob us of human imagination and context awareness. For instance, a component library that an AI generated might have good technical quality, but lack cultural specificity or emotional understanding of different audiences. Automating components to the point of unreality could also lead to impersonal user experiences and, thus, damage users’ confidence and interactions.

Mitigating Bias

AI systems are only as impartial as the data on which they’ve been trained. If training datasets lack diversity, their design outputs could actually continue to cause systemic inequalities. Teams must compensate for potential bias by making datasets rich, with inputs that represent users of all geographies, demographics, and skillsets. Continual validation and bias checks can also keep AI-based design results fairly unbiased.

Fostering Transparency and Trust

If you want stakeholder buy-in, be sure to document an AI’s design contributions. For instance, telling users straight up that publicly available color palettes were AI generated would give clarity, with room for further input and editing. Teams should set up open communication channels and transparency for decision-making so AI results are legible and accountable. By keeping automation and human oversight in balance, confronting biases early, and creating transparency, UX teams can overcome ethical challenges and tap into AI’s full power.

Best Practices for AI-Human Collaboration in Design Systems

By defining roles clearly, fostering iterative improvement, and encouraging collaboration across disciplines, teams can maximize the potential of AI while ensuring that design systems are efficient, ethical, and human centered.

Defining Roles

When defining roles for the AI and humans, do the following:

• Assign repetitive tasks to the AI. Automate component generation, drafts of documentation, and basic accessibility checks to free up people.
• Focus human efforts on creativity. Reserve human involvement for projects involving empathy, cultural awareness, and creative problem solving.
• Validate AI outputs. Apply human validation to AI outputs to ensure coherence, inclusion, and practicality.

Continuous Improvement

To ensure continuous improvement, do the following:

• Establish feedback loops. Implement process loops in which humans review and improve AI algorithms over time.
• Monitor AI performance. Use statistics such as precision, accessibility, or usability scores to determine where improvement is necessary.
• Iterate regularly. Schedule iterations between sessions to keep AI-powered designs in line with changes in business objectives and user requirements.

Cross-Functional Teams

Leverage the power of cross-functional collaboration, as follows:

• Promote interdisciplinary collaboration. Engage UX designers, engineers, and product managers to ensure a unified view of the desired outcome.
• Leverage expertise. Engineers can refine AI's technical capabilities, while UX designers focus on user-centric outcomes.
• Share knowledge. Host workshops or collaboration sessions to ensure that all team members understand AI’s strengths and limitations in the design process.

Conclusion

AI can transform design systems by reducing time to value, automating repetitive work, and making these systems more accessible. However, we should use AI to augment, not as an alternative to human innovation and judgment. Through the careful implementation of AI in UX design, UX professionals can unleash greater levels of efficiency without sacrificing the human-centered design principles that provide authentic user experiences.

Looking ahead, AI-driven design systems have the potential to be faster and more inclusive, while still being ethically sound. When we connect technologies to our values, we can empower teams, optimize workflows, and design user experiences that speak to users across the globe—leading to a world in which AI and design work hand in hand to elevate the user experience.