Instantiating UI Components with Distinguishing Variations [pdf]
This paper introduces Celestial, a system that instantiates UI components by generating distinguishing variations from a single example, helping designers explore alternative layouts and states without manual rework.
Background
- The paper addresses a problem in UI prototyping tools: when designers create multiple variants of a component (e.g., a button in different colors), most tools store each as a separate copy. This makes updating all variants together or generating code from the design difficult.
- The authors present "Celestial," a system that lets designers create "distinguishing variations" — a single component family where variations are defined by what changes (e.g., "this button is red, that one is blue") rather than treating each as independent.
- Key concepts: "dimensions of variation" (color, size, icon) and "exemplars" (concrete instances). This mirrors how code-based UI frameworks use props to generate different component instances, but applied to visual design.
- Why it matters: it bridges visual design tools (Figma, Sketch) and engineering workflows, reducing manual overhead in maintaining UI libraries and smoothing designer-developer handoff. Presented at CHI 2026, the top HCI research venue.