techlist.io
KREN
figma

Embracing the tension between code and design | Figma Blog (opens in new tab)

figmadesign-systemsprototypingcssresponsive-designauto-layoutcomponentsflexbox

Figma argues that design and code should not be forced into identical workflows, but should learn from each other. Designers need freedom to explore, while developers benefit from structure, reuse, and consistency. At Config Europe 2020, Figma announced features intended to connect these strengths through more code-like design systems and more efficient handoff.

Design Systems That Mirror Code

  • Teams often maintain separate component libraries for design and development, even when the components represent the same product elements.
  • Differences between the two systems can cause miscommunication and slow implementation.
  • Figma introduced Variants, which group related versions of a component—such as button sizes, styles, interaction states, or platform-specific versions—into one component.
  • Variants are intended to make Figma components more closely resemble reusable code components and simplify the asset panel.

Interactive Prototyping with Variants

  • Before Interactive Components, designers often had to connect multiple frames and overlays to simulate component behavior.
  • Interactive Components allow designers to define prototype transitions directly between Variant states.
  • This makes component instances immediately interactive in prototype mode and reduces the work required to simulate UI behavior.

Auto Layout Inspired by CSS

  • Auto Layout already allowed designs to respond automatically to content changes, such as expanding a button when its label changes.
  • Figma planned to make Auto Layout more closely match the web’s CSS box model and Flexbox.
  • Planned improvements included:
    • A simpler user interface
    • Stretching elements along both axes
    • Independent padding controls
    • Better spacing options for common patterns, such as navigation icons

Making Large Design Systems Easier to Use

  • The redesigned Instance Swap Menu helps users navigate large component libraries with:
    • Thumbnails
    • Search
    • Keyboard shortcuts
  • These improvements reduce the need to remember exact component names or browse long lists manually.

Improving Developer Handoff with Inspect

  • The new Inspect Tab replaces Figma’s Code panel and presents implementation-relevant information more clearly.
  • It displays the selected layer’s name prominently, helping designers and developers identify what is being built.
  • Developers can inspect values for Variants, colors, shadows, content, typography, borders, and other properties.
  • Values and complete key-value snippets can be copied directly into code.

Figma’s overall direction is to preserve the creativity of visual design while adding the structure and reusability associated with software engineering. Features such as Variants, Interactive Components, improved Auto Layout, and the Inspect Tab aim to make design systems easier to maintain and translate into production.