Prompt Engineering with Figma Make

Write structured AI prompts that generate intentional designs in Figma Make.

Introduction

30 Second Summary

You have probably typed a prompt into an AI tool and gotten back something that looks fine but feels completely generic. The problem is not the AI. It is the prompt.

In this project, you will generate a SaaS pricing page twice in Figma Make: once with a vague one-liner, and once with a structured 5-part prompt framework. The difference will be immediately visible.

What You'll Build

You will open two design files side by side, point at one that looks like every generic template you have ever seen, then point at the other that matches the exact brand colors, layout, and audience you specified.

By the end of this project, you'll have:

A "before" pricing page generated from a vague one-liner, showing how AI fills every gap you leave open with generic defaults.
An "after" pricing page generated from a structured prompt, matching your specified brand colors, font choices, section order, and target audience.
A refined version showing how single-change follow-up prompts polish output without breaking what already works.
Secret Mission: Apply the 5-part framework to a completely different design type and prove the skill transfers beyond pricing pages.

Are there any prerequisites?

None. This project includes full setup for a free Figma account. You do not need any prior design experience or paid subscriptions.

Before We Start

Before we dive in, let's lock in what you're about to build and why it matters. This step is your chance to commit to the goal before any hands-on work begins.

Set Up Figma and Create a Make File

To experiment with prompt quality, you need a workspace where you can type a prompt and immediately see AI-generated design output.

Figma Make is an AI-powered tool built into Figma that generates functional prototypes from natural language prompts. In this step, you will create a free Figma account and open a new Make file so you are ready to start generating.

In this step, get ready to:

Create or sign into a free Figma account.
Create a new Figma Make file from your Drafts.
Confirm the AI chat interface is ready for prompts.

Create your Figma account

Open your browser and go to figma.com.
Click Sign up in the top-right corner.
Choose either Continue with Google or enter your email address and a password, then complete the sign-up process.
If you already have a Figma account, click Log in instead and sign in with your existing credentials.

After signing up, Figma takes you to the file browser where you can see your Drafts folder.

What is the Starter plan?

The free Starter plan includes 500 AI credits per month with a daily limit of 150 credits. That is more than enough for this project, which uses approximately 90-135 credits total.

You do not need to enter any payment information. Figma Make is available to all Starter plan users in their Drafts.

Create a new Make file

In the file browser, click Drafts in the left sidebar to navigate to your Drafts folder.
In the upper-right corner, click + Create and select Make from the dropdown.

A new Make file opens with two primary areas visible: the AI chat on the left (where you type prompts) and the preview panel on the right (where generated output appears).

What are the two panels?

The AI chat is where you describe what you want to build. You type your prompt in the text field and click Send to generate output.

The preview panel shows a live, interactive version of whatever Figma Make generates for you. You will see your designs appear here in real time as the AI works.

Confirm the chat interface is ready

Look at the left panel of your Make file.
Confirm you see a text input field (the prompt box) where you can type instructions for the AI.

You should see a blank text field ready for input. The preview panel on the right is empty because you have not submitted a prompt yet.

Don't see the Make option?

Make sure you are in your Drafts folder, not inside a team folder. Figma Make files can be created in Drafts on any plan.

If you still cannot find it, try refreshing your browser and clicking Drafts again, then look for + Create in the upper-right corner.

help me find the Make file option in Figma

Your workspace is ready. Next up, you will submit your first prompt and see what happens when you give the AI minimal direction.

Write and Run a Weak Prompt

Your Figma Make workspace is open and ready to go. Now it is time to see what happens when you give an AI design tool almost no direction.

AI tools fill in every detail you leave unspecified. If you do not tell it what colors to use, it picks for you. If you do not name your audience, it guesses. In this step, you will submit the vaguest possible prompt and witness the generic output that results.

In this step, get ready to:

Submit a deliberately vague one-line prompt to Figma Make.
Document the assumptions the AI made on your behalf.

Submit a vague prompt

You are going to type the weakest possible prompt on purpose. No colors, no audience, no structure, no style. Just a bare request.

Before you submit it, think for a moment: what do you expect the AI to produce when you give it zero guidance? What colors will it pick? How many pricing tiers will it show?

In the AI chat panel on the left side of your Make file, click into the text input field.
Type the following prompt exactly as written:

Make me a pricing page

Press Enter to submit the prompt. Do not add any other context, style preferences, or structural guidance.
Wait for Figma Make to generate the result. This typically takes 30-60 seconds.

How many credits does this use?

A simple generation like this costs approximately 30 credits. You have 150 credits available per day on the free Starter plan, so you have plenty of room for the rest of this project.

You can check how many credits a prompt consumed by hovering over the AI credits icon below the completed prompt.

Once generation completes, a pricing page appears in the preview panel on the right. Take a look at it.

Not seeing any output?

Make sure you pressed Enter after typing the prompt. If the generation seems stuck for more than two minutes, try refreshing the page and submitting the prompt again.

If you see a message about credits, confirm you have not already used your 150 daily credits on other Figma AI features today.

Still stuck? Help me troubleshoot why my Figma Make prompt is not generating output.

Document what the AI assumed

The generated page is the result of every gap your prompt left open. The AI had to make dozens of decisions because you gave it no guidance. Your job now is to identify those decisions.

Examine the output in the preview panel and write down your observations. Grab a notes app, a piece of paper, or a text file. Answer these four questions:
What colors did the AI pick? Note the background color, heading colors, and button/accent colors.
How many pricing tiers did it create? Are they named? What prices did it invent?
What copy or text did it write? Look at the headline, tier descriptions, and any feature lists.
What layout decisions did it make? Is there a hero section? A comparison table? A FAQ?

Why write this down?

These observations are not busywork. Every assumption you document is a gap in your prompt that the AI filled with a generic default. In the next step, you will close each of those gaps with specific instructions and see the difference firsthand.

Keep this Make file open in its browser tab. You will compare it side by side with the improved version you create next.

Confirm your weak-prompt output

Look at the generated pricing page one more time. You should see a page with arbitrary colors you never chose, generic placeholder copy you never wrote, and a layout structure you never specified.

That is exactly the problem. The AI produced something, but it is not something you would ship. Every unspecified detail became a guess.

You have seen the problem. A vague prompt produces vague, generic output that requires endless rounds of correction. Next up, you will learn a 5-part framework that closes the gaps before you ever hit Enter.

Apply the 5-Part Framework and Run a Strong Prompt

Your weak prompt proved the core problem: when you leave gaps in your instructions, the AI fills them with generic assumptions. Every unspecified detail (colors, layout, audience, copy) became a guess that moved the output further from anything you would actually ship.

The fix is a structured prompt framework with five parts: what you are building, who it is for, the section structure, the visual style, and the expected interactions. In this step, you will plan each part, compose a single focused prompt, and see the dramatic difference specificity makes.

In this step, get ready to:

Plan your prompt using the 5-part framework (what, who, structure, style, interactions).
Compose and submit a structured prompt in a new Make file.
Evaluate the output against your specifications and compare it to the weak version.

Create a new Make file and plan your prompt

Before writing a single word of your prompt, you need a plan. The 5-part framework forces you to make every decision upfront so the AI has nothing left to guess.

Return to the Figma file browser and navigate to your Drafts.
In the upper-right area, click Make to create a new Make file.
You now have two Make files in your Drafts. Keep the first one (your weak prompt) open in another tab for comparison later.

Before typing anything into the AI chat, write out your 5-part framework plan. Open a text editor, notes app, or even a piece of paper and fill in each part:

What: A SaaS pricing page for a project management tool.
Who: Small team leads evaluating tools for their 5-15 person teams.
Structure: Hero headline, three pricing tier cards in a row (Starter/Pro/Team), a feature comparison table below, and a FAQ section at the bottom.
Style: White background, deep navy (#1a2332) for headings, teal (#0d9488) for CTA buttons, and Inter font throughout.
Interactions: Visually prominent CTA buttons with a hover effect appearance. FAQ items styled as expandable accordions.

Why plan before you prompt?

Writing the plan separately forces you to think about each decision before combining them. If you jump straight to writing the prompt, you tend to forget elements or leave them vague.

Notice how every part answers a different type of question the AI would otherwise answer with a guess. The plan is your insurance against generic output.

Compose and submit your structured prompt

Now you will combine your five framework elements into a single focused paragraph. The goal is 80-150 words that cover all five parts without filler.

In the AI chat of your new Make file, type the following prompt:

Build a SaaS pricing page for a project management tool aimed at small team leads evaluating options for their 5-15 person teams. Structure it with a hero headline, three pricing tier cards in a row (Starter at $9/mo, Pro at $19/mo, Team at $39/mo), a feature comparison table below the cards, and a FAQ section at the bottom. Use a clean modern design with a white background, deep navy (#1a2332) for headings, teal (#0d9488) for CTA buttons, and Inter for all text. The CTA buttons should be visually prominent with a slight hover effect appearance, and the FAQ items should look like expandable accordions.

What does each sentence do?

Sentence 1 covers what and who. It names the product type and the specific audience in one line.
Sentence 2 covers structure. It lists every section in exact top-to-bottom order with specific content (tier names and prices).
Sentence 3 covers style. It locks in colors with hex codes, names the font, and sets the background.
Sentence 4 covers interactions. It describes how elements should behave visually.

Before you press enter, think about this: based on your framework plan, what specific differences do you expect to see compared to your weak prompt output?

Press Enter to submit your prompt. The generation typically takes 30-60 seconds.

Monitor your credit usage

After the generation completes, hover over the AI credits icon below the completed prompt to see how many credits it consumed. This generation typically costs approximately 30 credits.

Prompt not generating?

If you see a message about credit limits, you may have hit the daily cap of 150 credits. Your daily credits reset the next day. If the generation seems stuck for more than 2 minutes, refresh the page and try submitting again.

Help me figure out why my Figma Make prompt isn't generating.

Evaluate the output against your specifications

Your structured prompt output should now be visible in the preview panel. Time to check whether the AI followed your instructions or still made assumptions.

Check your colors: Do the headings appear in deep navy? Are the CTA buttons teal?
Check your structure: Is there a hero headline at the top? Are there exactly three pricing tier cards (Starter, Pro, Team) in a row? Is there a feature comparison table below and a FAQ section at the bottom?
Check your audience: Does the copy speak to team leads evaluating tools? Does it mention team sizes or collaboration?
Check your interactions: Do the CTA buttons look visually prominent? Do the FAQ items appear as expandable accordions?

Now open your weak-prompt Make file in another browser tab and place the two outputs side by side. The difference should be stark. Your weak prompt produced a generic page with arbitrary choices. Your strong prompt produced a page that matches a specific brand, audience, and layout you defined.

What if some specifications are off?

Even structured prompts rarely produce a 100% match on the first try. You might notice the AI got the colors right but added an extra section, or used the correct layout but chose a slightly different font weight. That is normal.

The important thing is that the output is dramatically closer to what you intended compared to the weak version. The remaining gaps are what targeted follow-up prompts solve in the next step.

You now have proof that specificity transforms AI output. Your structured prompt eliminated the guesswork and gave you a page that matches your intent. Next, you will polish it further with targeted single-change follow-ups.

Iterate with Single-Change Follow-Ups

Your structured prompt produced a pricing page that matches your five specifications. That first prompt typically gets you about 60% of the way to a polished result.

The remaining quality comes from targeted single-change follow-up prompts. Instead of rewriting everything, you will adjust one element at a time using short prompts of 5-25 words. These produce clean, predictable refinements that compound without degrading what already works.

In this step, get ready to:

Identify one specific element to improve in your strong-prompt output.
Submit a single-change follow-up prompt and observe the targeted refinement.
Compare your three artifacts side by side to see the full progression from vague to structured to refined.

Identify one specific improvement

Multi-change follow-ups produce muddled results because the AI tries to adjust too many things at once. The key to effective iteration is picking ONE thing to change per prompt.

Switch back to your strong-prompt Make file (the one with your structured pricing page).
Look at the generated output in the preview panel and identify one specific thing you want to improve.

Here are three examples of good single-change targets:

Spacing: "Increase the spacing between the pricing cards."
Emphasis: "Make the Pro tier card slightly larger to indicate it is the recommended plan."
Copy: "Change the hero headline to: The project tool your team will actually use."

Pick ONE of these examples, or choose your own single-change target based on what you see in your output.

Why single-change instead of multi-change?

When you ask the AI to change three things at once, it has to balance competing priorities. One change might conflict with another, or the model might interpret your request differently than intended.

Single-change follow-ups give you a clear cause-and-effect loop. If the result is wrong, you know exactly which instruction caused it. If it is right, you can confidently move to the next refinement.

Submit your single-change follow-up

Before you submit, think about what you expect to happen. Will the AI apply your one change cleanly while keeping everything else intact? Or will it re-interpret other parts of the design?

In the AI chat of your strong-prompt Make file, type your single-change follow-up prompt (5-25 words targeting your one specific improvement).
Press Enter to submit the prompt.
Wait for the generation to complete (typically 30-60 seconds). This follow-up consumes approximately 30 additional credits.

Once the preview updates, check the result. Your specific change should be reflected while the rest of the design stays intact. The colors, fonts, section order, and tier pricing you specified in your original prompt should all remain unchanged.

Check your credit usage

You can see how many credits a prompt consumed by hovering over the AI credits icon below the completed prompt. This helps you gauge how much budget remains for additional iterations.

Did the AI change more than you asked for?

If your follow-up altered elements you did not ask it to change, your prompt may have been too broad. Try rephrasing with more specificity. For example, instead of "make it look better," try "increase the padding inside each pricing card to 32px."

If the entire design shifted dramatically, your follow-up may have been interpreted as a rebuild instruction. Keep follow-ups short and focused on a single property or element.

Why did my follow-up change parts of the design I didn't mention?

Compare your three artifacts

You now have three distinct outputs that demonstrate the full value chain of prompt engineering.

Switch to your weak-prompt Make file and look at the generic output one more time. Notice all the assumptions the AI made when you gave it no direction.
Switch back to your strong-prompt Make file. Scroll through the chat history to see both your original structured prompt and the refined follow-up result.
Note the progression across all three: the weak prompt filled gaps with generic defaults, the structured prompt produced intentional output matching your specifications, and the follow-up polished a specific detail without breaking anything.

What does this progression prove?

Structure gets you most of the way to quality output. Targeted follow-ups handle the last mile. This two-phase approach (structured first prompt, then single-change refinements) works across any AI design tool, not just Figma Make.

You now have firsthand proof that prompt quality directly controls output quality. Your three artifacts tell the full story: vague input produces vague output, structured input produces intentional output, and targeted iteration polishes without drift. Next up, you will put this framework to the ultimate test by applying it to a completely different design type.

Secret mission

Transfer the Framework to a New Design Type

You proved the 5-part framework works for pricing pages. But can you apply it cold to a design you have never prompted before? Pick a completely different design type, write a structured prompt from scratch, and prove the skill is portable.

Clean Up Your Resources

This project runs entirely on Figma's free Starter plan, so there are no ongoing costs. Your Make files persist in your Drafts at no charge, and AI credits reset automatically (150/day, 500/month).

Decide whether to keep your Make files for future reference, or delete them for a clean slate.

Resources you used:

Figma Make file (weak prompt output).
Figma Make file (strong prompt, iterated).
Figma Make file (secret mission, if generated).
Figma account (free Starter plan).

Keep everything running

No action needed. Choose this if you want to revisit your Make files and continue iterating when your credits reset.

Your Make files stay in your Drafts indefinitely at no cost.
AI credits reset daily (150/day cap) and monthly (500/month on your billing date).
On the Starter plan, you can share up to three Make files with your team.

Pause - I'll come back to this later

There is nothing to shut down. Your Make files are stored in Drafts and consume no credits while idle.

Close any open Make file tabs in your browser.
Your files remain in Drafts for when you return. No credits are consumed unless you submit a new prompt.

Delete - I don't want to use this again

Remove all project files from your Figma account. This is permanent once you confirm.

In the Figma file browser, navigate to your Drafts in the left sidebar.
Right-click on your weak-prompt Make file and select Move to trash.
Confirm by clicking Move file to trash.
Repeat for your strong-prompt Make file and your secret mission Make file (if it exists).
To permanently delete: click Trash in the left sidebar, right-click each file, and select Permanently delete.
If you also want to delete your Figma account entirely: click your name at the top-left of the file browser, select Settings, scroll to the bottom of the Account tab, and click Delete account. This is permanent and cannot be reversed.

Nice Work!

You have just built a reusable prompt engineering skill that works across any AI design tool. You started with a vague one-liner, saw it fail, and ended with a structured framework that consistently produces intentional, specification-matching output.

You've learned how to:

Diagnose why vague prompts produce generic AI output by observing how the AI fills every unspecified detail with default assumptions.
Apply the 5-part prompt framework (what, who, structure, style, interactions) to produce AI-generated designs that match your exact brand, audience, and layout specifications.
Iterate with single-change follow-up prompts to refine output without degrading what already works.
Transferred the framework to a completely different design type (Secret Mission), proving the skill is portable across any AI design context.

Ready to quiz yourself?