QUÂN HÀ

ARCHIVE

CONTACT

HOME

HOPPER DESIGN SYSTEM

Workflow: Figma, Claude Code

HOPPER DESIGN SYSTEM

Workflow: Figma, Claude Code

VIEW FIGMA FILE

VIEW FIGMA FILE

VIEW WEB DOCUMENTATION

VIEW WEB DOCUMENTATION

VIEW WEB DOCUMENTATION

ABOUT

Design-to-code drift is one of the most consistent pain points for cross-platform product teams:


A color changes in Figma, and web, iOS, and Android each update on separate timelines, by separate people.


Hopper connects those two ends.

Figma Variables export to JSON, run through a validation and transformation pipeline, and automatically generate production-ready tokens for every platform via GitHub Actions.

Built by directing Claude Code.

PROCESS

The first step is to design the basic token architecture in Figma using a three-tier model, four-segment naming convention, and compliance audit across all semantic pairings.

Then I used Claude Code to build, iterating on the output.

I learned by questioning it, adopting what made sense, and pushing back on components that weren't built to the right standard.

The role wasn't director so much as a critical collaborator who kept asking "why."

RESULT

  1. A design system with real governance, 83% WCAG AAA compliant, with naming conventions, usage rules, and every exception documented.

  2. A pipeline where a designer exports Figma Variables, opens a pull request, and GitHub Actions generates CSS, Swift, Android XML, and React Native files automatically.


My role: Token taxonomy, architecture decisions, design governance, and directing the AI.

I didn't write code, I wrote the brief.

Stack: Figma Variables, Claude Code,

Style Dictionary v4, GitHub Actions

REFLECTION

It is no wonder that Claude Design roll out with the idea that people need to import their own design system.

LLMs can excel at small modular tasks, such as structuring content and building components with constraints.

That said, to ensure consistency and customization, designer still needs to be involved in overseeing the initial steps of the design system.

This include deciding on visual direction, writing specs, testing compliance level and oversee governance.

Even with design system available, it is highly unlikely that LLMs can produce large volume of work without burning through high amount of tokens (aka money), much less quality work.

HOME

QUÂN HÀ

ARCHIVE

CONTACT