AI and the future of design: Designing with AI – Noah L, Jordan S, Andrew P, Vincent van der Meulen

Have you ever found yourself in the familiar loop of nudging pixels, fine-tuning a login screen for the tenth time, or manually sifting through hundreds of comments after a design critique? Many designers can relate to the inherent tension between the tedious, repetitive tasks that consume valuable time and the strategic, creative problem-solving that truly defines our craft. As we navigate the complex landscape of modern product development, the promise of technology alleviating these pain points has always been a beacon. Indeed, the advent of artificial intelligence (AI) within our design tools represents not just another incremental update, but a profound paradigm shift, poised to reshape the very essence of how we approach design.

The recent discussions at Config 2023, particularly insights from Figma’s VP of Design, Noah Levin, and the pioneering team behind Diagram (now part of Figma), underscore this pivotal moment. They illuminate a future where AI acts as an intelligent co-pilot, not merely automating simple actions, but fundamentally transforming our creative potential and collaborative workflows. This shift isn’t about replacing the designer; it’s about elevating the discipline to unprecedented levels of strategic impact and creative exploration.

The Evolving Canvas: How AI Redefines Design Fundamentals

Design, at its core, involves solving problems for people. This timeless definition, as articulated by Noah Levin, transcends the superficial act of merely “pushing pixels.” Historically, the evolution of design has always been intrinsically linked to technological advancements. Consider the shift from hand-drawing every letter to the scalable output of the printing press, which, rather than eliminating typography, allowed us to focus on its intentional application within content experiences. Similarly, early animation involved laborious frame-by-frame drawings, a process now dramatically accelerated by computers, enabling creatives to focus on compelling storytelling. Even digital photography, with its expansive capabilities compared to early cameras, still relies on the designer’s eye to shape narratives.

In the last decade alone, we’ve witnessed significant transformations, from desktop to mobile-first paradigms, single-player to multiplayer collaboration, and the rise of remote and hybrid work models. Each transition demanded adaptation, learning, and the recalibration of our design practices. Consequently, AI emerges as the next frontier, prompting us to re-evaluate our methodologies. This transformation promises to free designers from the “atom-level” manipulation of elements, propelling us towards a focus on broader patterns and end-to-end user experiences. Far from diminishing the need for thoughtful design, AI acts as a sophisticated assistant, augmenting our capabilities and allowing us to explore more ambitious creative outputs.

A Tripartite Transformation: Product, Process, and People in the Age of AI

The integration of AI into design workflows is set to instigate a multifaceted transformation, touching upon what we create, how we operate, and even the individuals involved in the design process. This tripartite framework—product, process, and people—provides a clear lens through which to understand the impending shifts, promising an era of unprecedented efficiency and collaborative potential.

What We Design: From App-Centric to Task-Based Computing

The traditional paradigm of opening monolithic applications and navigating complex interfaces to achieve an intent is steadily giving way to a more dynamic, task-based computing model. Emerging technologies, exemplified by large language models (LLMs) like ChatGPT, are challenging the conventional app-centric approach, potentially moving users back towards a simpler model of expressing intent through natural language queries and receiving direct answers or actions. This shift signifies a powerful reimagining of user experiences, where the software’s primary goal is to accomplish a specific task with minimal friction. Therefore, AI can simplify the need for overly complex interfaces, enabling design efforts to stay laser-focused on core jobs-to-be-done—whether it’s booking a flight, planning an itinerary, or ordering dinner.

This evolving landscape necessitates that product designers pivot their focus from merely constructing apps and websites to designing for intentions and actions. The goal of our software has always been to bridge human intentions with tangible actions, and AI promises to make this bridge more intuitive and efficient. Consequently, designers must consider new ways of abstracting complexity, gradually obscuring the underlying machinery to provide a more seamless and purpose-driven user journey. Regardless of the future form of our tools, the constant remains the need for visual comparison, collaborative refinement, and collective decision-making to forge exceptional experiences.

How We Design: Strategic Curation Over Atomic Manipulation

Contemporary design often entails meticulous, atom-level adjustments—small, rigid elements manipulated individually, which can sometimes feel overconstrained. However, AI is poised to shift this paradigm dramatically, moving designers beyond the incessant “wrestling with rectangles” to a more strategic, pattern-focused approach. Drawing parallels with Brad Frost’s atomic design methodology, AI can help us transcend the granular, freeing us to consider the core flows and overarching experiences we aim to create. For instance, instead of laboriously nudging a login screen or manually selecting components, AI can leverage existing design systems and operating system guidelines to automate much of this monotonous work.

This intelligent automation elevates the designer’s role, allowing for deeper engagement with strategic considerations, the application of discerning taste, and the curation of coherent user journeys. Design systems have already laid the groundwork for this adjustment, abstracting away countless small decisions that, while sometimes important, often consumed disproportionate amounts of time due to the manual effort involved. By offloading these repetitive tasks, AI empowers designers to allocate their cognitive energy to higher-order problems, fostering innovation and enhancing the overall quality of the user experience. The emphasis shifts from creation *ex nihilo* to the curation and strategic application of intelligent outputs.

Who Designs: Broadening the Collaborative Design Landscape

The impact of AI extends beyond tools and processes to fundamentally alter the very fabric of who participates in design. Traditionally, there has been a significant barrier—a “hard floor”—preventing non-designers from meaningfully contributing to visual collaboration. Concurrently, even skilled designers operate within a “ceiling,” constrained by the limitations of current tools in realizing their most ambitious visions. AI promises to address both these boundaries simultaneously. By automating complex visual tasks and offering intuitive interaction models, AI will significantly lower the floor, enabling cross-functional stakeholders—product managers, engineers, marketers—to participate more freely and visually in the design process, transforming them into true “design partners.”

Simultaneously, AI will raise the ceiling for experienced designers, unleashing new heights of creative output and enabling the creation of previously unimaginable products and experiences. This dual effect will cultivate a shared design space where collaboration flourishes, and the distinction between roles blurs, emphasizing collective goals over individual titles. Figma’s history of pioneering multiplayer collaboration on the web serves as a testament to the power of such shared environments. Embracing this collaborative future requires designers to lower their egos, recognizing that great ideas can originate from anywhere, and focusing intently on the shared problems that require innovative solutions.

Figma’s Community-Centered Approach to Designing with AI

Figma’s foundational philosophy has always been community-centered, driven by the collective needs and contributions of its users. This DNA deeply informs its strategic approach to integrating AI into its platform. Recognizing that AI is not a singular feature or product but a pervasive technology, Figma is positioning it as a comprehensive platform designed to assist designers throughout their entire end-to-end design process. This strategic perspective, emphasized during Config 2023, underlines a commitment to empower the community, rather than dictate how AI should be used.

The acquisition of Diagram, a company at the forefront of AI-powered design tools, further solidifies Figma’s ambition in this space. This strategic move brings together deep expertise in AI with Figma’s robust platform and vibrant ecosystem. The rapid emergence of over 100 AI-related plugins within the Figma community in just the last few months clearly demonstrates the urgent demand and creative ingenuity already at play. Figma’s role is to cultivate this burgeoning ecosystem, ensuring that AI serves as a powerful assistant that complements, rather than dictates, the designer’s workflow.

AI Across the Design Lifecycle: Brainstorming, Designing, Building

AI’s utility in the design process spans the entire lifecycle, acting as an intelligent assistant from the nascent stages of ideation through to the final build and collaborative iteration. This pervasive integration aims to streamline workflows, accelerate execution, and foster deeper insights, fundamentally transforming how design teams operate.

Enhancing Brainstorming and Idea Generation

In the crucial brainstorming phase, AI can dramatically augment collaborative efforts. Large Language Models (LLMs) are exceptionally adept at generating diverse ideas, clustering similar concepts, and synthesizing disparate pieces of information. For instance, AI can help teams brainstorm icebreakers for meetings, organize and cluster complex ideas from extensive sessions, or summarize lengthy conversations into actionable next steps. This capability significantly reduces the manual overhead associated with sifting through raw data, allowing teams to quickly identify patterns, prioritize insights, and move forward with clarity. The efficiency gained here means less time spent on administrative tasks and more on creative exploration.

Streamlining the Core Design Phase

As designers transition into the core design phase, AI offers powerful tools to accelerate creation and deepen exploration. It can facilitate faster starts by generating initial layouts or suggesting component recommendations based on existing design systems and screen context. Imagine designing an interface and having AI intelligently suggest appropriate album covers or other content, filling in details from your system to save precious time. Furthermore, AI can help designers stay in a continuous flow by proactively chaining together relevant plugins; for example, pulling a color palette from an image and then immediately generating a first draft of a style guide. Tedious tasks, such as resizing elements across different device sizes, translating content into multiple languages, or applying various themes, become instantaneous with AI, allowing designers to focus on strategic choices rather than repetitive adjustments, especially when integrated with powerful features like variables.

Bridging Design and Development with AI-Powered Build Tools

The transition from design to development has historically been a point of friction. However, AI, particularly when integrated with tools like Figma’s Dev Mode, promises to create a seamless continuum. AI can significantly enhance communication and hand-off processes by generating code based on selections within a design file. This capability extends to finding existing code references that are similar to selected components, ensuring consistency and accelerating development. Moreover, AI can facilitate rapid iterations by suggesting small code tweaks directly from modifications made in the Figma file, fostering a more agile and responsive development cycle. The long-sought “holy grail” of matching components in code to their design counterparts in Figma inches closer to reality, promising unparalleled efficiency and accuracy in the build process.

The Iterative Power of AI-Assisted Collaboration

Beyond individual phases, AI serves as an invaluable partner throughout the entire collaborative and iterative design journey. In large, complex organizations, understanding the context of numerous design files, managing feedback, and staying abreast of relevant work can be overwhelming. AI can dramatically alleviate these challenges. For example, after a design critique that generates hundreds of comments, AI can instantly summarize key feedback, identifying common themes and actionable insights. This capability ensures that valuable feedback is not lost in volume, making it easier for design teams to process and prioritize revisions.

Furthermore, in environments with hundreds of designers and countless files, AI can help individuals discover relevant work, important discussions, and impactful projects across the organization. It acts as an intelligent curator, bringing critical information to the forefront and fostering a more interconnected and informed team. This enhanced context and communication ultimately lead to more effective collaboration, enabling teams to move faster and with greater collective understanding. The collaborative iterative process becomes not just more efficient, but also more intelligent, guided by AI-powered insights.

Diagram’s Journey: Pioneering Design Assistants

The journey of Diagram, now a pivotal part of Figma’s AI strategy, exemplifies the relentless pursuit of intelligent design tools. Founded in late 2021 by a team of five, Diagram explored what they termed “design tools from the future,” navigating various product iterations from an “automation era” to an “intelligence era.” Early explorations by the Diagram team members, such as Andrew Pouliot’s work on the node-based prototyping tool Origami and his generative AI experiments with images in 2018, or Jordan Singer’s Sketch plugin that used natural language for canvas manipulation in 2018, showcased a deep-seated curiosity about the intersection of AI and design. Vincent van der Meulen’s work at Uber on internal design tooling, like finding source files from screenshots, further highlighted the practical challenges AI could solve.

Technical Innovations in Representing Design

A significant breakthrough for Diagram came with the release of the GPT-3 API in mid-2020. This, combined with the power of the Figma Plugin API and its rich developer ecosystem, and the increasing systematic nature of design systems, created fertile ground for innovation. A critical technical challenge involved translating the visual Figma canvas into a format comprehensible by a language model, which primarily understands text. While converting Figma layers to bulky JSON was an initial thought, the team discovered that GPT models were surprisingly effective at building websites using HTML and CSS. Consequently, they pioneered an approach to convert Figma designs into web code, such as React. This method was a game-changer because it allowed GPT to “think” in terms of existing components and design systems, effectively lowering the pressure for the AI to be a great visual designer and instead empowering it to assemble designs using established “Lego blocks.” This innovation led to concepts like Genius AutoSuggest, which proactively suggests ways to complete a design as a user works.

The Promise of Genius Chat: Conversational Design Assistance

The arrival of ChatGPT fundamentally shifted user expectations for direct, interactive AI experiences, spurring Diagram’s development of “Genius Chat.” This early-look prototype brings the magic of conversational AI directly into the Figma canvas. Users can interact with Genius in a direct, natural language manner, receiving personalized feedback and allowing the AI to directly edit their files. Imagine typing, “Add some imaginary songs” to a music app screen, and Genius instantly populates a list of components with relevant text. Or simply selecting a screen and asking it to “Add some copy,” which it then generates in real-time. Moreover, Genius Chat can act as an intelligent design consultant, allowing users to ask questions like, “Where should I add a search bar?” and receiving relevant design advice based on the on-canvas context.

This conversational interface extends to integrating external APIs, such as calling a glyphs model to generate design options within the chat itself. The collaborative principles inherent to Figma, like multiplayer functionality and cursor chats, are remarkably effective when applied to AI interaction, allowing users to visibly see where Genius is working. This level of transparency fosters a sense of partnership rather than replacement, underscoring the vision of AI as a co-creator. The ongoing development of Genius Chat, with its focus on human-like interaction and direct file manipulation, represents a bold step towards a truly intelligent and intuitive design assistant within the Figma ecosystem, built on community feedback and collaborative co-creation.

Navigating the AI Design Landscape: Your Questions & Answers

What is the main idea behind using AI in design?

The main idea is that AI acts as an intelligent co-pilot, helping designers automate repetitive tasks and focus more on strategic, creative problem-solving.

Will AI replace human designers?

No, the article emphasizes that AI will not replace designers. Instead, it aims to elevate the design discipline, augmenting human capabilities for more creative exploration.

How does AI change how designers create things?

AI helps designers move from focusing on small, individual elements to a more strategic, pattern-focused approach, allowing them to concentrate on broader user experiences.

What is Figma’s plan for using AI?

Figma plans to integrate AI as a comprehensive platform throughout the entire design process, assisting designers and empowering their community with new tools and capabilities.

Leave a Reply

Your email address will not be published. Required fields are marked *