Figma Release Notes

NEW RELEASE

FIGMA COMMUNITY

COLLABORATION

DESIGN

DESIGN SYSTEMS

We've added more ways to discover, create, and share skills for the Figma agent. What's new:

• Agent skills in the Figma Community: Browse through 50+ skills for design workflows—from research and design systems to handoff—in the AI skills library. Add skills to your agent to try them for yourself, or copy and paste markdown files to your agent of choice.
• Create skills with the agent: Ask the Figma agent to create a skill based on context in a file to package up repeatable workflows. The newly created skill can be invoked with a / in the Figma agent.
• Publish skills to the Figma Community: Add your skill to the AI skills library on the Figma Community for anyone to try or remix it for their workflows.

Now you can author skills for our agent, directly in Figma, to put your point of view to work. Here are 10 of our favorites to get you started.

For the uninitiated, skills are plain-text markdown files that help you work with an agent. Since they take the shape of ordered instructions or guided prompts, at first glance, they can seem like they’re built more for engineers than designers. But they’re actually perfect for capturing the opinions and judgment calls that every designer carries around.

Other skills I’ve built

• /image-audit to check the exportability of every image in a file and drop a report right on the canvas
• /shader-starter to help people prompt for shaders with fewer details
• /make-a-type-scale to build a type scale from selected text and generate the matching font variables

Sometimes, one skill is all it takes to unlock a new workflow. My “aha” moment came while building a motion tutorial: I wrote a skill for the Figma agent to apply my go-to easing curves to the keyframes I was working on, and called it /ease-like-miggi. When my team used it in their workflows, their motion designs eased like mine, and I was all in.

Starting today, you can work with the agent to author skills in Figma. Here’s how:

• Ask the agent to create a skill using a design frame as reference, or one that follows specific steps or guidelines you provide.
• Preview the skill once the agent drafts it, then put it to work in your chat.
• Keep iterating as you test it—edit your steps, change its formatting, ask for recommendations, or open the markdown editor directly for manual changes.

Many of these skills also work with Figma’s MCP server in third party agents. You can find skills specifically for the Figma MCP server in our GitHub repository.

I was curious about how other designers use skills when they work with the Figma agent, so I dug into the Figma Community. Here are 10 of my favorites, from unifying aesthetics to applying design system principles.

1. Apply an x-ray effect to your images

Created by: Adele Ix, freelancer
Skill: /xray-scan
What it does: Turns a photo or text description into a realistic-looking radiograph that visualizes the internal details of an object. It generates two finishes right away—glowing white on black and soft dark tones on white.
In Adele’s own words: “I love making collages, and that really shows in the skill. My favorite part is layering multiple X-rays on top of each other. They’re monochrome with glowing edges, so they stack into really cool collages, and the results aren’t just cool on their own—they also blend together beautifully.”

2. Find where motion is missing

Created by: Emil Kowalski, Linear
Skill: /find-animation-opportunities
What it does: Scans designs to identify places that don’t animate but should, and vice versa. The skill addresses questions like “What could be animated here?” or “How do I make this feel more alive?” It proposes what motion to add, where, and with exact values. You can implement these changes yourself in Figma Motion, or ask the agent to apply them for you.
In Emil’s own words: “This skill works best when it’s pointed at one frame and extra context is added, such as the target persona for the page. You can also use it to avoid over-animating, by asking, ‘Is there anything that shouldn't animate at all?’”

3. Bring motion to a static composition

Created by: Mallory Dean, Figma
Skill: /camera-pan-and-zoom
What it does: Builds a camera rig—a nested layer setup that mimics real camera movement—around selected content, then animates the pan, zoom, or roll like a motion director framing a shot. For example, it can do a grid tour through a set of cards before zooming back out to the full view.
In Mallory’s own words: “It’s a very niche skill, but it helps create zoom and pan camera movement without touching any frames in the design.”

4. Catch the details your interface is missing

Created by: Jakub Krehel, Interfere
Skill: /better-interface
What it does: Gives the agent Jakub’s own rulebook for interface craft—specific standards across typography, layout, accessibility, motion, and product writing.
In Jakub’s own words: “When you go from using a good product to a great one, you can feel the difference. It’s usually not a single thing, but instead a lot of small things that add up. This skill captures these details and best practices that are often overlooked or not immediately obvious.”

5. Document components automatically

Created by: Mauro Berteri, Itti Digital
Skill: /component-handoff
What it does: Turns a single component or component set into a ready-to-share documentation frame on the canvas. Select one, and it lays out:

• A header with a name, version, owner, and description
• A live preview
• A variant grid
• A do’s and don’ts section
• An interaction/states breakdown
• The component’s full anatomy

In Mauro’s own words: “My philosophy is simple—automate the repetitive tasks that used to take me hours, so I can focus on actual creative work. With this skill, I took the exact handoff structure that has proven to work best over my years of experience and packaged it so any designer can adapt it to their own design system in a single click. It’s built to be scalable, predictable, and 100% editable directly on the Figma canvas.”

6. Match colors to tokens

Created by: Ian Guisard, Uber
Skill: /create-color
What it does: Turns a selected Figma component into a complete color specification. It maps every visible fill, stroke, and shadow to its design token or style, flags hard-coded colors, and documents the results across variants and states.
In Ian’s own words: “One of my favorite examples is a button with several types, states, and color modes. When a component uses layered fills or gradients, it lists each fill in stacking order and each gradient stop with its position, color, and bound variable. Engineers can reproduce the treatment directly from the annotation without inspecting every layer manually.”

7. Audit your components in one pass

Created by: Amy Ha, Walmart
Skill: /analyze-components
What it does: Crawls a page and cleans up what it finds. It then catalogs every component with a live preview, and:

• Flags orphans, duplicates, and naming errors
• Fixes issues automatically by cloning orphaned components and swapping every instance to the fix
• Writes the full results into a styled audit document on the canvas

In Amy’s own words: “It saves real time. Before, I'd have to right-click, go to the main file, and copy components over manually, or deal with ghost tokens and restyle everything by hand. Now I can do that kind of bulk editing all at once.”

8. Design for every state

Created by: Linda Ojo, Paystack
Skill: /ui-state-expander
What it does: Takes any screen, component, or flow and expands it into the complete set of states. This skill makes sure every state is designed before it ships to engineering, accounting for:

• Loading states
• Empty states
• Error states
• Disabled states
• Partial data states
• Edge cases

It comes back with triggers, copy, transitions, and implementation notes, so a polished happy-path mockup becomes something engineers can build.
In Linda’s own words: “I kept seeing the same review comments on every handoff: ‘What happens when this fails?’ and ‘What does empty look like?’ I eventually realized the checklist in my head should be a skill anyone, human or agent, can run.”

9. Give your design a crit

Created by: Joey Primiani, Superfuture
Skill: /superfuture-design-review
What it does: Reviews a file against UX heuristics, accessibility standards, visual hierarchy, interaction design, and product thinking. It then sorts every note into a traffic light system:

• Red for blockers
• Yellow for recommended fixes
• Green for what’s already working

In Joey’s own words: “This skill reflects my personal review process, balancing usability, accessibility, product strategy, visual design, and business goals while prioritizing feedback by user impact.”

10. Create a discussion guide for usability testing

Created by: Neha Kodi, Figma
Skill: /usability-test-guide
What it does: Provides a ready-to-run discussion guide for usability tests based on Neha’s best practices as a researcher. This skill looks over a design flow intended for usability testing, then adds contextual moderation questions directly on the canvas next to each frame.
In Neha’s own words: “Testing and learning is at the heart of my work at Figma, and this skill applies a few practices I don’t compromise on—grounding tasks in a participant’s goal, keeping probes open-ended, and scaling the number of questions to the simplicity or complexity of the design flow.”

Learn more about how to make skills for the Figma agent in the help center. The Figma design agent is available in open beta for Full seat users on Professional, Organization, and Enterprise plans. Collab, Dev, and View seats can use the agent in their drafts. The agent is free to use during beta.

Miggi is a designer advocate for education at Figma. An educator at heart, he obsesses over grids, color theory, image performance, and motion design. He treats screen recording videos like a fine art and documents design tips on social media. In his free time, he draws on coffee cups with Copic markers at cafes, and collects a wide range of synthesizers and drum machines.

NEW RELEASE

FIGMA COMMUNITY
COLLABORATION
DESIGN
DESIGN SYSTEMS

What's new:

• Agent skills in the Figma Community: Browse through 50+ skills for design workflows—from research and design systems to handoff—in the AI skills library. Add skills to your agent to try them for yourself, or copy and paste markdown files to your agent of choice.
• Create skills with the agent: Ask the Figma agent to create a skill based on context in a file to package up repeatable workflows. The newly created skill can be invoked with a / in the Figma agent.
• Publish skills to the Figma Community: Add your skill to the AI skills library on the Figma Community for anyone to try or remix it for their workflows.
  Read more about authoring your own skills and discover some of our favorite ones published on the Figma Community.
  Learn more in the help center

UPDATE

FIGMA WEAVE

AI

MCP

Starting today, you can run your Figma Weave tools from clients like ChatGPT, Claude, or Cursor using the Figma MCP server. Describe what you need and the agent finds the tool, runs it, and returns the result in your conversation.

This helps you:

• Stay in the flow by running Weave tools without switching apps.
• Keep your context, including prompts, images, and brand guidelines.
• Chat with your agent as results return directly to your conversation.

For example, if you’ve built a Brand mockup tool that turns product images into a mockup, just ask your agent: “Run my Brand mockup tool in Figma Weave with these images.” Your agent can find the tool, run it, track its progress, and return the result. You can learn more about Weave tools via Figma MCP server in our article or watch our tutorial. For the full list of supported clients, see the Figma MCP catalog.

Coming next: Build new workflows in Figma Weave without leaving your agent.

From treating code as a proposal to turning handoffs into conversations, here's how we shaped a new way of working to ship nested folders.

Today, we’re excited to introduce nested folders, a long-requested feature that helps growing teams keep their files organized as they scale content and tackle complex projects. Nested folders may sound like a straightforward quality-of-life improvement, but building them required rethinking Figma’s underlying content and permissions model from the ground up—everything from the file browser and admin controls to sharing, permissions, and core infrastructure.

When we started the project a year ago, we followed a traditional product development process: Product worked through the requirements, design mapped the experience, and engineering began building once the thinking felt resolved. Midway through the project, the context changed. On the one hand, our team was pursuing new AI-native capabilities that divided our resources. On the other, tools like Figma Make, the Figma MCP server, agent skills, codebase prototyping, and context-aware agents were making it much faster to turn an idea into something tangible. We could start building anywhere: with a prototype, code, or even something scribbled in Slack.

To match these shifts and ship nested folders, we leaned into a new way of working:

• Led with code: As code became cheaper to produce, we moved faster by spinning up pull requests (PRs) to test our ideas instead of getting lost in theoretical discussions.
• Shifted responsibilities: We worked with flexibility to address each problem, so engineers made design calls, our designer pushed code, and our product manager traded day-to-day execution for tackling bigger strategic questions.
• Exchanged handoffs for conversations: Blurring roles made us students and teachers in turn, and sharing the parts of our craft we used to guard built the trust the work needed.

Here’s how those changes looked from three perspectives across engineering, design, and product. Together, they show how our team found ways to deepen the relationships supporting the work, combined skillsets, and stayed focused on shipping the right experience or solution.

Software Engineer Ethan Adams on reaching new velocity with code

A few months into this project I realized that the typical product development process would take too long. It was like being halfway through a final exam, looking up, and discovering that there were only five minutes left on the clock—we had to move faster.

Rather than debating product requirements (“Who should have access to X?”) in sprawling Slack threads or meetings, we led with code as the proposal. These discussions had been valuable prerequisites when writing code was expensive and time-consuming, but we're in the era of agents. Instead of guessing if an idea would work, we simply spun up a PR to prove it.

We merged code as long as it didn’t break anything. This made it possible for us to quickly sketch ideas and show them to our cross-functional partners in a real, live testing ground. Copy not perfect? No worries. Functionality lacking? That was alright. Logical gaps? We could fix those later! In practice, this was a huge unlock for our velocity, and built confidence in the proposals we eventually selected. A working demo in your actual codebase beats a Product Requirements Document (PRD) every time.

Even though I had the green light to make product decisions as an engineer, I still relied on our Product Manager Sachi Shah as a thought partner to share ownership. Our collaboration used to look like a waterfall: She decided a requirement, and I implemented it. This time, it looked more like a verification loop: I led with a proposal, merged prototypes into staging, solicited feedback from Sachi, smoothed out the rough edges, and finally deployed the finished product.

Product Designer Cai Charniga on going from pixels to pull requests

I have a confession: My PR count is pretty low for this project. Two, maybe three. I didn’t magically cross over and become an engineer, but we all started stepping into roles that used to exclusively belong to someone else.

On this project, the engineers had strong instincts for structure, and a deep understanding of how complex enterprise permissions work inside a tool like Figma, so they regularly came to me with flows and design tweaks. When you have a strong design system giving people guardrails, and enough trust that they feel free to make the call, an engineer can go deep on a design feature and get it to a really solid state. This meant that when someone was at capacity, the work didn’t stall waiting for the right person to pick it up.

For example, we were working through our folder sharing flows: how the share modal should communicate inheritance for users with view or edit access, and how to handle the trickier cases where inheritance is broken. Software Engineer Jenny Yu stepped in and mocked up a few options. From there, I brought in our UX writer, Molly Rosen Marriner, and the three of us built on Jenny's approaches on the Figma Design canvas: Jenny keeping the flow technically sound, Molly sharpening the permissions language, and me shaping the visual hierarchy.

It ran the other way, too. There were times I picked up a change, got into the code, and realized how much was happening under the hood—enough that I'd go back to the team and say, “Honestly, this one shouldn't be mine.” Knowing where your expertise runs out is its own kind of craft. Even so, I think every designer should try to push a PR. When Ethan set me up with CoderBox, our sandbox for spinning up code environments, I felt how long certain changes took to build before I could even preview them, and that did more for my empathy than any handoff ever had.

Engineers could carry design work, and I could get into the code myself. That gave me room to go deep where it counted, running through more versions of the folder UI than the old handoff model would ever have allowed.

Product Manager Sachi Shah on trading control for conviction

With this new way of working, the first thing I had to let go of was the assumption that good product thinking had to come exclusively from the PM. My job became matching the right people to the right problems, giving them room to run, and knowing when to step back in.

Jenny Yu became one of my closest thought partners on critical content operations like how people move, duplicate, and transfer folders across Figma. Ricky Zein, also a software engineer, owned the experience for individual users and smaller teams, whose needs are often different from those of enterprise customers. And Data Scientists Patrick Kehinde Jr. and Eric Aberbook mapped how the new permissions model would affect each cohort, helping me pressure-test our assumptions and focus on the biggest risks.

Letting go of day-to-day execution gave me more time to focus on the strategic question underneath the project: Did better file organization still matter in an AI-first world, or were folders becoming archaic as AI search improved? We built artifacts that helped us see how folders could matter even more as people created more work—giving future AI search richer structure and context to retrieve against. But what helped most was stepping back to build a balanced portfolio of bets. Alongside nested folders, our team sprinted to launch skills in the Figma agent, another part of Figma’s AI-native strategy. Counterintuitively, spending less time PMing every detail gave me more room to build a roadmap where foundational customer needs and new AI-native experiences could move forward together.

Within the project itself, the most important place for me to redirect my attention was toward customers. I took on running the early-access program (EAP), and we got really scrappy. At Config, I crashed happy hours with our team’s Engineering Manager Ayush Mehra to cold-pitch customers on the file-organization system we were building. We convinced several people to join the EAP on the spot. From there, we kept expanding. Friends of Figma communities in Jaipur, Barcelona, Mumbai, and Lahore became early adopters. I also reached out to community leaders around the world and people on X who had been especially vocal about file organization—including Ilya Miskov​, a designer who had joined one of our early discovery conversations.

Customer feedback showed us how nested folders behaved inside live organizations, with messy files and established habits. It helped us catch bugs, fine-tune the experience, and reduce the risk of migrating customers to an entirely new content model.

Time in the room with customers gave me a kind of product clarity I couldn’t get from speccing alone. Trading control for conviction required me to step into the work I was best positioned to do, while trusting other people to do the same.

This way of working only works when the team trusts one another. Candidly, blurring roles was awkward: There were moments when we stepped on each other’s toes, crossed a boundary clumsily, or tried something we’d never done before. That discomfort was part of finding a new normal, and we could only move through it because we had invested in the relationships underneath the work. Over time, we became less precious about our individual domains and started actively teaching one another the parts of our craft we had previously held most closely.

We kept trust and context intact through shared rituals: weekly bug bashes, cross-functional syncs, live pairing between design and engineering, and celebrations of major milestones—including launching internally to all of Figma. Those rhythms kept us anchored on the same goal, delivering on an eagerly anticipated customer promise without compromising quality.

Nested folders will take a few weeks to roll out to all users. Visit our help center to learn more about how to get started.

NEW RELEASE

FIGMA
FIGJAM
DEV MODE
FIGMA SLIDES
FIGMA BUZZ
FIGMA DRAW
FIGMA MAKE
FIGMA SITES
AI
FIGMA COMMUNITY
DESKTOP APP
MOBILE APPS
COLLABORATION

Organize files the way your team actually works with nested folders. Folders replace Projects and can be nested and colorized to add structure that can flex as your work grows.

• Projects are now folders. All files in Teams now live in folders. All previous references to Projects in the UI have been renamed to Folders.
• Folder nesting and colors. Nest folders up to 10 layers deep and assign folders colors to create hierarchy.
• Simpler sharing. Nested folders inherit access from the folder above it, or you can limit access to specific people.

Folders are rolling out over the coming weeks to all users on all plans.

From treating code as a proposal to turning handoffs into conversations, read the story of how nested folders got built on the Figma blog.

NEW RELEASE

FIGMA MAKE

PROTOTYPING

• Shape it yourself with granular control over spacing, type, and layout. Your edits stack in the chat panel, so you can review each one before you apply it.
• Point to what you mean with annotations—mark a spot and describe intent that's easier to say than to click, like "make this section feel calmer," and the agent makes the change right there.
• See it across screen sizes by switching device frames as you edit, so your design holds up everywhere.
• Reach the panel faster from the updated toolbar—Edit and Annotate to the agent are right where you start.

A note on credit consumption

With visual editing and annotations, Figma Make is bridging the gap between design and code. Select any element you want to change, adjust it directly in the properties panel, or write in-context prompts with annotations.

Today, we’re introducing a properties panel and annotations in the Figma Make editor. Whether you’re starting from scratch or editing existing code, these features give you an interactive and visual way to edit directly.

The properties panel brings familiar Figma Design controls—like adjusting spacing, typography, layout, and more—into Make. And for changes that go beyond visual properties, like an interaction or animation, annotations let you give context for the agent directly in your design. So when an edit needs specificity, you can adjust the controls in the properties panel, or use annotations when you need to point and prompt, all while staying in a continuous flow.

The properties panel (left) and numbered annotations (right) are now available in Figma Make.

Direct manipulation gives Make a precise target, instead of the searching and guesswork a text prompt requires. Each edit uses far fewer tokens and finishes faster than describing the same change in a prompt. Edits stack up in the chat panel first, staged and credit-free, until you apply them. Once you apply the changes, Make consumes credits and updates your file to a new version.

Use the properties panel for visual edits

The properties panel is where you can work through detailed edits with visual controls. You can try different padding, test a few corner radii, play with font weights, and drag elements to reorder them until they feel right. To start, select “Edit” in the top right toolbar, then adjust anything from line height and letter spacing to opacity, z-index, and border style. You can also see the full DOM tree (a layers panel for your code) as you work, and select every instance of an element at once to update them together instead of clicking through each one.

Right now, edits with the properties panel use the color and typography tokens already defined in your codebase. With Code Connect coming soon, Make will also link to your Figma Design components, keeping them consistent across design and code.

Direct manipulation stages every edit in the prompt box so you can review each change before you commit to it, or discard anything that doesn’t look right. Once you’re happy, Make applies the changes and updates the underlying code, so what you build visually is what actually ships.

Change the spacing between elements directly in the properties panel—the agent updates the relevant code to match.

Annotate to bridge prompting and precision

For edits that span beyond visual properties, annotations give the agent context and can cover several elements at once. They’re precise about location but give you flexibility to explain the change in your own words. Select “Annotate for agent” in the toolbar, mark the focus areas directly on the canvas, and describe what you want to update, like “when you hover over this thumbnail, have it zoom in slightly,” “fade this button in after a 300ms delay,” or “add a subtle press effect when this button is tapped.” The agent then reads the exact context you marked and applies your changes across all selected elements in the code.

Use annotations to prompt specific changes directly on the design.

The properties panel and annotations add more precision to editing code than prompting. Whether you’re using direct manipulation to change an element or using annotations to describe a change and specifically steer the agent, you can now design in code with intuitive and visual controls. The same editing experience is coming to code layers, so you'll soon be able to work this way with code right on the Figma canvas.

The properties panel and annotations are rolling out now and will be available to all seats and plans in Figma Make. Both features will consume credits. Heads up: The properties panel only works with new Make designs. Any previously created designs will continue to use the old editing tool.

Visit our help center to get started. For other ways to get the most out of each credit, check out our tips for using Figma Make credits more efficiently.

Phillip Wang is a product leader at Figma, working on Figma Make. Previously, Phillip worked on delightful collaboration software at Gather.

UPDATE

FIGMA

FIGMA MAKE

DESIGN

WEBSITES

When you bring code-backed screens onto the Figma canvas, colors, type, and spacing now bind to most of the variables already in your file instead of landing as hardcoded values. You'll see this when you:

• Copy a Make preview onto the canvas as design layers
• Generate a design from code through the Figma MCP server
• Capture your live web page as editable layers with the Chrome extension

More frames also come in with auto layout, so edits resize and reflow instead of needing manual cleanup. Together, this means you can bring coded or legacy screens back into Figma and spend your time refining the work, not rebuilding it.