Figma AI only works as well as the instructions you give it. Vague prompts produce generic layouts you rebuild from scratch. Specific prompts — with screen type, sections, components, frame size, and spacing — routinely produce 70–85% production-ready output in one pass. These 15 templates are structured for Figma's 2026 AI stack: the Design Agent, Figma Make, Skills, and the free features (auto layout, rename layers, replace content) that cost zero credits.

Copy any template, swap the bracketed placeholders for your product, and run it through the free Prompt Optimizer if you want tighter constraints. For one-click optimization inside ChatGPT, Claude, and Gemini while you draft agent instructions, TresPrompt adds ICCSSE-style structure to your sidebar.

Key Takeaway

Every strong Figma AI prompt names four things: what screen you're building, which published components to use, the frame size, and spacing rules. Add negative constraints ("don't use unnamed frames," "no lorem ipsum") and the agent stops guessing. Skills encode these patterns so you don't retype them every session.

Design Agent Templates (Screens on Canvas)

1 Mobile settings page
Create a mobile settings page (390×844) with: 1. Account — avatar, name, email, edit buttons 2. Notifications — toggles for email, push, SMS 3. Appearance — dark mode toggle, font size selector 4. Security — change password, 2FA toggle 5. Footer — destructive log out button, app version text Use published components only. Auto layout: 16px item spacing, 32px between sections. Section Header component for group labels.
2 Dashboard overview (desktop)
Create a desktop analytics dashboard (1440×900) with: - Top nav: logo, search, user menu - Left sidebar: 5 nav items, active state on "Overview" - Main: 4 KPI cards in a row, line chart below, recent activity table (5 rows) Use design system variables for color and spacing. Card component for KPIs. Table component for activity. Do not use placeholder chart data labels like "Series 1."
3 Onboarding flow (3 frames)
Create 3 mobile onboarding screens (390×844), left to right: 1. Welcome — headline, subcopy, primary CTA "Get started" 2. Permissions — list notifications + location with toggles 3. Success — checkmark illustration area, "You're all set" CTA Use Primary Button and Secondary Button components. Progress indicator showing step 1/3, 2/3, 3/3. Consistent 24px horizontal padding on all frames.
4 Empty state + error state
Create two mobile frames (390×844): Frame A — Empty search results: icon area, headline "No results", body copy, secondary "Clear filters" button Frame B — Error: warning icon, "Something went wrong", primary "Try again", tertiary "Contact support" Use published Empty State and Alert components if available. Center-aligned content, max width 280px for text block.
5 Accessible settings (agent + a11y)
Create a mobile settings page (390×844) with accessibility requirements: - Interactive elements minimum 44×44px touch targets - Text contrast minimum 4.5:1 (use design system text colors) - Heading hierarchy H1 → H2, no skipped levels - Toggles include visible text labels (not icon-only) - Error states use color AND text (not color alone) Use published components. Auto layout 16px / 32px spacing.

📬 Getting value from this?

One actionable AI insight per week. Plus a free prompt pack when you subscribe.

Subscribe free →

Figma Make Templates (Prototype / Code)

6 Marketing landing (Make)
Build a single-page marketing site from this Figma frame: - Hero: headline, subhead, email capture + CTA - 3 feature columns with icons - Social proof logos row - Footer with links Match spacing and colors from the selected frame. Mobile-responsive. No external libraries unless specified in frame notes.
7 Interactive prototype (Make)
Create a clickable prototype from frames [list frame names]: - Clicking "Sign up" navigates to registration form frame - Submit shows success toast state - "Back" returns to previous screen Use components from the file. Preserve hover states on primary buttons. Do not add new screens not in the design file.

Skills Templates (Reusable Agent Instructions)

Save these as Skills markdown files so the agent follows team conventions every time.

8 Skill: /settings-page
When creating settings screens: - Always use Section Header + grouped list pattern - Include footer with app version (caption style) and destructive log out - Mobile default 390×844 unless user specifies desktop - Use Toggle component for boolean settings, never custom checkboxes - Spacing: 16px within groups, 32px between groups, 24px screen padding
9 Skill: /data-table
When creating tables: - Use Table/Header and Table/Row components - Include sort icon column only if user asks - Row height 48px minimum for touch - Truncate long text with ellipsis, never wrap more than 2 lines in cells - Empty state below table if zero rows

Free Features (Zero Credits)

10 Replace Content (batch)
Replace all lorem ipsum in the selected frame with realistic [B2B SaaS / e-commerce / healthcare] copy. Names: diverse, plausible. Addresses: US format. Product names: fictional but professional. Keep character counts similar to placeholders so layout does not break.
11 Rename layers (handoff prep)
Rename all layers in this page using pattern: [Section]/[Component]/[State] Example: Settings/NotificationRow/Default Do not rename locked background frames. Skip hidden layers.

MCP + Code Handoff Prompts (Claude Code / Cursor)

12 React from Figma frame
Read the selected Figma frame via MCP. Generate a React component using [Tailwind / our Shadcn library]: - Match spacing and colors from design tokens in the file - Use semantic HTML (nav, main, section) - Include responsive breakpoints at 768px and 1024px - Export as SettingsPage.tsx with typed props for user data Do not hardcode hex values — use token names from Figma variables.

Exploration & Comparison Templates

13 Three layout directions
Generate 3 different layout approaches for [screen type] on desktop 1440×900: A — sidebar navigation B — top tab navigation C — card-based hub Same content in all three. Use published components. Place frames side by side with 80px gap. Label each frame "Direction A/B/C" in small caption text.
14 Design system audit prompt
Review the selected page and list: - Components not from the published library (flag as "detached") - Colors not using variables - Text not using text styles - Auto layout gaps that are not 4/8/16/24/32 Output as a checklist in frame notes. Do not auto-fix — report only.
15 Refine pass (second prompt)
On the generated frame, apply these fixes only: 1. Increase vertical spacing between sections to 32px 2. Swap primary button to Button/Primary/Large variant 3. Add helper text under email field: "We'll never share your email" 4. Align all icons to 24×24 in list rows Do not restructure the layout. Do not add new sections.

How to Chain Templates

Production workflow: Template 13 (explore) → pick direction → Template 1 or 2 (full screen) → Template 15 (refine) → Template 11 (rename) → Template 12 (MCP to code). Each step uses a focused prompt instead of one giant instruction that confuses the agent.

For the full Figma AI ecosystem (Agent, Make, MCP, Skills, Sites), see our complete 2026 guide. For step-by-step agent setup, see how to use the Design Agent. For credit budgeting, see Figma AI credits explained.

Frequently Asked Questions

Do these work on the free Figma plan?

Templates 10–11 (Replace Content, rename) work on free plans. Design Agent and Make require paid plans and beta access. MCP works with any plan that can enable Dev Mode / MCP for your seat.

Should I paste the whole template or shorten it?

Start with the full template. Once you see which lines the agent ignores, shorten. Shorter prompts work only after you know which constraints your design system actually needs.

Can I use the same prompt for Make and the Design Agent?

No — Make expects build/prototype language and consumes credits differently. Use Design Agent templates for canvas layers and Make templates for interactive output. Mixing them produces confused results.

How do I save prompts as Skills?

Copy templates 8–9 into Skill markdown files in your team's Skills library. Invoke with /skill-name in the agent panel. Update Skills when your component names change — see our Skills guide.

Disclosure: Some links in this article are affiliate links. We only recommend tools we've personally tested and use regularly. See our full disclosure policy.