Lexicon is a lightweight dictionary that lets learners search, save, review and pronounce new words on‑the‑go. I co‑built it with an iOS engineer friend as a nights‑and‑weekends project.
Early mocks followed a traditional, screen‑per‑state approach: every mode, state and micro‑interaction lived on its own artboard. Handoff friction soared and our file ballooned to 180 screens for a 5‑view app. Engineers needed clearer, code‑ready structure.
Ran a UX audit using heuristic analysis and WCAG checks to catalogue every pattern, state and accessibility gap.
Re‑built components in Figma with design tokens, variables and styles, applying an atomic‑design mindset so light/dark themes, spacing and motion all inherit from a single primitives layer.
Paired daily with engineering, exporting tokens as JSON and mapping them to SwiftUI enums via Figma’s Dev Mode—a true design‑to‑code pipeline.
Created interactive playgrounds that flip modes via Boolean variables, adding concise interaction specs for prototyping and zero‑ambiguity handoff.
Shrunk the file from 16 static artboards to 7 token‑driven views (‑56 %)
Pair‑programming in Figma Dev Mode and shipping JSON/SwiftUI enums turns designers into velocity multipliers, not pixel police.
They synchronise Voice of Customer, Business and Technology, preventing last‑minute colour swaps that derail sprint goals.
Interactive playgrounds out‑perform PDFs, making the system discoverable and self‑service for every new contributor.
Explore the live Figma playground where you can compare the original artboards, variant‑heavy system, with the final token‑first build, complete with interactive light/dark toggles and state controls.
