LongCut logo

How to use Figma agent in your design workflows

By Figma

Summary

Topics Covered

  • Detail transforms AI output from generic to buildable
  • Pre-empt the review by critiquing your own work
  • One prompt updates text, images, and dozens of screens

Full Transcript

Figma's agent opens up so many possibilities for how AI can support your design workflow, but what does that look like in practice?

In this video, I'll show you how chatting with Figma can help you explore ideas, make sense of and implement feedback, and move faster as you refine designs. Let's

get started.

We're getting started on a new week in review feature for our budgeting app, Cheddar.

Starting with chat can help us think broadly about what the different possibilities are at the beginning of the project.

Heading over to chat, the first thing I'm going to do is make sure my design system is connected, which will ensure any designs use my existing components, variables, and styles.

Now let's start prompting.

I'm designing a weekly insight screen for a budgeting app to increase two-week retention, where most users drop off because they don't feel a sense of progress.

Generate three distinct design directions that motivate users to come back.

In this prompt, I'm including the goal, key context from user research, and the metrics that I care about.

The more detail you give, the more relevant and actionable the outputs will be, so you're not just getting generic concepts, but directions you can actually build upon. Let's give the agent a moment to work and see what it comes up with.

build upon. Let's give the agent a moment to work and see what it comes up with.

Looking at these outputs, there's a lot we can work with. I've got three different directions all built with auto layout, components, styles, and variables from my design system.

I can use these as inspiration, or I can start editing them directly to keep exploring and refining the ideas.

Because the work happened directly on the canvas, it's easy to make adjustments and keep going, and the agent continues to work with your design system as you iterate. You can even @mention specific components as reference.

iterate. You can even @mention specific components as reference.

Here, let's say I want to continue exploring this option, but try a variation that uses an existing component instead.

Let's prompt, "Update this section to use the card component," and give the agent a moment to work.

Figma's agent helps you explore more ideas early on, think through the problem from different angles, and get started iterating and refining right away.

Speaking of which, I'm gonna keep experimenting with these designs to narrow in on a direction, and I'll be right back.

With the new design options reviewed and feedback in hand, I'm ready to move on to the next round of refinements. But as designers, we all know that after a design review, your to-do list can explode pretty quickly. You're sorting through comments, making sense of different perspectives, and trying to piece it all together into actionable design updates.

Luckily, Figma's agent can help you synthesize feedback from your coworkers and even evaluate your designs from different perspectives. Here, you can see I've got a bunch of comments from my coworkers on these designs. Let's select

the frames and ask chat to summarize the feedback and provide some suggested updates.

Now I can turn scattered feedback into clear priorities and next steps.

You can also use Figma's agent to stress test your ideas against additional perspectives.

For example, I know I want to run these designs by our growth-focused product manager. I can use chat to get ahead of their feedback by prompting, "What would a

manager. I can use chat to get ahead of their feedback by prompting, "What would a growth-focused PM say about these designs?"

And give that prompt a moment to run.

This helps me catch concerns early so I can refine the designs before the review and use that time more effectively.

I'm gonna work through some of this feedback, and the agent can actually help here too. Let's prompt the agent to start addressing some of this feedback by

here too. Let's prompt the agent to start addressing some of this feedback by prompting, "Make the hero more actionable with a primary CTA to make it official," and give the prompt a moment to run.

Now I'm gonna continue going back and forth with chat, letting the agent handle some of these updates while I focus on things I want to experiment with a little bit more.

As designs progress, the work can really add up, things like accounting for different states, updating content, and making each and every change across multiple screens.

Chatting with Figma's agent helps you stay in the flow by combining AI generation with the ability to jump in and refine things on the canvas so you can move quickly through repetitive updates without feeling disconnected from the work.

One useful way Figma's agent can help in this phase is by quickly adding and updating content across your designs so you're not working with placeholders.

For these weekly insights designs, I want to make sure this feature is valuable for different user types.

Let's prompt the agent, "Stress test this design by adding realistic content. Show me an encouraging version for a user who is falling behind and an empty state for a new user," and give the agent a moment to work.

Taking a look at these results, notice that the agent updated not just text, but also images and even component properties in a single step. The agent can also apply specific targeted edits across multiple screens, like fixing spacing, updating text and icons, and standardizing layouts.

Here, I want to make these designs more compact, so I'm gonna select the designs and ask chat, "Make these designs denser by reducing font size and spacing throughout," and give that a moment to run.

The agent applied these updates to each of these screens in several places in a single prompt, saving me a ton of time.

From exploring ideas to working through feedback to refining beforehand off, Figma's agent has your back. But everyone's workflow looks a little different, and as you experiment, you'll find the ways it works best for yours. Let

us know in the comments how you're most excited to use chat.

[outro music]

Loading...

Loading video analysis...