“We’ve rolled out updates to improve how embeds work in Figma Sites. Embeds let you bring interactive content directly into your webpage — from forms to music to social media — using a simple URL.”
“The look and feel of FigJam’s toolbar has a refreshed look and feel, with new iconography, submenus, and a streamlined experience. The tools you use still live in the same place, but their look and feel have been refreshed to match patterns found everywhere else in Figma.”
A few updates to Figma Make to make editing, previewing, and iterating even smoother: preview your Make across screen sizes using a new device dropdown menu and custom dimension editor; Make now saves named versions and tracks every code edit, so you can quickly review changes and restore to an earlier state at any time.
Figma launched a community for Figma Make, so now you can see what was built with this prompt-to-app tool.
Starting July 24th, Figma Make and all Figma AI features, including Code Layers, Rename Layers, Make/Edit Image, etc., are now in general availability, and Figma Make is available for everyone to try. All plans and seat types include AI credits that are shared across all Figma AI features and products.
Ridd got an inside look at Figma Make while talking to Holly Li and Nikolas Klein about the future of prototyping. In this episode of the Dive Club podcast, they rethink what “high fidelity” means, explore how Make fits into the design workflow, and discuss use cases they’re most fascinated by.
Tom Johnson suggests we need to go from Canvas → Make to Make → Canvas → Make, so we could prompt the rough parts of the app and then use those scrappy elements to design all of the different canvases for the flow or feature, then feed those back into the Make workflow.
A new official free course for beginners: “This course will walk you through the entire process of creating a website design for a personal portfolio website. We’ll start by teaching you the fundamental concepts and features that Figma Design offers, and then we’ll go on a creative journey together to make a website that you can customize to make your own using some of Figma’s most exciting features.”
Ana Boyer: “Just as design systems help design and engineering teams understand brand guidelines, best practices, patterns, and code, they give AI agents the context they need to produce not just any output, but the right output. And when AI agents can build with your design context, they create a flywheel effect: AI strengthens your design system, which powers better AI code generation.”
Great analogy: “Asking an AI agent to generate code without design system context is like asking a new engineer to start shipping code before onboarding. It might technically work—but it won’t align with how your team actually builds.”
Joey Banks shares a free lesson from his course with Dive readers on how to use Figma’s MCP Server.
In this replay from the June 4th, 2025 webinar, learn more about the latest tools that help you express more in your Figma designs. Lauren Budorick, Rogie King, and Tim Van Damme will walk through improvements to vector editing, as well as new brushes, fills, and effects.
Rogie walks through quality of life updates for Figma Draw’s variable width stroke feature. Now you can select a width point and double click to enter a numerical value; after selecting a width point, you can go to the next one with Tab and the previous one with Shift-Tab shortcuts; with a custom width profile, you can see a preview of the shape or edit the width profile from the menu; hold Control to disable Snap to Pixel for more precision; select two width points by holding Shift and resize both together.
Rogie King introduces a new brush type in Figma Draw — scatter brushes. Make sure to read a fun behind-the-scenes look at how Rogie and Molly worked together to create and name the new brushes.
Miggi shows a new Figma Draw feature. You can now take any flattened vector path and offset it to expand or retract it.
Jack Michalak and Tammy Taabassum pair with Supabase’s Chris Caruso to demo Make’s new Supabase connector, wiring auth, file uploads, and live Postgres tables straight from a Figma frame. Nice primer on turning a design into a data-backed web app with almost no code.
Figma Sites now supports apex (top-level, like example.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 guideline.md file. Watch the above video from Make PM Holly Li, or read the help article.