Build a Coffee Shop Landing Page

Use Figma Make to generate and refine a coffee shop landing page.

Introduction

30 Second Summary

You have probably generated a design with AI before, only to scrap the whole thing and start over because one button was the wrong color. Every re-generation costs time and credits.

In this project, you will generate a full coffee shop landing page in a single prompt, then learn how to surgically fix individual elements without touching the rest of your design.

What You'll Build

Imagine showing someone a polished landing page for "Brew and Bean" coffee shop, then clicking one element at a time to tweak its color or spacing while everything else stays perfectly intact.

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

A multi-section landing page generated from one well-crafted prompt, complete with a hero section, menu highlight cards, and a footer.
Two or more targeted edits to specific elements using Point and Edit, changing colors, spacing, or text without re-prompting the entire design.
A clear sense of when Plan Mode saves credits on complex builds versus when Build mode is the faster path.
Secret Mission: Chain three or more Point and Edit refinements and use a natural-language prompt directed at a single selected element for changes the toolbar cannot handle.

Are there any prerequisites?

You need a free Figma account (Starter plan works) and basic familiarity with Figma Make. You should have generated at least one prototype from a prompt before starting this project.

Before We Start

Before diving in, let's lock in what you're about to build and why the approach matters. Understanding when to edit surgically versus re-prompting from scratch is the difference between burning through your AI credits and working efficiently.

Open Figma Make and Orient to the Interface

Before you can use advanced features like Plan Mode or Point and Edit, you need a Make file open and an understanding of where things live in the interface.

In this step, you will create a new Figma Make file and get familiar with the two main areas you will use for the rest of this project.

In this step, get ready to:

Create a new Make file in your Figma Drafts.
Identify the AI chat panel and preview area.
Locate the mode dropdown showing Build and Plan options.

Create a new Make file

Everything in Figma Make starts with a Make file. This is your workspace where you prompt, generate, and refine prototypes.

Open your browser and go to figma.com.
Sign in with your existing Figma account.
In the file browser, navigate to your Drafts.
In the upper-right corner, click Make to create a new Make file.

The Figma Make environment opens with a blank workspace ready for your first prompt.

Don't see the Make button?

Make sure you are in the file browser (not inside an existing design file). The Make button appears in the upper-right corner alongside the other file-creation options.

Figma Make is available for trial on Starter plans. If you still cannot see it, confirm you are signed in and refresh the page.

Why can't I find the Make button in Figma?

Identify the AI chat and preview areas

The Make environment is split into two primary areas. Knowing which is which will help you follow every instruction in this project.

Look at the left side of your screen. This is the AI chat panel where you type prompts and interact with the model.
Look at the right side. This is the preview area where your generated prototype will appear.
At the bottom of the AI chat panel, locate the prompt box. This is where you will type all of your prompts and access tools like Point and Edit.

What are these two areas for?

The AI chat is where you prompt the model and see its responses. The preview is where you see a working version of your app and interact with it.

You will spend most of your time typing in the prompt box and then checking the preview to see what Make produced.

Locate the mode dropdown

Figma Make offers two modes that control how it processes your prompts. You need to know where to switch between them.

In the prompt box, find the mode dropdown.
Click it to see the available modes: Build and Plan.
Notice that Plan is marked as paid plans only. You will watch the facilitator demonstrate Plan Mode in the next step, then use Build mode for your own generation.

Why are there two modes?

Build mode generates your prototype directly from a prompt. Plan Mode creates a structured, reviewable plan before any code is written.

Plan Mode consumes more AI credits than Build mode. It is most useful for complex, multi-section builds where reviewing the plan up front saves you from costly re-generations later.

Confirm you can see a clean Make workspace with the AI chat on the left and a blank preview area on the right. The mode dropdown should be set to Build by default.

Your workspace is set up and you know where everything lives. Next up, you will watch the facilitator use Plan Mode to generate a structured plan before any code is written.

Watch Plan Mode Generate and Refine a Structured Plan

Your Make file is open and you know where the key interface elements live. Now it is time to see the most powerful feature in action.

Plan Mode creates a reviewable, editable plan before any prototype code is generated. This saves you from costly re-generations when something is off. Even if you cannot use it on a free plan today, understanding the workflow prepares you for when you do have access.

In this step, get ready to:

Watch the facilitator activate Plan Mode and enter a multi-section prompt.
Observe a structured plan.md file generate automatically.
See the facilitator edit the plan and then build the prototype from it.

Watch the facilitator activate Plan Mode

Plan Mode is a paid-plan feature that structures your build before any code is written. Your facilitator will demonstrate the full workflow so you can see how it works.

Watch the facilitator click the mode dropdown in the prompt box and select Plan.
Notice the alternative activation method: typing /plan in the chat also switches to Plan Mode.
Watch as the facilitator types a detailed prompt describing a multi-section coffee shop landing page.

The facilitator's prompt looks like this:

What prompt does the facilitator use?

"Build a landing page for a coffee shop called Brew and Bean. Include a hero section with a tagline and call-to-action button, a menu highlights section showing 3 featured drinks in a card grid, an about section with a short story paragraph, and a footer with hours and address."

Notice how the prompt names every section and describes its contents upfront. This level of detail gives Plan Mode the structure it needs to produce a thorough plan.

What is Plan Mode?

Plan Mode analyzes your prompt and produces a written plan of what it intends to build. You review, edit, and approve the plan before any prototype code is generated.

This matters because re-generating an entire prototype costs credits and loses elements you liked. Planning first means fewer wasted generations.

Observe the plan generation

After the facilitator presses Enter, Figma Make begins generating a structured plan in real time.

Watch for a plan.md file to open automatically in the code editor.
Read through the plan as it appears. It breaks the build into clear sections and describes what will be generated for each one.
Notice that no prototype has been generated yet. The preview area remains empty.

This is the key insight: you can read exactly what Make intends to build before any code is written or credits are spent on generation.

Why review before building?

Plan Mode consumes more AI credits than Build mode. The trade-off is worth it for complex, multi-section projects because catching a structural mistake in a text plan costs nothing. Catching it after a full generation costs another round of credits.

Watch the facilitator refine and approve

The plan is a starting point. The facilitator now edits it before approving the build.

Watch the facilitator edit plan.md directly in the code editor. For example, they add "use warm earth tones and a cream background" to the style notes.
Notice how they can also remove sections they do not want, reorder elements, or add more detail to any part of the plan.
Watch the facilitator click Build in the chat once they are satisfied with the plan.
Observe the prototype generating in the preview area. Make executes the approved plan and builds the page section by section.

The facilitator's preview now shows a complete landing page built from the edited plan. Every section matches what they approved.

When should I use Plan Mode vs Build mode?

Use Plan Mode for complex, multi-section builds where getting the structure right matters. It works best on the first turn of a conversation before any code has been generated.

Use Build mode for simpler generations, quick iterations, or when you are on a free plan. In the next step, you will use Build mode with a detailed prompt to get a strong result in a single generation.

Plan Mode model support

Plan Mode is only available when using the default model or Claude Opus 4.7. It is not available on Gemini models.

You have now seen the full Plan Mode workflow: prompt, review the plan, edit it, and build from the approved version. Next up, you will generate your own landing page using Build mode with a detailed, front-loaded prompt.

Generate Your Landing Page in Build Mode

You've seen how Plan Mode produces a structured blueprint before generation. Now it's your turn to build something real.

On a free plan, Build mode is your primary generation tool. The key to saving credits is front-loading as much detail as possible into a single prompt so Figma Make gets as close as possible on the first try.

In this step, get ready to:

Generate a multi-section coffee shop landing page from a single detailed prompt.
Review the generated page and identify at least two elements that need refinement.

Craft and send your Build mode prompt

A detailed prompt that specifies layout structure, visual style, and exact content gives the AI everything it needs in one shot. Vague prompts lead to generic results and wasted credits on re-generation.

Confirm the mode dropdown at the bottom of your chat panel shows Build.
Click into the prompt box at the bottom of the AI chat panel.
Type (or paste) the following prompt:

Build a landing page for a coffee shop called Brew and Bean. Hero section: large headline 'Your Morning Ritual, Perfected' with a warm-toned background and a 'View Our Menu' button. Menu highlights: 3 cards in a row showing featured drinks (Oat Milk Latte, Cold Brew, Matcha Latte) with short descriptions and prices. Footer: opening hours (7am-5pm weekdays, 8am-4pm weekends) and address (42 Roast Lane).

Why structure your prompt this way?

This prompt names every section, specifies exact text content, and describes the visual tone. The more specific you are up front, the less fixing you do later.

Notice how each section has a clear label (Hero, Menu highlights, Footer) followed by its contents. This gives the AI a mental map of the page structure before it starts generating.

Press Enter or click Send to submit your prompt.

Watch the preview panel on the right. Make builds your page in real time, typically completing within 10 to 30 seconds depending on complexity.

When generation finishes, a summary appears in the chat and your landing page becomes interactive in the preview.

Preview not updating?

If nothing appears after 30 seconds, check your internet connection and try refreshing the page. Your prompt is saved in the chat history so you will not lose it.

If the mode dropdown shows something other than Build, switch it back to Build and resend your prompt.

Why isn't my Make file generating a preview?

Review your page and spot what needs fixing

Before you look closely, ask yourself: do you think Make generated everything exactly as you described, with no issues at all?

Scroll through the full preview from top to bottom.
Click on elements to interact with them (buttons, cards, links).
Identify at least two things that are not quite right.

You will almost certainly find imperfections. AI-generated designs rarely nail every detail on the first pass. This is expected.

What kind of issues should I look for?

A button color that clashes with the warm-toned palette you requested.
Spacing between the menu cards that feels too tight or too loose.
Text that is the wrong size or weight (a headline that looks like body text, or vice versa).
Placeholder content that does not match what you specified in your prompt.

Write down (mentally or on paper) the two or more elements you want to change.
Do not type a new prompt to fix them yet.

Why not just re-prompt?

Your instinct might be to describe the fix in a new message. That re-processes the entire design and costs more credits. In the next step, you will use Point and Edit to click the exact element and change only that element. Everything else stays untouched.

You should now see a multi-section landing page in your preview with a hero section, menu cards, and a footer. The imperfections you spotted are the perfect setup for targeted editing.

Your landing page is generated, and you know exactly what needs fixing. Next up, you will learn how to surgically edit individual elements without touching the rest of your design.

Fix What Is Off with Point and Edit

Your Brew and Bean landing page is live in the preview, and you've spotted what needs fixing. Now it's time to make those changes without regenerating the entire design.

Typing a new prompt to describe each fix re-processes the entire page and costs extra credits. Point and Edit lets you click individual elements and change only their properties, leaving everything else untouched.

In this step, get ready to:

Activate Point and Edit mode in your Make file.
Change one property on the hero section CTA button.
Make a second targeted edit on a menu highlight card.

Activate Point and Edit

Point and Edit has two different access points depending on whether your Make file uses the newer or older interface. Both accomplish the same goal.

Look at the bottom of the prompt box in the AI chat panel. If you see a Point and edit button, click it.
If you don't see that button, look in the upper-right corner of Figma Make for an Edit button instead. Click it.

Either button activates targeted editing mode. Your preview area is now ready for you to click individual elements.

Why are there two interfaces?

The Edit tool, properties panel, and annotations are only available in new Make files. Existing Make files continue to use the previous interface, including the Point and edit tool.

Both let you select elements and change properties like colors, padding, margins, and text styling. The workflow is the same regardless of which button you clicked.

Can't find either button?

Make sure you have a generated prototype visible in the preview area. Point and Edit only appears after a design has been generated.

If your preview is empty or still loading, wait for generation to finish. The editing buttons appear once the prototype is ready.

Help me find the Point and Edit button in my Make file

Edit the hero section CTA button

Your first fix targets the call-to-action button in the hero section. Clicking it reveals only the properties that apply to that specific element.

In the preview, click the View Our Menu button in the hero section.
A toolbar (older interface) or properties panel (newer interface) appears showing editable properties for the button.
Change one property. For example, adjust the background color to a warmer tone, or increase the padding to make the button feel more substantial.

The change applies immediately to just that button. Scroll through the rest of your page to confirm nothing else moved or changed.

What can I change with Point and Edit?

The available properties depend on the type of element and how it was generated. Common options include colors, padding, margins, and text styling.

Each edit is surgical. You are changing one property on one element, not re-prompting the AI to rebuild your design. This is what makes Point and Edit credit-efficient.

Element not responding to clicks?

Confirm you activated Point and Edit mode first. Clicking elements in the normal preview mode just interacts with the prototype rather than selecting elements for editing.

Try clicking directly on the text or colored area of the button rather than its border. Some elements have smaller click targets than they appear.

Help me select an element in Point and Edit mode

Make a second targeted edit on a menu card

One fix down. Now repeat the same process on a different type of element to see how Point and Edit adapts to whatever you select.

Click one of the menu highlight cards in the three-card grid (for example, the Oat Milk Latte card).
In the toolbar or properties panel, adjust a property. Good options: increase the border radius for rounder corners, adjust the text color for better contrast, or tweak the spacing between the card's elements.
If you are using the newer Edit interface, click Apply in the chat when you are satisfied with your changes.

Before you scroll away, take a moment. Do you think any element outside the card you just edited has changed?

Scroll through the full page. The hero section, footer, and the other two menu cards all remain exactly as they were. Only the card you clicked received the edit.

Why does this matter for credits?

Every time you type a prompt in Build mode, the AI regenerates code for the entire page. That uses credits and risks changing parts you already liked.

Point and Edit bypasses the AI generation loop entirely for property-level changes. You get the fix you want at zero additional credit cost.

Change didn't stick after clicking Apply?

If using the newer Edit interface, changes only commit after you click Apply in the chat. Make sure you clicked Apply before moving on.

If the property reverted, try selecting the element again and re-applying the change. Occasionally clicking away from an element before confirming can discard the edit.

Help me apply Point and Edit changes in Figma Make

Two targeted fixes, zero credits spent on regeneration, and the rest of your design completely intact. That is the power of Point and Edit for post-generation refinement.

Ready for a challenge? In the Secret Mission, you'll chain three or more edits in sequence and unlock an advanced capability: prompting directly to a selected element for changes the toolbar cannot handle.

Secret mission

Chain Edits and Prompt a Selected Element

Real design refinement rarely stops at one or two fixes. Can you chain three or more Point and Edit changes in sequence and then use a natural-language prompt directed at a specific selected element for a change the toolbar cannot handle?

Clean Up Your Resources

This project runs entirely within Figma's free tier, so there are no ongoing costs or running processes to shut down. Your Make file is saved automatically in your Figma Drafts.

Resources you used:

Figma Make file (Brew and Bean landing page) stored in your Drafts.

Keep everything running

No action needed. Choose this if you want to keep experimenting with Point and Edit or share the preview URL with others.

Your Make file stays in your Figma Drafts indefinitely at no cost.
You can return anytime to make additional Point and Edit refinements or try new prompts.

Pause - I'll come back to this later

There are no running processes or services to pause. Your Make file is already saved in Drafts and free-tier Figma accounts do not incur charges for stored files.

Your file will be exactly where you left it when you return.
No further action is needed.

Delete - I don't want to use this again

Remove the Make file from your Figma Drafts entirely.

In the Figma file browser, navigate to your Drafts.
Find the Brew and Bean Make file.
Right-click the file and select Delete.
The file moves to your Figma trash, where it can be restored for 30 days before permanent deletion.

Nice Work!

You just built a polished coffee shop landing page using Figma Make and refined it with surgical precision. No full re-prompts, no wasted credits, and no starting over from scratch.

You've learned how to:

Watched Plan Mode generate a structured, editable plan.md before any code was written, and seen how reviewing and refining the plan produces better first-generation results.
Generated a multi-section coffee shop landing page from a single well-crafted prompt in Build mode, proving that a detailed first prompt is the most credit-efficient way to get a strong starting point.
Used Point and Edit to make precise, targeted changes to specific elements without re-prompting the entire design, preserving the parts that already worked.
Secret Mission: Chained three or more edits and used natural-language prompts directed at individual selected elements for changes beyond toolbar capabilities.

Ready to quiz yourself?