Guides
Guides for business interfaces
Short, practical answers for teams that build admin, finance and SaaS screens in Figma and React.
Design an invoice ledger and a month-close dashboard
Finance screens are read by people who compare columns, check totals and act on single rows. Below is one ledger and one dashboard, with the choices that keep them correct and accessible.
Build or buy a design system?
Most teams reach this question the same way: the third product looks a little different from the first two. Below is what a design system contains, what it takes to build one and keep it, and how to decide in ten minutes. I made Tessera, so I am not neutral. One section says when building your own is the better choice.
How to keep Figma variables and CSS tokens in sync
Most teams export their Figma variables to CSS once, and a few releases later the two no longer match. Below is how to get variables out of Figma today, why Tessera makes a set of JSON files the source for both sides instead, and the checks that tell us when something drifts. Every example comes from our own token files.
How to design an admin dashboard in React and Figma
An admin dashboard is less one screen than a frame that every other screen lives in. Below is how to lay out that frame, what belongs on the first screen, and how lists and settings pages fit in. It comes from building nine full example screens out of Tessera, including the things that did not fit the first time.
How to make Claude and Cursor use your design system
Ask an AI coding agent for a settings page and it will write one. It will also invent its own grey, its own spacing and its own button. Below is how to make an agent build with the components and tokens you already have, and how to check that it did. The examples come from the pack that ships with Tessera.