Emma WebsterContent Strategist, Figma
From making designs more expressive and automating busywork, to exploring more possibilities on the canvas, here are six ways to push designers further with the Figma agent.
Share 6 easy ways to use the Figma agent right now
The Figma agent Starting today, work with an agent that is built for Figma—directly on the canvas.The Figma design agent is here
1. Annotate designs using transcripts
When feedback comes flooding in during a meeting or design crit, it can be hard to synthesize it, determine what’s worth actioning, and preserve relevant context. Using a connector, you can bring meeting notes or transcripts from tools like Granola, Notion, or Google Drive into the Figma agent and prompt it to add feedback next to the relevant designs. That means you can stay focused on the conversation during the meeting, knowing you already have what you need to turn the discussion into next steps.
Try it: Click + in the agent’s chat box, open Connectors, and connect the app where your meeting notes or transcript lives. Then share the link and prompt the agent: Annotate this design based on the crit feedback in this transcript.
2. Turn design comments into next steps
Using skillsA skill is a reusable set of instructions you can trigger with a slash (/) command in the Figma agent. To use one from Figma Community, open the skill’s page and click Save, then type / in the agent’s prompt box to select it. You can also create your own to capture a workflow you want to repeat or share with your team.
When comments pile up in your Figma file, the Figma agent can help you summarize feedback and suggest updates, turning scattered comments into next steps. After reviewing the suggestions, you can also have the agent apply the changes you agree with directly to your designs.
Try it: Select the frames with comments, then prompt the agent: Summarize the feedback on these designs and suggest updates.
To organize feedback, try using a skill—a reusable set of instructions for the agent. Use the /comments-do-try-consider skill to organize feedback into things to do, try, and consider. Add the skill, then prompt the agent: Use /comments-do-try-consider to sort the comments on this design and add the summary to a new frame next to it.
3. Create custom shaders
Work with the Figma agent to build a custom shader that gives your designs a distinct look. Shaders—effects or fills backed by code—can give designs unique styles like liquid metal, grain, glass distortion, or holographic textures. Say you want to create a custom shader to give your photos a grainy, vintage look. You can describe the effect directly to the agent and refine it through prompting. If you’re new to shaders, the /shader-starter skill can help you get started. You can then prompt the agent to apply the effect to other photos, including images from a connected Google Drive folder.
Try it: Choose a photo in your design, then prompt the agent: Create a custom shader that gives this photo a grainy, vintage look.
To carry that look across more images, connect Google Drive through + → Connectors and prompt the agent: Find the photos in this folder and apply the same shader: [folder link].
Describe the custom shader you want to create directly to the agent.
The custom shader adds grain, faded colors, and a soft vignette to the photo.
Ask the agent to apply the same shader across photos for a consistent look.
Find your custom shader in Tools and apply it to another image.4. Spin up multiple directions at once
Need a hand getting your app or website onto the canvas? Get the latest version into Figma in one click with the Figma Chrome extension, then work with the agent to riff on the layout or content.
Getting to the best idea takes exploration, but historically, building several directions on the canvas meant significant upfront time. Now, the Figma agent can create several variations of a screen or feature in one prompt, so you can weigh small details against one another or compare a few different directions on the canvas. For example, imagine you’re designing a weekly insights screen and want to try different layouts, like changing the size of the main image and where the heading sits. You can ask the agent to create those variations in one prompt, then compare them side by side to see which balance of imagery and text works best. With your team’s design library selected, the agent can use your existing components, styles, and variables.
Try it: Open Libraries in the agent’s prompt menu and select your team’s library, then select your design and prompt the agent: Create three layout variations of this weekly insights screen. Try different sizes for the main image and different placements for the heading and introductory text. Keep the existing content, colors, and visual style.
5. Turn static designs into code layers
The Figma agent can help you work through interaction decisions that are hard to judge from static screens alone. Say you’ve designed a stack of cards in a carousel that users can swipe through. Before you go any further, you want to see how it feels to swipe through them. The agent can recreate your design as a code layer, an interactive prototype backed by code on the canvas, so you can drag a card aside to reveal the next item and refine how the transition works.
Try it: Select your design frame and choose Build this with code, then prompt the agent: Make this card stack interactive so users can swipe or drag the top card aside to reveal the next item. Keep the stacked layout and animate the transition between cards.
6. Add and experiment with motion effects
The Figma agent can add motion to a static design, whether you have a clear idea of the movement you want or need a few options to compare. For example, if you’re using a hand icon to demonstrate where to touch a screen, compare an option where the hand taps slowly with another where it spins playfully. The agent can create both variations in one prompt, so you can play them back and decide which fits your design without building each animation manually.
Try it: Select your design frame, then prompt the agent: Create two animation variations for this design: one where the hand spins before clicking and another where it slowly presses down. Then switch the toolbar toggle to Motion, select each frame, and press play to compare.
The Figma agent is available on Starter, Professional, Organization, and Enterprise plans, as well as for higher education plans. Collab, Dev, and View seats can use the agent in their drafts.
Learn more about the Figma agent in our help center.
Emma Webster is a writer and editor on Figma’s Story Studio team. Previously, she’s worked as a writer at Faire and Audley Travel.
3 ways product designers use the Figma agent for craft, speed, and creative expression
Workflow lab: Test ideas with code layers and the Figma agent
Figma’s design agent, now with custom tools and greater context