Figma Prompts: Automating UI/UX Workflows with AI

Introduction

Designers, let's face it: we spend way too much time on repetitive tasks—renaming layers, creating variants, aligning frames, writing annotation copy. What if you could delegate these to an AI assistant that understands design systems? With the rise of large language models and their integration into design tools, prompt engineering is becoming a superpower for UI/UX professionals. This article presents a curated set of prompts you can use in tools like Figma (via plugins or API) or in AI chat interfaces to generate UI components, design tokens, prototypes, and accessibility audits. Each prompt includes a real-world example and practical insights to integrate into your workflow.

Why Prompts for Design?

Before diving in, let's clarify why prompts matter. In a world where AI can generate code, copy, and even entire layouts, the designer's role shifts from manual execution to strategic direction. By crafting precise prompts, you can:

• Accelerate prototyping: Generate multiple design variations in seconds.
• Maintain consistency: Enforce design tokens and style guides across teams.
• Improve accessibility: Automatically check color contrast and other WCAG criteria.

However, AI is not a replacement for human judgment. It's a tool that amplifies your creativity. The following prompts are designed to be used as a starting point—always review and customize the output.

Prompt 1: Generating a Design Token Set

Task: Create a JSON file with design tokens for a brand's color palette, typography, and spacing.

Prompt:

Act as a senior design system architect. Generate a JSON file containing design tokens for a fintech startup called 'FinFlow'. The brand should feel trustworthy and modern. Include:
- color: primary, secondary, success, warning, error, neutral shades (50-900)
- typography: font family, sizes (xs to xxxl), line heights, weights
- spacing: scale from 0 to 64px
- breakpoints: mobile, tablet, desktop
Use the W3C Design Tokens Community Group format with $type and $value properties.

Example Result:

{
  "color": {
    "primary": { "$type": "color", "$value": "#0A2540" },
    "secondary": { "$type": "color", "$value": "#00A0B0" },
    ...
  },
  "typography": {
    "fontFamily": { "$type": "fontFamily", "$value": "Inter" },
    "size": {
      "xs": { "$type": "dimension", "$value": 12 },
      ...
    }
  },
  "spacing": { ... }
}

How to Use: Copy the JSON into your design system's token file, or use a plugin like Tokens Studio to import it. This ensures consistency across Figma files and codebases.

Prompt 2: Generating UI Components (e.g., Button)

Task: Create a multi-variant button component in Figma.

Prompt:

Act as a UI component developer. Describe the structure and variants for a button component in Figma. Include:
- Base properties: label, icon (leading/trailing), loading state
- Variants: type (primary, secondary, outline, ghost), size (sm, md, lg), state (default, hover, active, disabled)
- Design tokens for colors, border-radius, padding, font size
- Auto-layout settings: direction, spacing, padding
- Example of how to organize layers in Figma for easy variant management

Example Result:
A detailed description that you can use to manually create the component, or feed into a Figma plugin that creates components from text (e.g., 'Figma-AI'). The output includes a suggested layer hierarchy: Frame > Auto Layout > Text + Icon, and a variant matrix.

Prompt 3: Creating a Responsive Layout from a Sketch

Task: Convert a wireframe sketch into a responsive layout description.

Prompt:

Act as a responsive design expert. Given the following wireframe (ASCII art), describe the layout using CSS Grid and Flexbox. Include breakpoints at 375px, 768px, and 1440px. Analyze the image and provide the code.

[Image upload of your wireframe]

Example Result:
A detailed explanation of how to structure the layout, with CSS code snippets for each breakpoint. For instance, a simple landing page might use a single-column layout on mobile, two-column on tablet, and three-column on desktop.

Prompt 4: Writing Microcopy for a Form

Task: Generate user-friendly microcopy for a sign-up form.

Prompt:

Act as a UX writer. Write microcopy for a sign-up form with fields: name, email, password, and a checkbox for terms. Include:
- Field labels and placeholders
- Helper text for password (e.g., 'Use at least 8 characters')
- Error messages for invalid email and weak password
- Success message after submission
- Tone: friendly, professional, concise

Example Result:
A table or list of microcopy strings that you can directly copy into your design. For example:

Prompt 5: Generating Interactive Prototype Flows

Task: Create a clickable prototype flow for a mobile app onboarding.

Prompt:

Act as a UX architect. Design a 3-screen onboarding flow for a meditation app. For each screen, describe:
- Layout elements (text, image, button)
- Interactive elements and their actions
- Transitions (e.g., fade, slide)
Then describe the overall flow, including skip and next buttons.

Example Result:
A screen-by-screen breakdown that you can use to build the prototype in Figma. It includes recommendations for animations and micro-interactions, such as a progress bar.

Prompt 6: Auditing Color Contrast for WCAG 2.1 AA

Task: Check if a given color palette meets WCAG contrast ratios.

Prompt:

Act as an accessibility specialist. Given the following color palette (hex codes), calculate contrast ratios for text on background and identify any that fail WCAG 2.1 AA compliance (4.5:1 for normal text). Provide alternative colors that pass.

Palette: #0A2540 (dark navy), #FFFFFF (white), #00A0B0 (teal), #FF6B6B (coral)

Example Result:
A table listing contrast ratios and recommendations. For example, white text on teal gives a ratio of 2.1:1 (fails), so you might suggest a darker teal like #007A8C.

Prompt 7: Converting a Figma Frame to HTML/CSS

Task: Convert a Figma design frame into semantic HTML and CSS.

Prompt:

Act as a frontend developer. Convert the following Figma design (link or description) to semantic HTML5 and modern CSS (Flexbox/Grid). Use CSS custom properties for colors and spacing. Ensure the output is responsive.

[Provide frame description or image]

Example Result:
A code block with HTML structure and CSS styles, ready to be used in a frontend project. This saves hours of hand-coding.

Prompt 8: Generating a Design System Documentation

Task: Create documentation for a design system component library.

Prompt:

Act as a technical writer. Generate documentation for a design system, including sections for colors, typography, spacing, and components (buttons, inputs, cards). For each component, describe: usage, variations, and accessibility considerations. Use a clear, concise tone suitable for developers and designers.

Example Result:
A well-structured Markdown document that can be uploaded to a wiki or Confluence. It includes examples and code snippets.

Prompt 9: Creating a User Persona from Research Data

Task: Synthesize user research data into a persona.

Prompt:

Act as a UX researcher. Based on the following interview notes (paste them), create a user persona named 'Alex'. Include demographics, goals, frustrations, and preferred devices. Also suggest design implications for a fitness app.

[Paste your research notes]

Example Result:
A persona card that you can use in presentations and design decisions.

Prompt 10: Generating A/B Test Hypotheses for a Landing Page

Task: Propose A/B testing ideas for improving conversion.

Prompt:

Act as a growth designer. Suggest 5 A/B test hypotheses for a landing page of a SaaS product. For each, include: element to test, hypothesis, expected impact, and success metric. Keep it practical.

Example Result:
A list of hypotheses like 'Changing the CTA button color from green to red will increase click-through rate by 10%' (but without invented stats, you can phrase as 'will likely increase').

Prompt 11: Generating SVG Icons for a Set

Task: Create a set of icons in SVG format.

Prompt:

Act as an icon designer. Generate a set of 5 icons for an e-commerce app: cart, user, search, filter, and menu. Use a 24x24 viewBox, consistent stroke width of 2px, and round caps. Provide the SVG code for each.

Example Result:
SVG code snippets that you can copy into your design or codebase.

Prompt 12: Writing a Component Spec for Developers

Task: Write a detailed spec for a progress bar component.

Prompt:

Act as a product designer. Write a spec for a progress bar component, including: description, use cases, states (default, active, completed, error), visual design (colors, height, border radius), and interaction details (animation duration). Use clear language for developers.

Example Result:
A spec that can be attached to a JIRA ticket or shared with developers.

Conclusion

These prompts are just the beginning. As you experiment, you'll find that the key to effective prompting is specificity and context. The more detailed your request, the more useful the output. Remember to always review AI-generated content for accuracy and alignment with your design goals. Start integrating these into your daily workflow and you'll soon wonder how you ever worked without them. Now, go ahead and try one of these prompts in your next project!

If you're interested in learning more about AI-assisted design, check out our other resources at asibiont.com/blog.