Tools · 2026-11-09

Six easy ways to use the Figma AI agent right now

Figma has launched an AI agent that works right on the design canvas and helps with feedback, styles, layout variations, and animation.

✨ What it is

Figma, a popular service for designing websites and apps, has added an AI agent that works directly on the canvas. The agent can join at any stage of work, from early ideas with a team to final details before handoff to developers. The person stays in control, and the agent only suggests and applies what you approve.

The agent is available on Starter, Professional, Organization, and Enterprise plans, as well as on higher education plans. Collab, Dev, and View seats can use it in their drafts.

📌 How to use the agent in practice

First: turn meeting notes into comments. Click + in the agent's chat box, open Connectors, and connect the app where your notes are, such as Granola, Notion, or Google Drive. Then prompt: "Annotate this design based on the crit feedback in this transcript".

Second: turn comments into next steps. Select the frames with comments and prompt: "Summarize the feedback on these designs and suggest updates". The agent summarizes the feedback and suggests changes you can apply with one confirmation. Ready-made skills run with a / command. For example, /comments-do-try-consider sorts feedback into "do", "try", and "consider".

Third: create your own image style. The agent can build a shader, an effect backed by code, such as a grainy vintage look, liquid metal, glass, or holographic textures. Beginners can start with the /shader-starter skill. To apply the effect to many photos, connect Google Drive through + → Connectors and ask the agent to find the photos in a folder and apply the same shader.

🔹 Variations, interactivity, and animation

Fourth: draw several options at once. To bring an app or website onto the canvas, you can use the Figma Chrome extension in one click. Then ask the agent for three layout variations with different main image sizes and heading positions, keeping the text, colors, and style. If you select your team's library in the Libraries menu, the agent will use existing components and styles.

Fifth: make a static design interactive. Select the frame, choose Build this with code, and ask for cards that users can swipe or drag aside. This lets you test how the transition feels before development.

Sixth: add motion. For example, a hand icon that shows where to tap on a screen can press slowly or spin playfully. The agent creates both versions, then you switch to Motion in the toolbar, select the frames, and press play to compare.

Sources: 🔗 Figma Blog