12 Prompts for UI/UX Design: Figma, Prototypes, Components

Why Prompts Matter in UI/UX Design

As a designer, you spend hours tweaking layers, renaming frames, and connecting prototypes. But what if you could automate repetitive tasks or generate design ideas with just a few keystrokes? That's where structured prompts come in. By feeding clear instructions to AI assistants or even to your own workflows, you can speed up component creation, enforce consistency, and explore layout variations faster. This article presents 12 ready-to-use prompts organized into three categories: Figma fundamentals, prototype logic, and component systems. Each prompt includes a task, the exact prompt text, and a realistic output example.

Figma & Auto Layout Prompts

1. Generate a Responsive Card Component

Task: Create a reusable card with auto layout that adapts to different screen sizes.
Prompt: "Generate a Figma auto layout card component with an image placeholder (16:9), a title text layer (bold, 18px), a description (regular, 14px, max 2 lines), and a 'Learn More' button. Use auto layout horizontal for the button row, vertical for the entire card. Set padding: 16px, gap: 12px. Output the JSON structure including properties for resizing and constraints."
Example Result:

{
  "name": "Card / Default",
  "type": "COMPONENT",
  "autoLayout": {
    "direction": "VERTICAL",
    "padding": { "top": 16, "right": 16, "bottom": 16, "left": 16 },
    "gap": 12
  },
  "children": [
    { "name": "Image", "type": "RECTANGLE", "cornerRadius": 8, "resizing": "FILL" },
    { "name": "Title", "type": "TEXT", "fontSize": 18, "fontWeight": 700 },
    { "name": "Description", "type": "TEXT", "fontSize": 14, "lineHeight": 20 },
    { "name": "CTA", "type": "BUTTON", "autoLayout": { "direction": "HORIZONTAL", "padding": { "left": 16, "right": 16 }, "gap": 8 } }
  ]
}

This structure maps directly to Figma's node properties and can be imported via the API or copied into a plugin.

2. Create a Responsive Navigation Bar

Task: Build a header that stacks vertically on mobile and horizontally on desktop.
Prompt: "Design a navigation bar component using auto layout that collapses on smaller viewports. The desktop version has a logo left-aligned, three links in the center, and a 'Sign Up' button right-aligned. On mobile, the links become a hamburger menu. Provide the auto layout settings for both breakpoints and the component variants."
Example Result: Two component variants are created: Nav / Desktop (direction: HORIZONTAL, alignment: SPACE_BETWEEN) and Nav / Mobile (direction: VERTICAL, hidden links). The hamburger icon uses nested component sets.

3. Automate Spacing Consistency Across Components

Task: Ensure all buttons, cards, and inputs use a unified 8px grid system.
Prompt: "Write an auto layout rule that enforces a 8px grid. For every component, set padding and gap values as multiples of 8 (8, 16, 24, 32). Provide a Figma plugin snippet that reads all selected frames and adjusts their auto layout properties to the nearest 8px increment."
Example Result: A script that loops through selection, rounds each paddingLeft to Math.round(value/8)*8, and applies the new value. This can be run via the Figma plugin API.

4. Generate a Color Palette Grid

Task: Quickly create a design token set for primary, secondary, and neutral colors.
Prompt: "Generate a Figma frame containing 12 colored rectangles representing a UI color palette. Each rectangle should be 160x160px. Label them: Primary-50, Primary-100, ... Primary-900. Use hex values from a standard material palette. Apply auto layout horizontal with wrap (constraints: LEFT, TOP)."
Example Result: A frame with 12 squares, each colored from #F44336 (Primary-50) to #B71C1C (Primary-900). The auto layout makes resizing the container reflow the squares.

Prototype & Interaction Prompts

5. Build a Micro-interaction for a Like Button

Task: Design a button that scales up and changes color on tap.
Prompt: "Create a Figma prototype interaction for a like button. Use two variants: 'Default' (outline heart, gray) and 'Liked' (filled heart, red). Add a 'On Tap' trigger with 'Smart Animate' transition, 300ms ease-out. The button should scale to 1.2x on press and return to 1x. Output the prototype connection settings."
Example Result:
- Variant 1: Default → Variant 2: Liked with transition type 'Smart Animate', duration 300ms, easing 'Ease Out'.
- Variant 2 → Variant 1 (toggle).

6. Create a Drag-to-Adjust Slider

Task: Prototype a range slider that updates value as user drags.
Prompt: "Design a horizontal slider component. The thumb is a 24px circle, the track is a 300px line. Connect the thumb's 'Drag' trigger to a 'Change to' action that moves it horizontally within the track bounds. Attach a text layer that displays the current progress (0-100%). Use 'After drag' destination with coordinates calculated via prototype variables."
Example Result: Figma variables sliderValue (number) updates as thumb moves. The text shows {sliderValue}%. The interaction uses 'While dragging' with 'Set variable' action.

7. Design a Multi-step Form with Error States

Task: Simulate a sign-up flow with validation.
Prompt: "Create a prototype for a three-step registration form. Each step has a 'Next' button that validates required fields (if empty, show an error state). Use conditional logic: if email is empty, show error; else proceed to next step. Add a progress bar that fills incrementally."
Example Result: Three frames connected via 'After delay' (timed animation) plus conditions. Error states appear as overlays when email == "". The progress bar uses a fill rectangle with width changing per step.

8. Simulate a Loading Spinner Animation

Task: Create a rotating loading indicator without using GIFs.
Prompt: "Build a circular loading spinner using Figma's Smart Animate. The spinner consists of 12 radial lines that fade in sequentially. Create 12 frames (one for each rotated position), each showing one more line with opacity 1. Loop the prototype by connecting the last frame to the first."
Example Result: 12 frames, each with a line rotated 30° more. Transition: Smart Animate, 200ms. On 'After delay' 200ms, go to next frame. Loop: final frame → frame 1.

Component & Design System Prompts

9. Generate an Icon Set in a Unified Style

Task: Produce 10 icons (home, search, settings, etc.) with consistent stroke width and rounding.
Prompt: "Create 10 UI icons for a design system. Each icon is 24x24px, stroke 2px, rounded caps, color #333333. Use vector networks. The icons: Home (house outline), Search (magnifying glass), Settings (gear), User (person), Bell, Mail, Calendar, Heart, Star, Plus. Output the raw SVG paths for each."
Example Result:

10. Define Typography Scale Based on a Modular Ratio

Task: Set up font sizes that follow a 1.25 ratio (major third).
Prompt: "Generate a typography scale for a design system using a 1.25 modular scale starting from 16px base. List all text styles from h1 to body with font size, line height (1.5x), and font weight (bold for headings). Include code for a CSS custom properties block."
Example Result:

:root {
  --font-size-h1: 39.0625px;
  --font-size-h2: 31.25px;
  --font-size-h3: 25px;
  --font-size-body: 16px;
}

And corresponding Figma text styles with fontName properties.

11. Build a Unified Button System with States

Task: Create primary, secondary, and tertiary buttons, each with default, hover, pressed, and disabled states.
Prompt: "Design a button component set with four variants: Primary (filled bg), Secondary (outlined), Tertiary (text-only). Each variant has four states: default, hover (darker bg), pressed (inset shadow), disabled (opacity 0.4). Use auto layout with horizontal padding 16px, gap 8px. Output the JSON structure for the component set."
Example Result: A component set named Button with 12 variants (3 types × 4 states). Each variant includes a text layer and optional icon. The disabled state sets effects to an opacity overlay.

12. Automate Naming Convention for Layers

Task: Rename all selected layers according to a standard pattern.
Prompt: "Write a Figma plugin snippet that renames selected layers following BEM-like naming: block__element--modifier. For example, a card's title becomes 'card__title--light'. The plugin should parse the layer name if it already contains hints (e.g., 'Title' becomes 'card__title'). If no block is specified, use the frame name as block."
Example Result: After running the snippet, a frame named 'Card' containing layers 'Title', 'Description', 'Button' becomes: card__title, card__description, card__button. The script uses figma.currentPage.selection and regex.

Conclusion

These 12 prompts cover the three core areas of modern UI/UX work: structuring layouts with auto layout, breathing life into prototypes with interactions, and building scalable component systems. By copying, adapting, and combining them, you can eliminate tedious manual work and focus on creative exploration. The next time you open Figma, try feeding one of these prompts into your favorite AI tool or even just using them as a checklist for your own design process. Your efficiency—and your design system—will thank you.