Nolan Perkins argues that code layers are ​“a window into what our design workflows will look like in the age of AI.”

“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.”

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.”

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.

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.

You can now add custom interactions and animations to your Figma Sites using code layers. Code layers let you create, edit, and manage live code on your site. Use built-in AI chat or write your own code with React, TypeScript, and Tailwind support.

Designer Advocate Alexia Danton shares the team’s favorite prompts, pro tips, and best practices for using Figma Make to help you get the most out of the recently launched prompt-to-code feature.

Creative possibilities provided by new Figma Draw tools are truly inspiring.

“Figma Make (still in beta) is now rolled out to 100% of all Full seats. Watch PMs Holly Li, Nikolas Klein, and Tom Duncalf make things live in Figma Make.”

Tim Van Damme shares a nifty trick for reusing scaled icons as blank state illustrations. In Figma Draw, he applies dynamic strokes, various brushes, pattern fills, and noise effects to give icons a beautiful hand-drawn feel. I thought Figma Draw wasn’t a tool for me, but this video showed it from a different side and made me eager to explore.

Gary Simon recorded a video tutorial on how to set up and use the new Figma MCP server. He shares tips on how to set up Cursor and prepare your designs for agentic coding tools with Auto Layout, variables, and naming your layers.

Figma announced the beta release of the Dev Mode MCP server, which brings it directly into the developer workflow to help LLMs achieve design-informed code generation. Jake Albaugh shared a sneak peek at the GitHub × Figma Dev community event during Config, and I’m excited to finally give it a try.

“[MCP server] allows developers to bring context from Figma into agentic coding tools like Copilot in VS Code, Cursor, Windsurf, and Claude Code. Whether it’s creating new atomic components with the proper variables and stylings or building out multi-layer application flows, we believe this server will provide a more efficient and accurate design-to-code workflow.”

“If you’ve already invested in a design system and leverage patterns like components, variables, and styles that are aligned between design and code, the Dev Mode MCP server is a multiplier — we want to make sure that the LLM can benefit from these patterns, too. Agentic search techniques can take quite a bit of time to locate the right patterns, especially in large codebases. They may also find valid patterns that stray from those referenced in a design. By providing references to specific variables, components, and styles, the Dev Mode MCP server can make generated code more precise, efficient, and reduce LLM token usage. […] If Figma knows which components you’re using, it can share the exact path to the code file the agent needs with Code Connect.”

Watch Tim Van Damme design symbols for keyboard keycaps in the new Figma Draw.

Inga Hampton, a Product Designer at Raycast, and Noah McAskill, a Chief Doodler at NBA Paint, are challenged to draw each other’s portraits in Figma Draw. The reveal at 20:00 is my favorite part.

Gary Simon shows how to create your own Figma Draw brushes by scanning physical samples or generating them with AI. He also offers 30 pre-made stretch brushes as a free resource.

Ran Segall from Flux Academy shares his first impressions from using Figma Sites.

Nice to see that Figma addresses some of the early accessibility concerns with Figma Sites.

Miggi shows how to be more experimental and expressive with Figma Draw features like progressive layer blurs, texture, and a custom brush. Learn to pair these with Smart Animate prototyping, and you can come up with some novel effects.

First, that illustration from Miggi is very cute. Second, I have no idea how these talented minds at the Figma Draw team made all of these complex visual effects exportable to SVG. Mad respect!

Figma created an entire hands-on course on designing a portfolio website from scratch. ​“We’ll cover the basics like shapes, text, and frames, and tap into more advanced features like auto layout, components, and prototyping. By the end, you’ll be ready to start bringing your own ideas to life.”