Handoff ran through Sketch, Zeplin and InVision, and a lot of time went into auditing which spec was real. I rebuilt the system in Figma on a three-layer token architecture that matches engineering’s CSS variables. Engineers now read tokens directly in Dev Mode, and design-spec and audit tickets dropped by two-thirds.
Fewer design-spec and audit tickets once engineers read tokens in Dev Mode.
Sketch, Zeplin and InVision consolidated into Figma.
Handoff was spread across Sketch, Zeplin and InVision. Every component change had to be synced by hand across all three, and when a step was missed, engineers guessed and audits piled up. The problem wasn’t missing components; we had no dependable way to communicate design decisions.
I replaced hard-coded values with core tokens for raw values and semantic tokens for roles like text-primary. Figma variable names map 1:1 to CSS variables, and engineering implemented them in code. Engineers stopped translating specs and started reading them.
Semantic tokens were abstract enough that the same component ended up with different semantic tokens across screens. I added component tokens like --button-bg, scoped to their component, so the intended style became the default and one-off overrides stopped.
I turned recurring table, selection and feedback states into components backed by the token tiers. The ER card ships default, selected, target and error states, and long field names truncate to one line, so cards keep one height across any schema.
Design-spec and audit tickets dropped by two-thirds once engineers could read tokens in Dev Mode. The system is adopted in the product, with core, semantic and component tokens in use.