What it takes to build great products now

With AI, you can go from writing a prompt to something clickable in a few hours. But getting there fast doesn’t mean you've built something great. A polished prototype doesn’t get you past the big questions: Is this direction the best or just the first? Does it feel like us? And above all: Is it actually worth building?

The teams answering those questions well are strong in three areas—speed, direction, and differentiation. They keep moving through the final stretch, weigh many directions before betting on one, and shape the result into something only they would make.

Speed: Keep up momentum until you ship

When the first 80% is easy, teams can lose momentum in the last 20% of the work because a prototype can feel like something the team can actually launch. Product builders might realize that the prototype they made quickly doesn’t actually use their design system or creates extra work when it moves from design into code. The challenge is holding onto that early speed

as the work gets more detailed, involves more people, and gets closer to shipping.

Use the fastest medium for the job

As products take shape, teams iterate constantly, from small visual tweaks to changes in how a feature behaves. The fastest approach depends on what you’re solving for. For example, if there’s too much space between a form field and a button, it may be quicker to adjust the spacing directly in Figma than to describe the change in a prompt. Other changes are faster to make in code. If you’re building a calculator that lets users estimate the price based on how many teammates will use the product, you don’t need to design a separate version for 10 people, 20 people, or 50 people. You can set up a simple calculation in code so the price updates automatically as the number changes.

The biggest speed gains come from choosing the fastest way to make each kind of change, rather than forcing every task through the same workflow. In Figma, that can mean moving between direct editing, prompting, and code depending on the change you need to make.

Choose the right tool for the task:

• Make precise visual edits directly

  A properties panel and annotations, now in Figma Make

  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.

  in Figma Make with the properties panel. Adjust things like spacing, typography, layout, or sizing without having to describe every change in a prompt.
• Copy a Make preview

  Bringing Figma Make to the canvas

  Now you can copy any design from a Figma Make preview to the design canvas, allowing you to edit, iterate, and take your ideas further.

  into Figma Design as editable layers, where the team can refine and riff on it directly.
• Connect Figma Make to your codebase

  Figma Make, now on your local code

  From visual editing to contextual prompting and collaboration, Figma Make is expanding how teams can design with code.

  to make and preview changes using the product’s existing code, then send those changes to engineering for review.

Hand the whole team the shortcut

As work moves through the team, maintaining speed means making useful shortcuts repeatable. Say a designer figures out a fast and reliable way to check a new flow against your accessibility standards. Instead of keeping that process to themselves, they can turn it into a reusable workflow for the whole team. In Figma, teams can turn those repeatable ways of working into skills or plugins that anyone can reuse.

Make better ways of working available to the whole team in Figma:

• Create a custom skill
  

  Try these 10 skills—and show off your own

  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.

  yourself or with help from the Figma agent, then share it with the team for repeatable workflows like critiquing designs, testing with users, or catching compliance issues.
• Prompt the Figma agent to build a reusable plugin
  

  Figma’s design agent, now with custom tools and greater context

  Prompting gets you started. Custom tools, real context, and skills take the design agent further—so what ends up on the canvas actually looks like you.

  for a task your team does often on the canvas, like automatically arranging images into a layout, then share it so others can use the same shortcut.

Direction: Go broad before you choose

Exploring multiple directions used to take longer, which sometimes forced teams to narrow quickly or keep ideas too hypothetical to really understand how (or if) they’d work. Now, the same tools that speed up a first direction also make it faster to try more alternatives and see how promising ideas hold up in more situations before committing.

Check the edge cases before you commit

A single prototype hides the branches, the empty states, and the awkward transitions where even a promising concept can create problems in practice. Say you’re designing a flow for booking salon appointments. Someone picks an open slot, then gets a confirmation. But the prototype doesn’t show what happens if nothing is available that week, or when the hairstylist cancels, or when the customer needs to reschedule. Those are the moments where a prototype is too limiting to illustrate the full picture, and where you find out whether the direction actually holds.

Get the full view in Figma:

• With code layers,
  

  Code on the Figma canvas

  With code layers in Figma Design, you can explore multiple directions with code, side by side with your team.

  pull key screens or states from a prototype into editable design layers, so you can inspect the full flow on the canvas, make changes, and apply those changes back to the prototype.
• Ask the Figma agent

  The Figma design agent is here

  Starting today, work with an agent that is built for Figma—directly on the canvas.

  to build out missing states or branches from an existing screen or flow.
• Prompt the Figma agent to surface gaps or scenarios the current flow may not account for.

Compare directions together

Ideas are easier to judge when they have company. Putting several directions next to each other sharpens the trade-offs, like which one pushes the visual identity further and which one prioritizes a clearer UI experience. In addition, a lot of AI experimentation happens in isolation, but teams need to compare, react, disagree, and build on one another’s ideas. A shared canvas gives them a place to do that while keeping the directions and the discussion together, so feedback doesn’t get lost in a separate thread.

Explore and compare directions in Figma:

• Ask the Figma agent
  

  Figma’s design agent, now with custom tools and greater context

  Prompting gets you started. Custom tools, real context, and skills take the design agent further—so what ends up on the canvas actually looks like you.

  to generate several variations from one prompt, so the conversation with your team starts with a range of options instead of just one.
• Duplicate an interactive code layer and try alternatives beside it, keeping each version real enough to compare how it behaves—not just how it looks.

Differentiation: Shape products that earn attention

When AI can get more people to a polished starting point, standing out takes more deliberate choices. Differentiation comes from pushing beyond the first output and shaping the experience until it reflects a point of view that’s distinctly yours.

Start from a strong foundation

A strong design system

carries your product’s point of view. Its components and variables encode thousands of small decisions about what belongs and what doesn’t—details like which red is on brand, how rounded a card should be, how much space belongs between elements, or which button treatment signals the primary action. When your team builds those choices into the system, AI-generated work can inherit the same visual language instead of falling back on generic defaults. The qualities that make your product distinct show up consistently in everything the team creates.

Make your standards reusable in Figma:

• Ask the Figma agent to work from your design system and flag where the work strays from it.
• Use Code Connect with Figma MCP to show agents which components in Figma match the components your team uses in code, so they can build with the same system instead of guessing or re-writing components.

Refine the output directly

Prompting is powerful, but making one small change through another prompt can mean regenerating more than you intended. Great work comes from taking ownership of the output: keeping what works, changing what doesn’t, and pushing on the details until the result reflects your intent. Imagine you generate a custom shader and only the glow is too intense. Ask for a fix through another prompt, and you risk getting back a version where the color, blur, and pattern have shifted too. Instead, adjust the glow’s intensity manually.

Take control in Figma:

• Mix models from different providers in Figma Weave
  

  Connecting Figma and Weave

  Today, we’re announcing new ways your Weave creative workflows can live alongside your Figma frames.

  to get closer to the result you really want.
• Use shader effects to apply visual treatments like distortion, grain, or texture, right on the canvas.

Express more

Once you can refine the output directly, you can also push it further with visual expression like custom illustration and motion. That used to mean pulling in another tool or another specialist, but those constraints are fading. Say a designer wants a menu to slide open with a specific bounce instead of just appearing, or a card to use a shimmering gradient instead of a flat fill. Now that same designer can create both without leaving the canvas, pairing with the Figma agent to bring their vision to life.

Push your product experience further:

• Create vector artwork with Figma Draw
  

  Express yourself with Figma Draw

  Figma Draw pairs faster, simpler vector editing with powerful tools for visual expression—so designers of all stripes can bring their vision to life without breaking focus.

  , right on the canvas.
• Generate and combine images or video in Weave.
• Switch a frame to Figma Motion

  Introducing Figma Motion: Your canvas now has a timeline

  Motion now lives on the canvas—in the same file as your components, your variables, and your team—so your designs can come to life from day one.

  mode, then drag layers on the timeline to adjust when and how long each part animates, or just chat with the Figma agent to get a v1.
• Describe a custom shader, like the card’s shimmer, and have the Figma agent build a first pass to adjust on the canvas.

Building great products hasn’t become effortless. What’s changed is where the hard work happens. A prototype can be the opening move, but teams still have to keep momentum through the last mile, choose the right direction, and shape something distinct. Together, speed, direction, and differentiation turn faster building into a product people actually want to use.