Personal Research

uber-density-demo

4 min read

Uber density demo

Evidence status: primary public video showing Uber’s Figma file; no downloadable tokens or code.

1. Why this system is relevant

The demo shows density working in a real Figma component library rather than only describing a conceptual model. It is direct evidence for same component + inherited density context, and it exposes exact List Item variable names and mode values.

2. Density terminology

The visible collection is named listitem density. Its modes are Default, Compact, and Spacious. On a selected frame, Figma also offers Auto (Default), meaning the frame may inherit its mode instead of overriding it.

3. Density model

The demonstrated mechanism is contextual and component-specific:

  • A Figma variable collection contains density modes.
  • Numeric variables are bound to List Item auto-layout properties.
  • A containing frame selects or inherits the collection mode.
  • Bound List Item instances under that frame re-resolve.
  • Color theme remains a separate frame-level variable control.

The demo does not establish that Uber uses one global density collection across every component. The collection title and variable names are specific to List Item.

4. Token/variable architecture

The observed path is:

frame `Listitem density` mode
  → `listitem density` numeric variables
  → parent/child auto-layout metrics
  → rendered List Item instances

The three exposed variables are already component-semantic rather than raw primitives: they describe parent padding, child padding, and parent minimum height.

Figma variableDefaultCompactSpaciousObserved binding intent
parent-vertical-padding8416Parent List Item vertical padding
child-vertical-padding444Nested child vertical padding; deliberately invariant
parent-minHeight644864Parent List Item minimum height

The values are Figma numbers; when bound to padding/min-height, they resolve as pixel geometry.

Two design decisions are visible in this very small set:

  1. Density is curated rather than multiplied. Spacious doubles parent padding from 8 to 16 but keeps minimum height at 64; compact halves padding and reduces minimum height to 48.
  2. Not every geometric property participates. child-vertical-padding remains 4 in all three modes.

6. Typography behaviour

No typography variable appears in the demonstrated listitem density collection. The example screens visually retain the same content hierarchy while geometry changes, but the video does not expose enough data to claim that typography is invariant across Uber’s whole system.

7. Representative component examples

The component shown is List Item, in multiple content configurations and composed screens. Compact, Default, and Spacious comparisons show the same governed List Item content fitting into different vertical rhythms.

The demo also shows a separate Tag refactor using component-specific variables. That supports variable-driven component simplification, but it is not evidence that density caused the Tag component reduction.

8. Design/Figma implementation

On the selected frame, the right properties panel visibly separates:

  • Listitem density, with inherited/default/compact/spacious choices
  • Theme, shown with Light selected

The canvas also shows comparable light and dark screens under all three density headings. Density therefore behaves as an independent inherited collection mode, not as a combined light-compact or dark-spacious theme.

The important qualification is granularity: Uber’s visible collection is named for the component. A design system adopting this pattern would need to decide whether many component collections are independently exposed, or whether component variables alias a smaller shared density-semantic collection.

9. Code implementation

Not public in the demo. No density prop, provider, CSS class, token package, or generated-code mapping can be verified.

10. Accessibility constraints

The video does not expose interaction-target variables or accessibility rules. The compact parent minimum height is 48, which is compatible with a common touch-target target, but that observation is not proof of Uber’s accessibility policy or the final rendered hit area.

11. Limitations / unavailable evidence

  • No downloadable Figma library or variable export.
  • No public alias graph between these variables and system foundations.
  • Only List Item density values are visible.
  • No verifiable system-wide type, icon, radius, or touch-target behavior.
  • Public summaries conflict on component-reduction counts; the video thumbnail states 800 to 84, while other reposts give different numbers.

Graph View

Backlinks