Auto Layout and CSS. Building skills. Field Notes.
What's New
Career advice for designers
Anthony Hobday on why most design career advice comes from people who don’t hire designers and reflects a single lucky path. The practical core: a five-minute curriculum, ways to look impressive without impressive jobs, and the signs an org genuinely values interface design. His argument that one strong credential can cover for a weak portfolio pairs neatly with “Components Are Dead” below — both circling what actually holds value as the job changes.
Components Are Dead
Luis Ouriach makes the provocative case that when LLMs make code cheap to write, edit, and migrate, the contribution model and the component-as-source-of-truth lose their reason to exist. His point is that consistency was always carried by tokens, not components, so a well-defined token set could govern ten different LLM-generated inputs at once. He stops short of full obituary, asking whether components live on as the unit of constraint.
Field Notes — Rauno Freiberg
Rauno Freiberg, a design engineer widely respected for his UI craft, keeps a running collection of short notes on the small decisions that make interfaces feel right. One entry works through why an animation delay meant to highlight a scrolled-to message backfired and felt more awkward; another walks through the redesign of cards. It’s the kind of thinking-out-loud that can teach more than any tutorial.
AI
Level up your workflow with Figma agent
Figma’s own three-minute primer on getting good output from the design agent. Five habits: write specific prompts instead of “make this better,” select the exact layer or frame to scope the edit, build with auto layout so the agent can read your structure, feed it full production-ready UI examples rather than lone base components, and keep a separate chat thread per task. The one most people miss is context hygiene — the agent reads your whole file, hidden layers, unused elements, and old versions included, so clean it up before you prompt.
Building skills for the Figma agent
Where the video above is Figma’s polished pitch, Mal shows the messy middle. She builds her own color-audit skill for the Figma agent, feeding it brand guidelines and example palettes so it flags off-brand elements by severity and annotates the exact violations right on the canvas, then has it rebuild the frame in every approved scheme. “Truly a diva just sharing her work in progress,” and better for it.
See AI credit usage
Admins can now download a CSV showing credit use in beta AI features, giving a fuller picture of AI spend and something to forecast against. Organization and Enterprise plans only.
Figma Design
Design closer to CSS with the updated auto layout option
Figma reworked auto layout so it behaves like CSS Flexbox at handoff, closing the small gaps that used to force developers into workarounds to match the canvas. The border-box model is now the default: inside strokes count toward layout like a CSS border, outside and center strokes are excluded like an outline, padding is never squeezed below its set value, and auto gap collapses instead of going negative like space-between. New frames get it automatically; existing frames stay on the legacy version until you upgrade, with a revert option through January 2027.
From code to design layers with variables attached
Until now, screens brought onto the canvas from code landed as raw values, leaving a cleanup pass before anything matched your design system. Figma now auto-binds colors, type, and spacing to the variables already in your file — whether you copy a Make preview, generate from code through the MCP server, or capture a live page with the Chrome extension. More frames also arrive with auto layout enabled, which dovetails with the Flexbox-mapped auto layout update above. Run Check Designs as a second pass to catch anything the matcher missed.
Figma Motion
Motion for people who are scared of motion software
Laura Fehre, Designer Advocate at Figma, teaches Motion to people who freeze up the moment they open motion software, by letting the Figma agent do the first pass. Prompt the animation, watch it build the keyframes, then refine the curves and springs yourself.
Easily animate loaders with the arc tool and Figma Motion
Miggi builds a loading spinner from one ellipse: swap the fill for a stroke with shift+X, sweep the arc tool to 75%, then round the end caps. In Figma Motion, the move is keyframing only the sweep value and deleting the start and ratio keyframes Motion adds by default, so it runs from 0.25 to a full 100%. Duplicate and stagger a few for a nested loader.
Nesting and framing animations
Miggi packs two Figma Motion tricks into one tip. Nest your animation inside a frame and the parent becomes a camera you can pan, zoom, and rotate. Separately, J and K jump the playhead to the next and previous visible keyframes.