A Library from Your Code
Two sources. Thirteen tokens in a TypeScript file — ten colours with names like PAGE, INK, and SPARK, and three font stacks named serif, ui, and mono. And the film three scratch app: two CSS variables, colour-slash-primary and colour-slash-surface, and one component called StudyCard.
A Library from Your Code
Two sources. Thirteen tokens in a TypeScript file — ten colours with names like PAGE, INK, and SPARK, and three font stacks named serif, ui, and mono. And the film three scratch app: two CSS variables, colour-slash-primary and colour-slash-surface, and one component called StudyCard.
Series: Figma for Educational AI Topic: FIGMA · DESIGN TOKENS
Chapters
0:00 Introduction 0:31 Introduction 2:24 Your Turn
YOUR TURN
Your turn. Paste this into Claude: Here is a TypeScript or CSS file with design tokens — paste it. How many tokens arrived as bindable Figma variables — the kind you can connect to a node's colour, spacing, or radius? For any that did not arrive as bindable variables, say what type they are in code and what the closest Figma variable type would be.
@NikBearBrown
Part of the Figma for Educational AI series.
Sources and citations: see the reel's SOURCES.md in the open textbook.
▶ The full series playlist — Brutalist https://www.youtube.com/playlist?list=PLG9H-C6rp5RU
What this video covers
- 0:00 — Introduction
- 0:31 — Introduction
- 2:24 — Your Turn
Transcript
A lightly formatted transcript of the video, with timestamps so you can jump to any section on YouTube.
Introduction
[0:00] Sanu, this is Liam in for Bear. Can you build a Figma library from code? Better question, can you check which tokens arrive and which values drift? Three terms: design token, a named value in code, a color, a size, a font that design system and its code base both know by the same name. A Figma variable, a named slot in Figma that can be bound to a node's color, spacing, or corner radius, the Figma side of a design token. And a font stack, a prioritized list of font families, the browser picks the first one it can find. Figma has one slot, not a chain. Two sources, 13 tokens in a
Introduction
[0:33] TypeScript file, 10 colors with names like page, ink, and spark, and three font stacks named serif, UI, and mono. In the film three scratch app, two CSS variables, color/primary and color/surface, and one component called study card. The skill wrote 15 variables into a new Figma file. 10 of those came from the TypeScript colors, and each one arrived as a Figma color variable, the kind you can bind to a node's fill or stroke. Two more came from the CSS variables, also color. Three came from the font stacks as string variables. Here is the gap, a font stack is a fallback chain. The browser tries the first font, and if it is not there, moves to the next. Figma does not work that way. There is one slot per text node, one font family, no fallbacks. The three stacks were stored as strings, and the strings are correct, but Figma has no way to apply them. The value is right, the slot is missing. Names, all 15 match exactly. The TypeScript names page, card,
Ink, spark arrived in Figma as page, card, ink, and spark. The CSS variable names arrived as color/primary and color/surface. Figma reads the slash as a hierarchy, a folder named color, items named primary and surface. The names are folder paths, but the match is exact, and a designer looking for color/primary in the code will find the same name in Figma. One component, study card, with four children matching the code, image, title, body, and button/primary. The surface color variable bound to the container. The primary color variable bound to the button. Point at the variable chip, change the value, the component changes with it. That is the binding working. The count 12 tokens arrived as something you can bind in Figma, the 12 colors. Three arrived as stored values you can read but cannot bind, the font stacks. Zero color differences, every hex value that was in the code is the same value in Figma. One component name matching, structure matching. The library is real and partial. It knows your colors. It cannot follow your fonts.
Your Turn
[2:25] Your turn, paste this into Claude. Here is a TypeScript or CSS with design tokens, paste it. How many tokens arrived as bindable Figma variables, the kind you can connect to a node's color, spacing, or radius? For any that did not arrive as bindable variables, say what type they are in code and what the closest Figma variable type would be. Then check one thing yourself. Pick a color variable in Figma, change its value. And watch whether every component that uses it updates. If it does, the binding is live. A library from your code at NickBearBrown.
