Category
Engineering
6 min read
Engineering
Token modes and a dark theme without duplication
A dark theme shouldn't be a copy of the light one. Keep one set of token names, switch only the values, and ship modes as CSS without letting them drift.
5 min read
Engineering
Finding hard-coded colours in a React codebase
Every hex value in a component opts it out of the design system. Search commands that find them in minutes, the false alarms to remove, and how to keep them out.
5 min read
Engineering
An SVG sprite from Figma, and when it beats components
One file of symbols instead of one component per icon: when an SVG sprite is the better choice, how to use it in React, and the gotchas that trip people up.
7 min read
Engineering
Figma icons to React components, end to end
From an icon component in Figma to a merged pull request: every step, what it produces, and the three delivery formats with real generated output.
6 min read
Engineering
Style Dictionary in practice: design tokens to CSS, SCSS and TypeScript
A working Style Dictionary 5 setup for DTCG tokens, tested on a real build: references, modes, units, and a rename experiment that breaks CSS silently.
6 min read
Engineering
How to ship Figma variables to developers without an Enterprise plan
The only official API for Figma variables is Enterprise-only. Here are the three ways variables leave Figma today and where each one stops.
6 min read
Engineering
Design tokens from Figma to code without manual exports
A workflow that keeps tokens in Figma and code in sync: name tokens by purpose, compare instead of copying and deliver every change as a pull request.