Taking cues from code | Figma Blog (opens in new tab)

Design systems are becoming more complex as teams collaborate across interconnected products, and Figma argues that design can learn from software engineering. The goal is to introduce structure without eliminating creative flexibility. The article highlights component composition and decoupling structure from presentation as ways to make systems more adaptable and scalable.

Design Borrowing from Code

• Design was once largely local and isolated, with files stored on individual machines.
• Modern design involves larger teams, shared ecosystems, and dependencies across products and files.
• Design systems help maintain consistency and quality at scale, but excessive structure can restrict exploration.
• Figma sees software engineering patterns as useful models for handling this complexity.

Nesting Components for Flexible Layouts

• Simple systems can represent variations through component variants.
• As the number of layouts grows, maintaining every variation separately becomes difficult.
• Component properties can support limited optionality, such as cards with or without images or pull quotes.
• Properties are insufficient when components differ substantially in orientation and structure.
• Composition offers a more flexible approach:
  • Designers create small, reusable sub-components.
  • These sub-components are nested inside larger, layout-specific components.
  • The same building blocks can be recombined into many arrangements.
• This reduces the need to anticipate every possible layout when designing the system.

Decoupling Structure from Presentation

• Basic design systems often hard-code a single visual theme into each component.
• Teams may later add light and dark modes, followed by themes for different products, brands, or sub-brands.
• As the number of themes increases, maintaining colors and styles becomes increasingly burdensome.
• The article introduces headless design systems as an architectural response to complex theming requirements, separating a component’s underlying structure from its visual presentation.

A scalable design system should favor composable building blocks and flexible theming rather than attempting to encode every possible layout and brand variation directly into monolithic components.