Scope: this page covers only the parts I built myself: the token foundation, components, the agent workflow and documentation.
Principle: every token, component and doc should mean the same thing to a designer, a developer and a coding agent.
Typography bound to variables. The 18 text styles (Paragraph, Label, Heading) held raw numbers. I built a typography collection of 29 variables for font size, line height, letter spacing and weight, and bound every style to it, so a type change happens in one place.
Tested before shipped. Testing showed Figma reads a letter-spacing variable as pixels even when the style is set in percent, so styles rendered the wrong tracking without any warning. I converted every tracking value to its pixel equivalent and documented the trade-off: tracking no longer scales with font size, so changing a heading’s size means updating its tracking token too.
Effects and opacity. I rebuilt the effect styles (three elevation levels, focus and status rings, an inset highlight and an overlay blur) with every field bound to a variable, and added an opacity scale from 0 to 100 with a dedicated opacity/disabled token.
Naming. New tokens follow one rule: lowercase kebab-case, named after the style or component they serve, so a person and an agent can both predict a token’s name before searching for it.
One badge instead of two. Badges lived in two separate sets. I merged them into one component with 88 variants across contrast, colour, tone and state, so designers and agents pick from one place.
New components on tokens only. I built components such as ToggleButton and Pagination Item with every colour bound to a token, adding component-level tokens only where no existing semantic token fit.
State rules. Disabled states reuse the default colours and bind their opacity to opacity/disabled, instead of a separate set of grey tokens. One rule, applied the same way across the library.
Extending without breaking. Components are linked from tickets, so I treat their IDs, names and variant properties as a contract: new behaviour arrives as new properties, never as renamed or deleted variants. Toast gained a Short/Long text length mode with a 512px max width, and ActionLink gained a card mode for issue cards. Across 57 existing Toast instances and 73 ActionLink instances no overrides were lost, and all 18 existing ActionLink variants stayed pixel-identical.
Conventions an agent can follow. I wrote the design conventions the screen-generating agent reads: tokens, colour, layout and usage rules, kept in sync with the matching page in Figma.
Generate, then check. I wrote two skills for the agent: one builds a screen from library components only, the other checks a generated screen against the library. Both select styles and components by their library key, not by name, because the same style name exists in more than one library.
First results. In the first test runs, the generated screens used zero tokens from outside the foundation library and zero raw values. A QA pass showed most false alarms came from hidden layers inside components, so the checker now skips them.
Seeing the library at a glance. I built a components health dashboard that scans the library and shows its state component by component. For my own Figma agent I also wrote two skills: a component audit that moves a selection onto the library in a plan-then-apply mode, and a read-only handoff checklist that lists unbound values for developers.
One board for every component. I designed the component documentation template: every state labelled in the same Property=Value format, a bracket per property and dashed guides between states, so a page reads cleanly for a designer and predictably for an agent.
Specs on the canvas. For changes like the Toast update, I wrote a Figma Spec, a markdown document on the canvas that agents read first, covering what to build, what not to build and the handoff to developers.
A plan for designers, agents and code. I drafted the next phase in three tracks: one description pattern for every component (Use for · Not for · Goes in · Agent note), do and don’t examples, rule files in the repository that the agent reads, an allowed-components list that updates itself, and a monthly health check.
Honest status. There are no measured speed or adoption numbers yet. The next useful evidence is designers scoring every generated screen, which will show where the system still leaves the agent guessing.