Claude Design: A Sign of Things to Come?
Sam Henri recently explored their experience with Claude Design (opens in a new tab) and proposed a compelling theory about the future of design tools. The core argument revolves around how design tools have evolved to meet the needs of scaling product teams, and how recent advancements in AI, specifically Large Language Models (LLMs), are poised to disrupt that evolution.
Henri contends that as product teams grew, design needed to justify its place within engineering organizations. This led to a push for systematization within design tools like Figma—introducing concepts like components, styles, variables, and props. While some of these concepts borrow from programming, the overall system doesn't map neatly onto existing code structures. This has resulted in a complex and often unwieldy system, requiring specialized roles just to manage the design system itself.
The Figma Victory and Its Hidden Cost
Figma gained traction by establishing itself as the source of truth, partially by surpassing Sketch. However, Henri argues this victory came at a cost. Figma's proprietary, largely undocumented format makes it difficult to interact with programmatically. This inadvertently excluded Figma from the training data used to build LLMs. LLMs were trained on code, not Figma primitives.
As code becomes more accessible to designers and AI agents become more capable, Henri predicts a natural shift back towards code as the primary source of truth. The complex infrastructure built around tools like Figma, designed to address the limitations of pre-AI workflows, will seem unnecessarily cumbersome in comparison. The author uses the analogy of painting watercolors of a pot instead of simply throwing the clay – why create an approximation when you can work directly with the final medium?
Evidence from Figma's Own Design System
To illustrate this point, Henri shared observations from examining Figma’s own design system files. The screenshots (available in the original article) reveal a level of complexity that is striking, even within a team presumably capable of managing such a system.
- Color Variables: 946 color variables, organized into deeply nested groups, with multiple values for different modes (Light, Dark, etc.).
- Component Variants: Components with dozens of variants, defined by seemingly arbitrary names.
- Effect Styles: Complex effect styles defined with granular details (e.g., a 0.5px drop shadow at 30% black) requiring separate named styles to document the corresponding CSS variable.
- Layer Naming: Layers named with verbose, duplicated information (e.g., “Default, Default, Close Button=False”).
Henri notes that debugging even a simple color issue within this system would be a significant undertaking. They also shared an anecdote about the painful process of back-porting design changes made directly in code back to Figma, suggesting a fundamental disconnect between the two workflows.
Why It Matters
This analysis has significant implications for developers, designers, and organizations:
- Developers: The trend suggests a future where developers may have more direct involvement in UI design, potentially writing UI code directly or using AI-powered tools to translate designs into code seamlessly.
- Designers: Designers may need to upskill in coding or learn to work more closely with developers, focusing on higher-level design thinking and user experience rather than pixel-perfect implementation details within a complex tool.
- Enterprises: Organizations should evaluate their design tool investments and consider how they align with the evolving AI landscape. Investing in tools that facilitate code-based design or integrate seamlessly with code repositories may be a more future-proof strategy.
It's important to note that this is a prediction based on current trends. The future of design tools is not set in stone, and Figma (or other tools) may adapt to incorporate AI more effectively. However, Henri’s analysis provides a thought-provoking perspective on the potential shift in the source of truth for UI design.