How to Prompt Figma Make - James Builds AI

How to Prompt Figma Make (Build a Landing Page Fast)

TL;DR

Use a detailed, reusable prompt to generate a high-fidelity landing page UI in Figma Make.
Refine the UI with quick follow-up prompts (example: tighten the lead form layout).
Next step (in the following video): pass the finished UI into Bolt.new to generate the site code.

What we’re building

A high-fidelity, desktop-first (but responsive) lead-gen landing page for a local service business (in this example, we'll use a local plumber). You’ll generate the first UI draft in Figma Make, then polish the layout with a small prompt adjustment.

Stack / tools

Figma Make (UI generation)
Bolt.new (code generation, covered next)

Pre-requisites (keys/accounts)

A Figma account with access to Figma Make (free account totally fine)
A Bolt.new account (free account totally fine, we'll see this more in the next step/video)

Step 1: Start with a strong base prompt

Create (or copy) a structured prompt that tells Figma Make exactly what to generate. The prompt should include:

Output type: high-fidelity landing page
Layout intent: desktop-first, responsive
Goal: high-authority lead-generation page
Design constraints: do’s/don’ts, color palette, typography, layout rules
Page structure: a specific list of sections in a fixed order (this example uses 9 sections)
Responsive behavior notes
Placeholder rules: what to do if logos/images aren’t available
Clear completion criteria: deliver a complete landing page

Step 2: Paste the prompt into Figma Make and generate the UI

Copy the full prompt (use the "raw" version from github if needed)
Paste it into Figma Make and generate the design.
Review the initial output at full width (some elements may look cramped depending on the view).

Step 3: Refine the UI with targeted follow-up prompts

Identify what feels “off” and fix it with a specific instruction. Example from the video: the hero lead form is too tall, so update the layout by prompting:

Put Name + Phone on the same line
Put Zip Code + Issue Type on the same line

Re-run the prompt and review the updated design.

Step 4: Do a quick "production readiness" pass

Call out elements you’ll swap in during implementation:

Replace placeholder trust badges with real assets (e.g., BBB, HomeAdvisor, Angi)
Keep/lean into credibility elements like “verified reviews”
Consider adding a Google Map embed/listing (the example correctly included Orange County cities)

Step 5: Hand off to Bolt.new (next video)

Once the UI looks good enough, the next step is to take the finished Figma UI and pass it into Bolt.new to generate the actual website code.

Prompts

Figma Make Starter Prompt

Design a high-fidelity landing page for “OC Emergency Plumbing” (desktop-first, but responsive).

GOAL
High-authority “rank & rent” lead-gen page optimized for calls + quote submissions. Should feel established, urgent, and trustworthy.

DESIGN STYLE (DO / DON’T)
- Aesthetic: Industrial Corporate (heavy, boxy, trade-service authority)
- Avoid “tech startup” styling: no big rounding, no pastels, no playful gradients
- Border radius: 0–4px max everywhere
- Shadows: hard shadows (not soft “material”)
- Icons: simple solid/mono icons (no duotone, no 3D)

COLOR PALETTE (use these exact hex values)
- Navy: #0F172A (primary dark backgrounds/hero overlay)
- White: #FFFFFF (primary light sections)
- Slate divider: #F1F5F9 (section dividers/background bands)
- Alert Red: #DC2626 (primary buttons + key accents)
- Warning Yellow: #FACC15 (stars/trust highlights only, sparingly)

TYPOGRAPHY
- Headings: condensed, heavy, uppercase (Oswald/Impact style). Tight tracking.
- Body: clean legible sans (Inter/Roboto). 16–18px.
- Buttons: uppercase, bold.

LAYOUT RULES
- Max width container: 1200px
- Grid: 12-col with consistent gutters
- Section padding: 64–96px desktop
- Card borders: 1px #E2E8F0 (or similar neutral)
- Avoid excessive whitespace; make it feel “dense but readable”

PAGE SECTIONS (in this exact order)

1) TOP UTILITY BAR (slim, light gray)
- Left: “Emergency Dispatch Active”
- Right: “License #987654 • Bonded & Insured”

2) NAVBAR (white)
- Left: bold logo (text logo ok)
- Middle: links (Services, Reviews, Service Area, Pricing, Contact)
- Right: large red button “CALL 24/7” + phone number (clickable)

3) HERO (dark moody industrial pipes image w/ navy overlay)
- Layout split 55/45
- Left:
  - H1: “EMERGENCY PLUMBING”
  - Subhead: “Fast arrival • Upfront pricing • OC local dispatch”
  - Trust bullets (3): “4.9★ 180+ reviews”, “Same-day available”, “Guaranteed work”
  - Secondary CTA: “See Services”
- Right: Floating “Get a Fast Quote” card (white, hard shadow, boxy)
  - Fields: Name, Phone, Zip, Issue dropdown, Optional notes
  - CTA button: “GET HELP NOW”
  - Microcopy: “We call back in ~5 minutes”
  - Success state: “Request received — dispatch will call you shortly.”

4) TRUST STRIP (slate band)
- 5 grayscale logos placeholders: BBB, HomeAdvisor, Angi, Yelp, Google
- Small text: “Trusted by homeowners across Orange County”

5) SERVICES GRID (white)
- 6 services, 3 columns desktop, boxy cards w/ 1px border, red icons
- Each card: service name + 1-line benefit + “Get Quote” text link

6) MID-PAGE CTA BAND (navy)
- Headline: “Don’t let a leak become a flood.”
- Subhead: “Call now or request a callback in minutes.”
- Buttons: ghost “See Pricing” + red “CALL 24/7”

7) TESTIMONIALS (white)
- 3 testimonial cards in a row
- Yellow stars + “Verified Customer” badge
- Include city (e.g., Irvine, Anaheim, Costa Mesa)

8) SERVICE AREA (slate band)
- Multi-column list of 12–20 OC cities + “and nearby”
- Small map placeholder block (optional)

9) FOOTER (near-black)
- 4 columns: Company, Services, Service Area, Support
- Include phone number again + “24/7 Emergency Dispatch”

RESPONSIVE BEHAVIOR (important)
- On mobile: stack hero (form below headline), sticky bottom bar (Call / Quote)
- Keep CTAs always visible; keep typography large; no tiny tap targets

ASSET FALLBACKS
- If logos/images aren’t available, use tasteful placeholders (no broken images).

Deliver a complete landing page design with realistic copy and clear visual hierarchy.