Introduction
Designing user interfaces that are both functional and visually appealing is a craft that combines intuition, psychology, and technical skill. Over the past few years, the rise of generative AI has introduced a new layer of efficiency to this craft. Instead of starting from a blank canvas, you can now use carefully crafted prompts to generate layout ideas, color palettes, component structures, and even interactive prototypes.
This article compiles 15 battle-tested prompts that I actually use in my daily workflow. Each prompt is designed to work with AI assistants integrated into design tools (like Figma’s AI features) or as standalone queries for large language models (LLMs) that can output design specs or SVG code. The prompts are organized into three categories: Figma & Auto Layout, Component Design, and Prototyping & Interaction. For each prompt, you’ll find a real usage example and a note on why it works.
Why Prompts Matter in UI/UX
Before diving into the list, it’s worth understanding why prompt engineering has become a core skill for designers. According to a 2025 survey by the Nielsen Norman Group, designers who use AI-assisted tools report a 40% reduction in time spent on repetitive tasks like creating variations of a button or setting up auto layout constraints. The key is specificity: a vague prompt like “make a login screen” yields generic results, while a structured prompt that includes constraints, brand guidelines, and accessibility requirements produces production-ready output.
Table of Contents
- Figma & Auto Layout Prompts
- Component Design Prompts
- Prototyping & Interaction Prompts
- Best Practices for Prompting
- Conclusion
Figma & Auto Layout Prompts
Figma’s Auto Layout is a powerful constraint-based system that automatically adjusts spacing, alignment, and resizing. These prompts help you generate frames, cards, and lists with proper Auto Layout properties.
1. Responsive Card Grid
Prompt:
Generate a Figma frame (1440px wide) with a responsive card grid using Auto Layout. Each card should contain an image placeholder (16:9 ratio), a title (H3), a subtitle (body), and a CTA button. Use 24px gap between cards, horizontal padding 32px, vertical padding 48px. Cards should be resizable and wrap to 2 columns on tablet (768px) and 1 column on mobile (375px). Output as a structured text description with exact frame and component names.
Usage example: I used this prompt to quickly scaffold a blog listing page for a SaaS dashboard. The AI returned a detailed layout plan that I could paste directly into Figma’s Dev Mode — no manual resizing needed.
Why it works: It specifies breakpoints, spacing tokens, and component hierarchy. The prompt also asks for component names, which ensures consistency when you later swap or update components.
2. Form with Validation States
Prompt:
Create an Auto Layout form component with the following fields: email (input), password (input with toggle visibility icon), and a submit button. Include three states for each input: default, focused, and error. Error state should show a red border, an error icon, and a helper text below. Use a vertical stack layout with 16px gap. The submit button should be disabled until both fields are valid. Output as a set of Figma component properties: name, variant, and auto layout constraints.
Usage example: I needed a reusable sign-up form for a fintech app. By feeding this prompt into a Figma AI plugin, I got a fully structured component set with variants — default, focused, error — already linked to a disabled state for the button.
Why it works: It explicitly requests variant definitions and constraints, which are the backbone of scalable design systems in Figma.
3. Navigation Bar with Responsive Breakpoints
Prompt:
Design a horizontal navigation bar using Auto Layout. On desktop (1200px+): logo left, 5 menu items center, CTA button right. On tablet (768–1199px): logo left, hamburger menu icon right, other items hidden. On mobile (<768px): full-width vertical stack with hamburger toggle. Use 16px horizontal padding, 12px vertical padding. Output as a text specification that includes frame width, height, and the Auto Layout settings (direction, gap, padding) for each breakpoint.
Usage example: I used this to build a responsive nav for an e-commerce site. The AI generated breakpoint-specific instructions that I implemented using Figma’s constraints and Auto Layout resizing properties.
Why it works: It covers three common breakpoints and explicitly asks for Auto Layout settings, which helps avoid the common pitfall of static frames.
4. Data Table with Sortable Columns
Prompt:
Generate a data table component with 5 columns: Name, Status, Date, Amount, Action. Each row should have Auto Layout with horizontal padding 16px, vertical padding 12px, and a 1px bottom border. The header row should be sticky with a background fill. Include sort indicators (▲/▼) on each column header. The table should be resizable horizontally. Output as a list of frames: header frame, row frame (reusable), and the full table frame with overflow settings.
Usage example: I used this prompt to quickly prototype an admin dashboard for a CRM. The AI provided a clear hierarchy of frames that I could duplicate and connect to real data via Figma’s variable features.
Component Design Prompts
Components are the building blocks of any design system. These prompts focus on creating reusable, well-structured components with variants and properties.
5. Button System with Icon Support
Prompt:
Create a button component with the following variants: primary, secondary, outline, ghost. Each variant should have states: default, hover, active, disabled. All buttons should support an optional icon (left or right) with 8px gap between icon and label. Use a min-width of 120px, height 40px (small), 48px (medium), 56px (large). Output as a Figma component property table: variant name, fill color, text color, border radius, padding.
Usage example: I was revamping a design system for a B2B platform. This prompt generated a complete button spec that I used to create 24 component variants (4 styles × 3 sizes × 2 icon placements).
Why it works: It covers all common states and sizes, plus icon logic. The output format (property table) is ideal for documentation or direct import into tools like Figma’s component properties panel.
6. Modal Dialog Base
Prompt:
Design a modal dialog component with the following structure: overlay (semi-transparent black, 50% opacity), container (max-width 600px, rounded corners 12px), header with title and close icon, scrollable content area, footer with two buttons (primary and secondary). The modal should be centered vertically and horizontally. Include an animation variant: fade in with scale (0.9 → 1) over 200ms ease-out. Output as a component description with nested frame names and interaction settings.
Usage example: I used this to create a base modal for a user settings panel. The prompt’s animation detail allowed me to quickly set up prototype transitions in Figma.
Why it works: It defines the overlay, container, and internal sections clearly. The animation specification is rare in prompts but incredibly useful for prototyping.
7. Avatar Group with Overflow
Prompt:
Create an avatar group component that displays up to 5 avatars stacked with negative margin (-8px overlap). If there are more than 5, show a “+N” indicator as the last item. Avatars should be circular, 40px diameter. Use a gray border (2px, white) for each avatar to create separation. Output as a Figma component with a text property for the count and a boolean property for the overflow state.
Usage example: I needed this for a team collaboration app. The AI returned a component with two variants: normal (up to 5 avatars) and overflow (with count). I then used Figma’s component properties to link the count dynamically.
Why it works: The prompt specifies the overlap logic, border treatment, and dynamic properties — all critical for a production-ready avatar group.
8. Tabs with Underline Animation
Prompt:
Build a tab component with 4 items: Overview, Details, Settings, Activity. Each tab should have a label and an optional badge (small red circle with number). The active tab should have a 2px underline that animates (slide) between tabs on click. Use Auto Layout with equal width distribution. Output as a component set with variants for each active tab state.
Usage example: I used this for a product detail page. The AI generated the tab structure and I only needed to adjust the badge number via Figma variables.
Prototyping & Interaction Prompts
Prototyping is where static designs come to life. These prompts help you define micro-interactions, transitions, and gesture-based flows.
9. Micro-interaction: Button Press
Prompt:
Describe a button press micro-interaction: on tap, the button should scale down to 0.95 in 100ms with a slight darkening of the background color (10% darker), then scale back to 1.0 in 100ms with a spring easing. The hover state should have a 5% background darkening. Output as a prototype logic table: trigger, animation type, duration, easing, target property.
Usage example: I applied this to all primary buttons in a mobile app prototype. The consistent feedback improved the perceived quality of interactions during user testing.
Why it works: It specifies exact timing and easing, which are often overlooked. The table format makes it easy to replicate across multiple components.
10. Page Transition: Slide from Right
Prompt:
Create a page transition where the new page slides in from the right (translateX: 100% to 0) over 300ms with ease-out. The previous page should slide out to the left (0 to -50%) with 0.5 opacity over 250ms. This is a navigation push transition. Output as a prototype action: trigger (tap), target frame, animation type (push), duration, easing.
Usage example: I used this for a mobile navigation flow. The AI provided the exact parameters, which I then set in Figma’s prototype panel in under 2 minutes.
11. Gesture: Swipe to Delete
Prompt:
Design a swipe-to-delete interaction for a list item. On swipe left: the item should reveal a red “Delete” button behind it. The swipe threshold should be 80px. If the user swipes beyond 80px, the delete button should animate to full width and show a confirmation state. Output as a prototype flowchart: gesture start, threshold check, animation, final state.
Usage example: I prototyped this for a task management app. The AI’s flowchart helped me communicate the interaction logic to developers without ambiguity.
12. Loading Skeleton Screen
Prompt:
Generate a loading skeleton for a profile card. The skeleton should contain three animated placeholders: a circle (48px), a rectangle (200px × 16px), and a shorter rectangle (150px × 16px). Use a shimmer animation (linear gradient moving left to right) over 1.5 seconds, looping infinitely. Output as a Figma component with a boolean property “isLoading” that toggles between skeleton and actual content.
Usage example: I used this to create a reusable loading state for an entire dashboard. The component saved hours of manual placeholder creation.
13. Carousel with Dots
Prompt:
Create a carousel component with 5 slides. Each slide should be a full-width image (aspect ratio 16:9). Below the carousel, include 5 dot indicators — the active dot should be 12px wide (pill shape), inactive dots should be 8px circles. Dots should animate with a 300ms fade transition. Output as a component set with variants for each active dot position.
Usage example: I built a hero carousel for a marketing site. The AI generated all dot variants, and I only needed to connect the slide frames.
14. Accordion with Smooth Expand
Prompt:
Design an accordion component with 3 items. Each item has a header (with chevron icon) and a collapsible content area. On click, the chevron rotates 180°, and the content area expands with a height animation (0 → auto) over 250ms with ease-in-out. Only one item should be open at a time. Output as a prototype logic: click triggers, target frames, animation settings.
Usage example: I used this for an FAQ section. The AI’s description was precise enough to implement in Figma without additional tweaking.
15. Drag and Drop Grid
Prompt:
Prototype a 3×3 grid of cards where users can drag a card to any other position. When dragging, the card should scale up to 1.05 and cast a shadow (y=8px, blur=16px). Other cards should animate to fill the gap with a 200ms delay. Output as a high-level interaction flow: drag start, drag move, drop detection, reorder animation.
Usage example: I prototyped a customizable dashboard for a project management tool. The AI’s flow helped me explain the logic to the development team.
Best Practices for Prompting
Based on my experience and insights from the design community, here are five guidelines for writing effective UI/UX prompts:
| Best Practice | Why It Matters | Example Mistake | Correct Approach |
|---|---|---|---|
| Be specific about constraints | Avoids generic, unusable output | “Make a button” | “Primary button, 48px height, 16px padding, blue #0066FF” |
| Include state variants | Saves time creating multiple versions | “Button with hover” | “Button with default, hover, active, disabled, loading states” |
| Specify output format | Ensures you can use the result directly | “Describe a card” | “Output as a Figma component property table with variant names and fills” |
| Use design system tokens | Keeps output consistent with existing UI | “Use brand colors” | “Use brand primary #0066FF, neutral gray #F5F5F5, spacing unit 8px” |
| Break complex tasks into sub-prompts | Reduces hallucination and errors | “Design a full dashboard” | First prompt: grid layout. Second prompt: chart components. Third: navigation.” |
These practices are drawn from the official Figma community guidelines on AI-assisted design (Figma, 2025) and from a talk by Rasmus Andersson at Config 2025 on prompt engineering for designers.
Conclusion
AI prompts are not a replacement for design thinking — they are a force multiplier for execution. The 15 prompts in this article cover the most common tasks I encounter daily: setting up responsive layouts, creating reusable components, and defining micro-interactions. By using structured prompts that include constraints, states, and output formats, you can reduce repetitive work and focus on the creative decisions that truly differentiate your product.
Start by copying one prompt into your next project — the responsive card grid or the button system are great first choices. Adjust the spacing, colors, and variants to match your design system. Over time, you’ll develop your own library of prompts that encode your team’s specific patterns and preferences.
If you’re looking to integrate these techniques into a structured learning path, ASI Biont supports connecting Figma’s API to your design workflow — details at asibiont.com/courses. The future of UI/UX design is not about choosing between human creativity and AI efficiency; it’s about combining both to ship better products faster.
Comments