Figma Sites now supports apex (top-level, like exam​ple​.com) domains and custom subdomains (like yourname.figma.site) so that you have more options for personalizing your URL.

This is a pretty nice QoL improvement. Want to see it in Figma Design too!

Designer Advocate Lauren breaks down how to create code layers in Figma Sites.

Software engineers Darragh Burke and Alex Kern share the story behind the creation of code layers to bring design and code together. ​“Building code layers in Figma required us to reconcile two different models of thinking about software: design and code. Today, Figma’s visual canvas is an open-ended, flexible environment that enables users to rapidly iterate on designs. Code unlocks further capabilities, but it’s more structured — it requires hierarchical organization and precise syntax. To reconcile these two models, we needed to create a hybrid approach that honored the rapid, exploratory nature of design while unlocking the full capabilities of code.”

Now you can bring an existing design library to Figma Make, so the model can extract color palette and usage guidelines, typography and custom fonts, as well as core styling elements. You can also manually define rules for the model to follow via a guide​line​.md file. Watch the above video from Make PM Holly Li, or read the help article.

You can now adjust the width of your stroke at any given point along a path with the new variable width stroke vector editing tool. Variable width stroke also makes it possible for users to draw with pressure sensitivity on tablets. Figma will set the stroke width to reflect the amount of pressure applied at each point when drawing with a stylus, which makes freehand drawing in Figma more realistic. (Still no iPad app though.)

Jamayal makes cool atmospheric illustrations in Figma Draw.

Developer Advocate Akbar Mirza and Product Manager Yarden Katz provide a live update on Figma’s Dev Mode MCP (Model Context Protocol) server, explaining what MCP is, how it works, how to set it up, and how it helps bridge the gap between design and code. They also cover the new support for Annotations, which allows designers to add accessibility, behavior, and content information to their design files, which the AI agent can then use to generate more accurate code. Finally, they discuss the importance of aligning variable names between design and code. Don’t miss the follow-up video where Akbar and Yarden answer viewer questions from the livestream. 

“New in Dev Mode MCP Server: Annotations are included as design context. Generated code now benefits from both the structure of your design and your design intent.”

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.

Great demo of code layers by Niko, who is now a product manager for interactivity. ​“Code now belongs; make a mess, rev, refine.”

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