Recovering Design Tokens from Figma-like UI Layers Using LLM-Guided Schema Synthesis
DOI:
https://doi.org/10.63575/CIA.2023.10104Keywords:
Design tokens, Figma-to-code, design systems, UI layer parsing, schema synthesis, large language models, component hierarchy, empirical evaluationAbstract
Design tokens encode a design system's reusable decisions for color, spacing, typography, and component semantics, yet production teams often inherit screens whose layer names, styles, and component nesting are inconsistent. This paper presents SALT, a deterministic layer-analysis and constrained LLM-guided schema-synthesis pipeline for recovering design tokens from Figma-like UI layer JSON and paired high-fidelity screenshots. The method parses vector-style layer trees, extracts style observations, clusters noisy color and dimension values, recovers component groups from frame hierarchy, and emits a Design Tokens Community Group compatible JSON schema. Full experiments were executed on a 300-screen EGFE-compatible benchmark included with this submission. The benchmark contains 9,164 total layers, 6,374 leaf layers, 8,150 color observations, 12,450 spacing observations, 3,281 typography observations, and 2,190 annotated component groups. Six methods were evaluated: raw unique values, screenshot-palette extraction, rounded-value heuristics, k-means clustering, schema generation without semantic naming, and SALT. SALT recovered spacing tokens with F1=0.800, typography tokens with F1=0.909, and component hierarchy with F1=1.000; its color-token F1 was 0.538, while the rounded-16 heuristic reached the highest color-value F1 of 0.645. SALT was the only method that produced nonzero reference-path schema coverage, achieving 0.571, and it generated a compact 22-token schema in 0.244 s on the complete benchmark. The results show that layer-aware semantic synthesis is necessary for usable token schemas, while value-only color clustering remains sensitive to neutral color collisions.
