Figma AI Prompt Templates for Designers

TL;DR: "Figma AI" is three different, separately-documented tools as of September 5, 2026: First Draft (being replaced as an entry point), Figma's in-canvas agent (beta since May 20, 2026), and Figma Make, a separate prompt-to-app builder. Only the agent and Figma Make can genuinely use your own components instead of generic ones, and only if your library is published and structured the way Figma's own design-system guide describes.

Every claim in this post is sourced directly from help.figma.com, fetched and read on September 5, 2026, with the exact wording quoted where it's quoted at all rather than paraphrased into something tidier. Figma's own AI documentation has changed more than once this year, including mid-year renames and a dated hand-off from one feature to another covered below, so treat anything here with a date attached as accurate for that date, and re-check the live help center before assuming a specific capability still works the way it's described.

What Does "Figma AI" Actually Mean Right Now?

Three separate, currently-documented surfaces, and conflating them is the single fastest way to get advice that doesn't match what's in front of you.

First Draft turns a text description into an editable wireframe using Figma's own pre-built libraries. It's the oldest and most widely-known of the three, and Figma's own help center now frames it as being superseded: "Beginning May 20, 2026, Figma’s agent will be the new entry point for this functionality, offering a more powerful way to explore, iterate, and refine your designs. The agent is currently in beta and rolling out gradually."

Figma's agent works inside a design file, in a persistent chat sidebar or an on-canvas prompt box, and can generate, edit, rename, and remix directly on the canvas. It's the successor entry point named above, and it's also a materially different tool: it can connect to a published library, search the web, run MCP connectors, and hold a running conversation rather than a single one-shot generation.

Figma Make is a different product entirely, not a Figma Design feature. Figma's own overview defines it as "an AI-driven, prompt-to-app tool that lets you bring ideas and existing Figma designs to life as functional prototypes, web apps, and interactive UI." Its output is working code you can publish to a URL, not a static Figma frame.

If a prompt template you found online doesn't work the way it's described, check which of these three it was actually written for first. A First Draft prompt and a Figma Make prompt aim at genuinely different outputs.

How Do You Write a First Draft Prompt That Actually Works?

Match the description to a pattern Figma's libraries already know, because that's literally how the tool is built. Per Figma's own documentation, "Figma AI uses Figma-built wireframing and design libraries as the foundation for generating designs", assembled from "a set of building blocks—or stacks of components—that are used to piece together your design based on the description you provide."

That's why some prompts land cleanly and others don't. Figma names its own strong examples directly: "A checkout page for a store that sells BBQs", "A food delivery app for pet food", "A marketing website for a content strategy consultancy". And its own weak examples, described as prompts that "don’t use design patterns common to websites or mobile apps": a novel's book layout, a birthday party invitation, a flyer shaped like a fish.

Strong First Draft pattern:
  [Page type] for [industry/product], e.g.
  "A pricing page for a developer tools startup"
  "A checkout page for a store that sells BBQs"
  "A signup flow for a fitness app aimed at beginners"

Weak First Draft pattern (outside common web/app patterns):
  "A birthday party invitation"
  "A flyer shaped like a fish"
  "A magazine spread for a novel"

Once a first pass exists, Figma's own docs describe two separate ways to refine it: a follow-up prompt describing the change, or the style controls for color, border radius, spacing, and typography. Prompted changes fall into the same three buckets Figma's own examples use: theme ("Use a watermelon theme"), content ("Change the settings icon to a gear"), and structure ("Move the Featured section below the nav bar"). Selecting part of the design first scopes a follow-up prompt to just that selection, rather than the whole frame.

Can Figma AI Actually Use Your Own Design System?

This is where the documentation itself has moved, and it's worth showing the actual dated contradiction rather than picking a side. First Draft's own article states, as a tip: "It’s not possible to generate designs using your own design system, although we hope to make that functionality available soon."

Figma's separate, more recent design-system best-practices guide describes something different for the newer surfaces. It states plainly that the agent in Figma Design can use a connected design system as the foundation for any designs it creates or edits, and separately that the agent in Figma Make can use a design system to build prototypes with real components, styles, and structure instead of generic defaults. Both statements are on the same Figma help-center page, live as of this writing, and the honest read is that this is the current answer for the agent and Figma Make specifically, while the First Draft tip above still accurately describes the legacy experience it's replacing.

Making the agent actually use your library takes two explicit steps, per Figma's own instructions: click Add context in the agent's prompt box to connect a library available in the file, then type @ inside a prompt to reference a specific component, variable, or style directly by name. Figma states plainly why this second step matters: "This helps the agent use your design system more effectively to create high-quality outputs." Neither step happens automatically just because a library exists in your file.

There's a fourth, related surface worth knowing about so you don't confuse it with the agent: Figma's MCP server, which includes a "write to canvas" tool. That's a genuinely different direction of travel. The agent inside Figma Design works on your file directly, from a prompt you type in Figma. The MCP write-to-canvas tool instead lets external AI coding agents, tools like Claude Code, Codex, or Cursor, push design content from your codebase into a Figma file using the Plugin API. Figma's own framing is useful here: think of the MCP tool as bringing content from outside Figma in, and the in-app agent as the thing you then use to explore and refine what landed. If a Figma-adjacent prompting workflow mentions MCP, it's talking about that codebase-to-canvas direction, not the chat agent this section otherwise describes.

Do You Need a Paid Plan to Use Any of This?

Yes, for every surface this post covers, and it's worth stating plainly before you plan a workflow around a feature you can't actually reach. Figma's own help center is direct about Figma Design's AI tools specifically: "Figma Design AI tools are available on paid plans", and "Requires a Full seat to use AI tools in Figma Design." Figma Make carries the same gate in its own documentation: "Figma Make is available for Full seats on paid plans." A free or lower-seat account in either product won't have access to First Draft, the agent, or Figma Make at all, regardless of how the prompt is written.

Usage inside a paid plan is also metered rather than flat-rate: Figma's agent runs on an AI credit system, and per its own FAQ, "The number of credits used by the agent changes based on the complexity of the task." That's a reason to test a design-system setup on something small and cheap before running your first full-scale generation against it, the same instinct Figma's own Make kit testing advice already recommends for a different reason.

What Should You Do to Your Design System Before You Prompt It?

Six things, all documented directly by Figma, and all worth doing before you write a single generation prompt rather than after the output disappoints you.

1. Build reusable blocks, not just atoms. Figma's guidance: "AI tools work best when they can reference complete, higher-order compositions: reusable blocks like cards, headers, feature rows, and carousels" that already encode a section's spacing and layout logic, rather than individual buttons and inputs the agent has to assemble from scratch. Mark worked examples with an _example suffix, or add a page literally named Examples; Figma notes the agent "can currently reference up to 200 examples in a file."
2. Name things like a person would read them aloud. Figma's own contrast: "A component called Card/Product/Default is immediately interpretable; a component called Frame 42 copy is not." Its slash notation (Button/Primary/Large) creates the same nested grouping for the agent that it does for a human browsing the layers panel.
3. Use auto layout everywhere spacing and wrapping matter. Without it, per Figma, "the agent has no way to tell whether a row of items should wrap" or how a container should resize. Fill container, hug contents, and fixed sizing are the three sizing intents Figma names as the vocabulary the agent reads.
4. Define component properties and variants explicitly. Figma frames this as one of the strongest signals available: properties "define the full range of what a component can do—its available sizes, states, boolean toggles, and freeform slots" in a structured, machine-readable way, rather than something the agent has to infer from looking at the canvas.
5. Use semantic variables, not raw values. Figma's own contrast again: "blue-500 tells agents nothing about when to apply it; color/brand/primary does." When a library exports to Figma Make, those variables become the CSS the generated code actually references.
6. Write descriptions that state intent, not just appearance. Figma is direct about why: a documentation frame built for a human teammate, full of do/don't callouts arranged visually, "doesn't see your layout in the same way as a person" to the agent, which instead sees "a tree of frames, text, and shapes" it has to interpret. A plain-text description field skips that guesswork entirely.

How Do You Prompt Figma Make to Use Your Real Components?

Through a Make kit, which Figma defines as a bundle a team publishes once and reuses, listing three ingredients on its own page: "npm packages for code context", "Variables and styles from published Figma Design libraries", and "Guidelines to help Figma Make understand how to use your system's assets". Building one is a setup task, not a per-prompt habit, and it pays off on every prototype built after it exists.

The guidelines file inside a Make kit is where the real prompting leverage lives, and Figma's own advice for writing it reads like a template you can copy directly:

• State token quirks first. Figma's example: if a spacing token equals 16 and not 16px, "that distinction matters enormously and it's easy to overlook." Put that kind of detail at the very top of the file.
• Organize by decision, not by file structure. Group tokens the way a person actually thinks while building a screen ("a background color for this card"), not alphabetically the way a CSS file is organized.
• Give typography its own table. Every class, its properties, and a one-line note on when to use it, so Figma Make can "scan the full landscape of options in one place" instead of improvising.
• Rank semantic tokens above raw values explicitly. Tell it plainly that bg-default beats blue/300, since a name like blue/300 carries no instruction about when it's the right choice.
• Write down what not to do. Figma's own examples: "Don't use the brand color as a page background." "Don't hardcode pixel values when a spacing token exists." Constraints are as load-bearing as the token list itself.

Test the kit before publishing it to a team: prompt Figma Make to build something ordinary, then check the result against your real design system rather than assuming the guidelines worked.

What Can't Figma's AI Agent Do Yet?

More than the marketing framing usually admits, and it's worth naming honestly since a prompt asking for one of these just won't land no matter how it's phrased. Per the currently-supported feature table in Figma's own agent documentation, listed as Coming soon: vector editing and draw tools, icon creation, using component slots directly, and adding prototyping interactions or navigation logic. Listed as unsupported outright: exporting assets on your behalf. Diagrams and data visualizations aren't missing so much as they live on a different surface entirely, Figma AI in FigJam, not the main Figma Design agent.

None of that makes the current feature set thin; it's a genuinely long list of what does work, from bulk content generation to image editing to renaming thousands of layers in one pass. It just means a prompt asking the agent to generate a matching icon set, or to add a hover interaction to a prototype, is asking for something the documentation itself marks as not built yet, not something you phrased wrong.

For the same prompt-to-app pattern applied to two other tools, see our guides to v0.dev prompt templates and Lovable prompt templates; for a workflow-automation tool that shares Figma Make's "guidelines file" instinct for grounding an AI in your own context, see our Make.com AI prompt templates.