A Live Page into Figma
The source is the film-three study card: a running HTML page, served locally. An image slot, a title, two lines of body text, and a blue button. Twenty-eight things to measure: six colours, six sizes, four radii, three gaps and paddings, and nine font properties.
A Live Page into Figma
The source is the film-three study card: a running HTML page, served locally. An image slot, a title, two lines of body text, and a blue button. Twenty-eight things to measure: six colours, six sizes, four radii, three gaps and paddings, and nine font properties.
Series: Figma for Educational AI Topic: FIGMA · LIVE PAGE CAPTURE
Chapters
0:00 Introduction 0:24 Introduction 1:34 Your Turn
YOUR TURN
Your turn. Paste this into Claude: Here's the design context for my captured card — paste the get design context output. Find every place a raw hex colour appears that corresponds to a CSS variable in my source HTML. List the variable name, its hex value, and every node id where it appears. Then list every wrapper frame that has no visual purpose i
@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:24 — Introduction
- 1:34 — Your Turn
Transcript
A lightly formatted transcript of the video, with timestamps so you can jump to any section on YouTube.
Introduction
[0:00] Yoque, this is Liam in for Bear. Can you push a running page to Figma and get editable layers back? Better question, what survives the push? Three terms, a live page, an HTML page running on your machine served locally that an agent can point a tool at. A CSS property, a named value in the page's computed style, a color, a size, a radius. And design drift, a value the Figma layer holds instead of what the CSS said.
Introduction
[0:24] The source is the film three study card, a running HTML page served locally. An image slot, a title, two lines of body text, and a blue button. 28 things to measure, six colors, six sizes, four radii, three gaps and paddings, and nine font properties. A script tag and a hash URL with a capture ID. Figma reads the live DOM, every element, every computed style, and every layout value. The capture finished in about 12 seconds, one right, one new page in the Figma file. 28 of 28, every color, every size, every radius, every gap, every padding, and every font property. The card's background, the image placeholder, the title, the body, the button, and the label. Not one number drifted. Two things did not survive. First, the two CSS variables, color surface and color primary, are now raw hex. The variable names are gone. Second, the Figma card has extra wrapper frames around every element and no Figma auto layout. The look is right, the plumbing is not. Verdict, strong for color and type fidelity. What the browser rendered, Figma received number for number. What was pending review, the editable layers in the file, and whether the raw hex drift is worth a cleanup pass before teaching this to students.
Your Turn
[1:35] Your turn, paste this into Claude. Here's the design context for my captured card. Paste the get design context output. Find every place a raw hex color appears that corresponds to a CSS variable in my source HTML. List the variable name, its hex value, and every node ID where it appears. Then list every wrapper frame that has no visual purpose in the design, no fill, no stroke, just layout. Then check two things yourself. Open the Figma file and try resizing the card. Does the button reflow? And find the two raw hex colors. Can you bind them to a Figma variable in one use Figma call? A live page into Figma at Nick Bear Brown.
