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.”
“Recently, we introduced two new features for improving design & development collaboration. In this video, we’ll explore these new features and show how they can assist you during handoff. First, we added categories to our annotations features which makes it easier to communicate design intent and improves navigation for developers. Second, we added our new eyedropper tool to Dev Mode making it easy to copy color values, styles, and even code syntax.”
“With Figma Buzz, brand designers and marketers have a shared space to build beautiful, on-brand assets at scale.” Non-designers on my team use Canva a lot for event materials and marketing assets, and I can’t wait to set them up with customizable on-brand templates.
Mal highlights a few core features of Buzz — bulk create, make or edit images with AI, and wonderful templates to get started.