02 — Workflow Automation · 2023
DesignSync Plugin
An internal Figma plugin that eliminated the design-to-engineering handoff gap — automating token extraction, spec generation, and component validation.
Year
2023
Role
Designer + Co-author
Scope
Plugin design · Engineering collaboration · Workflow systems
Before
avg. 2.7 days
After
avg. 4 hours
Overview
A product team of 8 designers and 24 engineers was losing 2–3 days per feature to design handoff. Designers exported assets manually, wrote specs in Confluence, and Slack-threaded engineers for clarification. Engineers made assumptions. QA caught visual bugs late, in staging, sometimes in production.
The deeper problem: design tokens were being re-specified in code by memory, not reference. By the time a component shipped, it had often drifted from the Figma spec. Not because anyone was careless — because the pipeline had no enforcement layer.
I identified this pattern through sprint retrospectives over three months. With an engineering partner, I proposed building the enforcement layer ourselves.
Tags
What I did
- Identified systemic handoff failure
- Designed plugin UX end-to-end
- Co-wrote plugin in TypeScript
- Ran internal beta with 3 teams
- Documented adoption patterns
Core Challenge
What do you automate — and what do you leave to human judgment? Getting this wrong in either direction creates new problems.
Key Decisions
Auto-spec vs. annotation-first
The instinct was to automate everything: generate full specs automatically and let engineers work from them. But fully automated specs created false confidence — engineers trusted output they hadn't verified. We automated the mechanical (spacing, tokens, dimensions) and kept semantic annotations in the designer's control.
Real-time sync vs. snapshot model
We considered real-time push to engineering. Rejected it. Engineers were building against live designs that designers were still changing. We adopted a snapshot model: designers explicitly trigger a handoff, creating a versioned record. This reduced mid-sprint confusion and gave both sides a shared source of truth.
Deliberate v1 scope
The wish list included font rendering comparison, interaction specs, and animation values. We cut everything that required subjective judgment. v1 automated the objective: spacing values, color tokens, component naming, and asset export. This got us to 60% efficiency gain while keeping the system trustworthy.
Command palette over sidebar panel
First prototype was a persistent sidebar panel. It competed with Figma's own panels and felt heavy. A command palette pattern (⌘P) was less intrusive, faster to use, and mapped to how our team already worked with other productivity tools. Adoption was immediate.
Visual Evolution
Persistent sidebar — too heavy, competed with Figma UI
⌘P command palette — fast, contextual, frictionless
Outcome
−78%
Handoff time
2.7 days → 4 hours
3×
Sprint syncs eliminated
per sprint
−78%
Token inconsistency bugs
in QA cycles
100%
Team adoption
within 2 weeks
Reflection
This project taught me that internal tooling is often the highest-leverage design work a team can do. The ROI was immediate and measurable. It also reinforced something I believe deeply: designers who understand code, build better products — not because they should be doing engineering, but because they understand what’s tractable to automate and what isn’t.
Next project
Aequify
Enterprise workflow platform · 2022–2023