As a UI/UX designer in 2026, you’ve likely felt the pressure to produce pixel-perfect prototypes and reusable component libraries faster than ever. According to the 2025 Design Tools Survey by UX Tools (ux-tools.com), Figma remains the industry standard, used by over 80% of professional designers. Yet many designers still spend hours manually aligning layers, creating variants, or writing pseudo-code for developers. The solution? Prompt engineering for design. By feeding the right prompts into AI assistants like Claude, ChatGPT, or Copilot, you can generate Figma plugin scripts, auto-layout logic, and even component documentation in seconds. This article provides 10 ready-to-use prompts for four critical design tasks: Figma automation, component systems, auto layout, and prototyping. Each prompt includes a specific task description, the exact text to copy, and a real usage example. No fluff, just proven templates you can paste into your AI tool today.
1. Generate a Figma Plugin Script for Auto-Layout
Task: Create a Figma plugin that automatically applies auto-layout to selected frames with configurable padding and spacing.
Prompt:
You are a Figma plugin developer. Write a complete TypeScript plugin that, when run on selected frames, does the following:
- Reads the selection in the current Figma page.
- For each selected frame, sets `layoutMode` to 'HORIZONTAL' if the frame contains at least three child nodes aligned horizontally (based on their x-coordinates), otherwise 'VERTICAL'.
- Applies primaryAxisAlignItems: 'MIN', counterAxisAlignItems: 'MIN'.
- Sets paddingLeft, paddingRight, paddingTop, paddingBottom to 16px.
- Sets itemSpacing to 8px.
- Adds a text node inside the frame with the text "Auto layout applied".
- Handles errors gracefully (e.g., if no selection, show a toast message).
Return the full plugin code with clear comments.
Usage example:
A designer selects 10 frames in a dashboard mockup, runs the plugin, and all frames instantly get uniform padding and spacing, reducing manual adjustment time by 90%.
2. Design a Naming Convention for Component Variants
Task: Create a systematic naming convention for button components in a design system.
Prompt:
You are a design systems lead at a SaaS company. Propose a naming convention for button components in Figma that includes:
- Base component name: "Button"
- Variants: size (small, medium, large), type (primary, secondary, tertiary, ghost), state (default, hover, pressed, disabled, loading), and icon (with-icon, no-icon).
- Use the slash (/) separator for nested variants.
- Provide at least 10 example component names.
- Explain how this convention scales when adding new variants (e.g., new color themes).
Usage example:
A team uses the convention to create 120 button variants (5 states × 4 types × 3 sizes × 2 icon options) in a single main component, making it easy to swap properties in the design panel.
3. Write an Auto Layout Formula for a Card Component
Task: Define auto-layout parameters for a responsive blog post card.
Prompt:
You are a Figma auto-layout expert. Describe the exact auto-layout settings for a blog post card component that includes:
- A cover image (fixed height 200px, fill width).
- A title (text, auto width, max 2 lines).
- A description (text, auto height, max 4 lines).
- A row with author avatar (40×40px) and date (text).
The card must:
- Stack vertically with 12px spacing between elements.
- Have 16px padding on all sides.
- Have a fixed width of 320px but variable height depending on content.
- The entire card should have a 1px stroke and 8px corner radius.
Write the settings as a bullet list that a designer can directly input into Figma’s auto-layout panel.
Usage example:
A designer creates the card in Figma, applies the settings, and the card automatically adjusts its height when the title or description text changes, eliminating manual resizing.
4. Create a Micro-Interaction Prototype for a Button Hover
Task: Build a prototype that animates a button on hover using Figma’s smart animate.
Prompt:
You are a Figma prototyping expert. Write step-by-step instructions for creating a micro-interaction where a primary button scales up by 5% and changes background color from #2563EB to #1D4ED8 on hover, with a smooth 200ms ease-in-out transition. Include:
- How to set up the button component with two variants (default and hover).
- How to configure the prototype interaction (trigger: while hovering, action: smart animate).
- How to add a subtle shadow effect on hover (box-shadow: 0 4px 6px rgba(0,0,0,0.1)).
- Optional: add a ripple effect using an overlay.
Usage example:
A product designer implements this on all primary action buttons in a mobile app flow, resulting in a polished, responsive feel that passes user testing with a 93% satisfaction rate (according to an internal usability study at a fintech client).
5. Generate a Design Token File for a Theme
Task: Produce a JSON file of design tokens for a light and dark theme.
Prompt:
You are a design token architect. Generate a JSON file containing design tokens for a SaaS dashboard with two themes: light and dark. Include the following categories:
- Colors: primary (blue-500, blue-600), secondary (gray-100, gray-200), background, surface, text (primary, secondary, disabled), border, error, success.
- Typography: font-family (Inter), font-size (xs: 12px, sm: 14px, base: 16px, lg: 18px, xl: 24px), font-weight (regular: 400, medium: 500, bold: 700), line-height (tight: 1.2, normal: 1.5).
- Spacing: scale from 4px to 64px (4, 8, 12, 16, 24, 32, 48, 64).
- Border-radius: sm (4px), md (8px), lg (16px), full (9999px).
- Shadows: sm, md, lg (each with offset-x, offset-y, blur, spread, color).
Use the format: { "light": { "color": { "primary": "#2563EB", ... } }, "dark": { ... } }.
Usage example:
A design system team imports the generated JSON into Tokens Studio (Figma plugin) and instantly maps all components to the new tokens, achieving consistent theming across 200+ screens.
6. Write a User Flow Script for a Prototype
Task: Define a complete user flow for an onboarding prototype.
Prompt:
You are a UX writer and prototyper. Write a detailed user flow for a mobile onboarding experience with 4 screens (Welcome, Features, Permission Request, Final CTA). For each screen, specify:
- Screen title and description.
- UI elements (text, buttons, images).
- Prototype interactions (tap, swipe, delay).
- Success and error states (e.g., if the user denies permission, show an alternative screen).
- Microcopy for each button (e.g., "Get Started", "Allow Notifications", "Skip").
Use a table format with columns: Screen, Elements, Interactions, Microcopy.
Usage example:
A startup founder presents the flow to stakeholders, and the team builds the prototype in Figma in 2 hours instead of two days, leading to a 40% faster approval cycle.
7. Create a Responsive Grid System for Figma
Task: Generate a configurable grid system for a 12-column responsive layout.
Prompt:
You are a layout expert. Describe how to set up a responsive 12-column grid in Figma that:
- Has a max width of 1440px.
- Has 12 columns, each 64px wide, with 24px gutters.
- Has 32px left and right margins.
- Adapts to tablet (768px, 8 columns) and mobile (375px, 4 columns).
- Includes a sample layout with a hero section (full width), a 3-column card grid, and a 2-column content row.
- Provide a step-by-step guide to create the grid using Figma’s layout grid feature (not an external plugin).
Usage example:
A junior designer applies this grid to a landing page, and the design automatically aligns to the grid, making it easy to hand off to developers who use CSS Grid with similar values.
8. Generate a Component Documentation Template
Task: Automate the creation of design system documentation for a button component.
Prompt:
You are a technical writer for a design system. Write a comprehensive documentation template for a button component in Markdown. Include sections for:
- Component name and description.
- Usage guidelines (when to use, when not to use).
- Variants (size, type, state, icon).
- Anatomy (visual breakdown with labels).
- Examples (code snippets in HTML/CSS and React).
- Accessibility notes (keyboard focus, ARIA labels, contrast ratios).
- Figma link placeholder.
Use a table to show the variant matrix.
Usage example:
A design operations manager fills in the template for 50 components, and the documentation is published on Zeroheight, reducing developer questions by 60% according to a case study by Zeroheight (zeroheight.com/blog).
9. Write a Prompt for AI-Generated Icons in Figma
Task: Generate a set of consistent icons for a navigation bar using an AI icon generator.
Prompt:
You are an icon designer. Generate a prompt for an AI tool (like Midjourney or DALL-E) to create a set of 5 navigation icons in a consistent style for a fintech app: Home, Transactions, Budget, Analytics, Profile. Requirements:
- Style: line art, 2px stroke, rounded caps, 24×24px viewbox.
- Color: #2563EB (blue-500) for the stroke, no fill.
- Each icon should be visually distinct but share the same stroke weight and corner radius.
- Provide the exact prompt for each icon, plus a combined prompt that generates all five in one go.
- Also suggest how to import the resulting SVGs into Figma as components.
Usage example:
A designer pastes the prompt into an AI image generator, gets 5 icons in under 30 seconds, imports them as SVGs into Figma, and converts them to components with auto-layout, saving 4 hours of manual drawing.
10. Debug a Figma Auto Layout Issue
Task: Troubleshoot a common auto-layout problem where child elements overlap.
Prompt:
You are a Figma support specialist. A designer reports that when they add a long text string to a frame with auto-layout, the text overflows and overlaps with the next sibling element. The frame has: layoutMode: VERTICAL, itemSpacing: 8px, padding: 16px. The text node has resizing set to 'Fill container'. Diagnose the problem and provide step-by-step solutions. Possible solutions to include:
- Checking if the text node's 'Text truncation' is set to 'None'.
- Setting the text node's resizing to 'Hug contents' instead of 'Fill container'.
- Adding a fixed height constraint to the frame.
- Using 'Clip content' on the frame.
- Testing with a nested auto-layout frame.
Write the answer as a troubleshooting guide with numbered steps.
Usage example:
A designer follows the guide, changes the text node resizing to 'Hug contents', and the layout immediately corrects itself—no more overlapping.
Conclusion
These 10 prompts cover the most time-consuming tasks in modern UI/UX design: automation, component systems, auto layout, and prototyping. By integrating prompt engineering into your workflow, you can reduce repetitive manual work by up to 70% (based on estimates from the 2026 Design Efficiency Report by Nielsen Norman Group, though exact figures vary by task). Start with the prompt that matches your biggest pain point—whether it’s generating a Figma plugin script or defining a naming convention—and adapt it to your team’s style. The key is to treat AI as a collaborator: give it clear constraints, test the output, and iterate. For more advanced techniques, explore Figma’s REST API documentation (figma.com/developers/api) and the official Figma plugin examples (github.com/figma/plugin-samples). Now go ahead, copy a prompt, and let AI handle the grunt work while you focus on creativity.
Comments