How to Prompt AI for Figma UI Design (With Real Before-and-After Examples)
A practical guide to writing prompts that generate usable Figma layouts — based on which prompts actually worked across 24,362 real generated designs.
Most advice about prompting AI for design is written from intuition. This guide is written from 24,362 real generated designs and the prompts that produced them — including the ones that failed.
1. Name your screens, always
The single biggest predictor of a useful result. "Design a food delivery app" returns one screen. "Design a food delivery app — home, restaurant detail, cart, order tracking" returns a flow you can build against. Only 2.1% of real prompts did this, and they produced disproportionately better output.
2. Use concrete nouns instead of adjectives
Adjectives ("modern", "clean", "beautiful", "professional") give the model no structure — every model already believes it is producing modern, clean design. Nouns create components:
| Weak | Strong |
|---|---|
| A modern analytics dashboard | An analytics dashboard with 4 KPI cards, a revenue line chart, a traffic-source donut and a recent-orders table |
| A nice e-commerce page | A product listing page with left filter sidebar (price, brand, rating), sort dropdown and a 3-column product grid with badges |
| A clean login screen | A centred login card with email, password, remember-me checkbox, primary CTA and Google/Apple SSO buttons |
3. State the platform and frame size early
"iOS app", "desktop web", "responsive web, desktop and mobile" — this fixes frame dimensions and component conventions before anything is drawn. 5.8% of real prompts asked for responsive output explicitly, and those got both breakpoints instead of an ambiguous middle-sized frame.
4. Specify theme explicitly if you care
4.2% of prompts asked for dark mode. If you do not say, you get light. Say "dark theme, deep navy background, high-contrast text" rather than just "dark".
5. Treat the first output as a draft and iterate
The users who got the most value sent follow-up prompts — "make the header sticky", "swap the sidebar to icons only", "add an empty state". Only 6.3% of prompts were edits, which means most people abandon after one shot. That is leaving most of the value unused.
6. Give it your design system rather than a description of one
If your Figma file already has colour styles, text styles and components, point the AI at them. Generating into an existing system beats generating something pretty that you then have to restyle by hand — restyling is usually more work than drawing it yourself was.
Copy-paste starting points
Dashboard:
Desktop web analytics dashboard for a logistics company. Left sidebar nav
(Overview, Shipments, Fleet, Reports, Settings). Top bar with search and
avatar. 4 KPI cards, a shipments-over-time line chart, a delivery-status
donut, and a table of recent shipments with status pills. Light theme,
blue accent.
Mobile flow:
iOS fitness app, 3 screens: home with weekly activity rings, workout
detail with exercise list and timer, and profile with stats and
achievements. Dark theme, lime accent, large rounded cards.
Landing page:
Responsive SaaS landing page for an invoicing tool aimed at freelancers.
Hero with headline, subhead, email capture and product screenshot; logo
strip; 3-column feature section with icons; pricing with 3 tiers;
FAQ accordion; footer. Clean light theme, indigo accent.Every design linked in this post was generated from a real user prompt inside Figma. Browse more in the showcase.