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

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

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

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

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

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.

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

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.

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.

Alex Einarsson teamed up with Figmates Luis Ouriach and Noah Levin to build a plugin for converting your Read​.cv profile into a Figma Design file, which can be easily copied and pasted into Figma Sites as a functional resume website.

“Today, we’re launching Figma Sites, an all-in-one tool for you to design and build custom, responsive websites. Here, we share how you can go from design to production in the most efficient — and expressive — ways.”