CER Checker (Figma Plugin)
A self-serve compliance tool that validates designs against Common Experience Requirements directly in Figma—reducing review bottlenecks, repeated rework, and late-stage “ship blockers,” while helping designers learn the CERs by doing.
Context
Common Experience (CE) relied on a set of requirements (roughly ~140) that Designers were expected to apply during day-to-day delivery. In practice, compliance often came down to ad-hoc “bar raiser” reviews scheduled as design work progressed—across a team of 15+ designers moving at different speeds and cadences.
At the same time, CE reviews regularly surfaced low-level issues—contrast, typography, detached components, link styling—creating a loop where Designers weren’t consistently doing the checks upfront, and bar raisers were spending time on fixes that could have been self-served.
Problem
CE reviews were intended to be scheduled as needed, but two things were happening at once:
- Reviews weren’t consistently being scheduled, so compliance gaps were slipping through until late in the process.
- When reviews did happen, they were often dominated by repeatable, “mechanical” issues (contrast, typography, system adherence) that slowed everyone down.
So what
A large requirements set lived in a document, but real learning happens through repetition in the work. Without a practical, in-tool way to validate designs, compliance was inconsistent, rework increased, and issues became ship blockers downstream.
Approach
Meet Designers where they work
I designed the CER Checker as a Figma plugin first and foremost for Designers—so compliance could happen in the same moment decisions are made, not later in a review meeting. The goal was to shift behavior from “reactive fixes after feedback” to “habitual checks while building.”
Turn requirements into repeatable checks
The plugin translates common CER categories into automated validation rules, with clear output that references the CER rule area (e.g., type, contrast, text usage, link styling) and explains what to change.
- Typography checks (font stack, sizes, line height guidance)
- Text standards (case usage, multiline alignment)
- Visual standards (contrast thresholds, border radius, disabled states)
- Link conventions (underlines, external-link expectations)
- Component health (detached component detection with false-positive prevention)
How I built it
This was my first end-to-end build using agentic coding. I used Roo Code to read and reason over Figma’s Plugin API documentation, then collaborated with it to scaffold the plugin architecture, implement the validation rules, and iterate on edge cases.
I didn’t hand-write the code, but I directed the logic, switched Roo between “architect” and “code” modes, and worked through debugging and correctness—especially where the plugin needed to be reliable at scale.
From concept to production-ready plugin, I shipped the first version in under 24 hours. It was the first time in a long time I felt that “lost-in-the-work” building energy—hours disappearing while iterating on the system.
Technical challenges I solved (with Roo)
- Figma node traversal: evolved from manual selection checks to full-frame scanning, so designers could validate meaningful sections of work quickly.
- Scale + safety limits: added pragmatic constraints (e.g., node limits / batching) to keep runs stable on large files.
- Detached component detection: tuned logic to reduce false positives and avoid flagging legitimate component structures.
Outcomes
- Created a self-serve compliance mechanism for Designers—reducing repeated “low-level” feedback loops in CE reviews
- Helped teams catch issues earlier (contrast, typography, adherence), reducing downstream rework and late-stage blockers
- Increased practical learning of CERs through habitual use, not document referencing
- Maintained momentum during a critical period when the other CE bar raiser was on leave and coverage was limited
- Proved a new working model: shipping a useful internal tool without needing a full product team
Reflection
This project changed how I think about scaling design quality. The answer isn’t more meetings—it’s better tooling that turns standards into habits. It also reinforced my belief that design systems are less about enforcing consistency, and more about creating shared foundations that let teams move faster without losing cohesion.
Building the CER Checker was my turning point into UX engineering and agentic workflows—showing me I can take an idea from concept to production-ready delivery quickly, then maintain and evolve it over time.