Payload. Code Layers. How I Built This.
Sponsor
Import your AI generated designs into Figma
The missing link between AI and Figma: the html.to.design Chrome extension now detects designs from tools like ChatGPT, Claude, and more — importing them into Figma in a single click. Fully editable, components included.
What’s New
Welcoming Payload to the Figma team
Kris Rasmussen, CTO of Figma: “When we announced Figma Sites at Config, we shared that we’ll be rolling out a CMS for it in the months ahead. Figma CMS will make life easier for marketers and designers who need to update website content, and Payload brings all the stuff developers love—a powerful, customizable backend for building scalable websites and apps, plus an intuitive admin panel for editors. By teaming up with Payload, we’re creating something special.”
This is huge! A few months ago, I wanted to use Framer for a marketing website but ended up recommending building a custom website only because its CMS was so lacking. When Figma announced that Figma Sites CMS is “coming soon”, I expected something just as barebones in the beginning. Getting a proper CMS in addition to code layers and Figma Make components makes Sites insanely customizable and powerful.
Payload is joining Figma!
Figma acquired Payload, an open-source Next.js CMS. James Mikrut, founder of Payload: “Figma and Payload together can and will solve a problem that’s been bugging me (and probably all of you) for years. The gap between design and code still exists. Designers create in Figma, then devs recreate in code, then content teams struggle to maintain it all. It’s inefficient and frustrating. And historically, the CMS tends to make it worse. With Figma, we can (and will) solve these problems in new ways without compromising.”
Why did Figma buy a CMS?
James Mikrut, founder of Payload, also joined one of my favorite podcasts, Syntax, to chat with Wes Box about being acquired by Figma. They discuss building an open-source business, the future of UI design, AI interfaces, and what this means for the future of Payload and Figma.
How I Built This
Dylan Field is interviewed by Guy Raz, a host of the How I Built This podcast, “where innovators, entrepreneurs and idealists take us through the often challenging journeys they took to build their now iconic companies.” See a few highlights from this conversation in the blog post 7 moments that shaped Figma, as told by Dylan Field.
Liquid Glass
Hardik Pandya with a thoughtful critique: “When Apple places interface elements behind a glassy refractive layer and claims this brings content closer, it contradicts our lived experience with glass as a material. The iPhone’s most powerful feature has always been direct manipulation — the sense that you are touching your photos, sliding your messages, and tapping your apps directly. There is no separation layer. There is no glass between you and your content, because the screen itself disappears during interaction.”
Figma Sites
Make your site interactive with code layers
“We built code layers—interactive elements backed by custom React code—in Figma Sites to help you experiment with interaction and motion without additional technical knowledge or outside help. Whether you’re creating an element from scratch or riffing on an existing design, code layers allow you to add dynamic functionality to your site—from flyouts and dropdowns to shaders and maps—by converting components to code layers, chatting with AI to build and tweak them, or editing directly in Figma’s code composer. And, you can generate multiple code layer variations to compare your ideas side-by-side and experiment freely—all in the Figma canvas.”
Demo: Code Layers in Figma Sites
Great demo of code layers by Niko, who is now a product manager for interactivity. “Code now belongs; make a mess, rev, refine.”
Code layers is a window into design workflows in the age of AI
Nolan Perkins argues that code layers are “a window into what our design workflows will look like in the age of AI.”
Figma Design
Text autocomplete
Sweet, the text in Figma is now autocompleted with AI.
New icons for variables
Beautiful work by Tim Van Damme. See a sneak peek of a few more on their way.
Never miss a beat with browser notifications from Figma
“You can now opt-in to receive push notifications from Figma in your browser, the same way you do in Figma’s desktop app. Once you allow Figma to send you notifications in the browser, you will be alerted to comment replies, @ mentions in comments, and @ mentions in the file (i.e. on a sticky in FigJam) in real time.”
Create code from designs with the Dev Mode MCP server
Developer Advocate Jake Albaugh shows how to bring design context from Figma directly to your agentic coding tools with the new Dev Mode MCP server.
Deep Dive into Uber’s Design Systems
In this interview, Jay chats with Ian Guisard who leads design systems for Uber. You will learn how Ian adds new components to the design system, applies variables to reduce component size, deprecates existing components, specs components for developer handoff, handles design system rule breakers, and more.
Figma early 2016–2019
Rasmus Andersson shared a few screenshots from the early days of Figma.
Plugins
Tailwind Tokens
The new plugin automatically turns your entire Tailwind token set into native Figma variables and styles.