Промты для UI/UX дизайна: Figma, прототипы, компоненты

{
"title": "10 Prompts for UI/UX Design: Figma, Prototypes, Components",
"content": "## Why Prompts Matter in UI/UX Design\n\nIn the fast-paced world of digital product design, the difference between a good interface and a great one often comes down to clarity of thought. As a UI/UX designer, you constantly juggle user flows, component libraries, and prototyping tools like Figma. But what if you could accelerate your ideation, refine your design decisions, and generate consistent output with a simple text prompt? That’s where the power of structured prompts for design comes in.\n\nPrompts are not just for AI tools—they are mental triggers that help you break down complex tasks into actionable steps. Over the past few years, the design community has embraced prompt engineering as a way to communicate intent to AI assistants, generate design specs, or even create entire component sets. This article presents a comprehensive collection of 10 prompts organized by skill level: basic, advanced, and expert. Each prompt includes a clear task, the prompt itself, and a concrete example result. Whether you are a junior designer exploring auto layout or a senior architect building a design system, these prompts will sharpen your workflow.\n\n## Basic Prompts\n\n### 1. Task: Create a simple button component with auto layout\n\nPrompt: \"Generate a Figma button component using auto layout. The button should have a horizontal padding of 16px, vertical padding of 8px, a corner radius of 6px, and a primary color of #0066FF. Include a text layer inside the auto layout frame. The button should resize automatically when the text changes.\"\n\nExample result:\nIn Figma, you create an auto layout frame (Shift + A). Set padding: left/right 16px, top/bottom 8px. Corner radius: 6px. Fill: #0066FF. Inside the frame, add a text layer with a sample label like \"Click Me\". The text color is white (#FFFFFF). As you type longer text, the button expands horizontally due to auto layout. This is the foundation of any design system component.\n\n### 2. Task: Build a responsive card with image and text\n\nPrompt: \"Design a card component in Figma with an image placeholder on top, a title, and a description below. Use auto layout with vertical direction. The card width should be fixed at 320px, and height should stretch based on content. The image frame should be 320px wide and 180px tall. Apply a drop shadow effect with Y offset 2px and blur 4px.\"\n\nExample result:\nYou create a vertical auto layout frame (320px wide). Top: image frame (320x180px) with a fill color or image placeholder. Below: another auto layout frame containing a title (bold, 18px) and description (regular, 14px). Padding around the text: 16px. The card’s bottom auto layout ensures that if the description is long, the card grows vertically. This is a standard pattern in material design.\n\n### 3. Task: Create a navigation bar with three links\n\nPrompt: \"Generate a horizontal auto layout frame for a top navigation bar. Include three text links: Home, Products, About. The navigation bar should be full width (100% of parent), with a background color of #1A1A1A and text color #FFFFFF. Each link should have padding of 12px left/right. Align the links to the left side of the bar.\"\n\nExample result:\nIn Figma, create a frame set to 100% width. Inside, add a horizontal auto layout frame. Add three text layers: \"Home\", \"Products\", \"About\”. Set each text padding to 12px left/right. Background: #1A1A1A, text: #FFFFFF. The auto layout distributes the links evenly if you set alignment to left. This component is reusable across multiple pages.\n\n## Advanced Prompts\n\n### 4. Task: Design a form input group with validation states\n\nPrompt: \"Create a form input component in Figma that includes a label, an input field, and a helper text. The input field should have three states: default (border #CCCCCC), focused (border #0066FF), and error (border #FF0000). Use auto layout with vertical direction. The input field width should be 320px. Include a placeholder text 'Enter your email' in the default state. The error state should show a red helper text 'Please enter a valid email'.\"\n\nExample result:\nYou build a vertical auto layout frame. On top: label text (14px, bold). Middle: input frame with 320px width, 40px height, border radius 4px, and the appropriate border color for each state. Bottom: helper text (12px). To manage states, you create three variants in Figma’s component properties: default, focused, error. Each variant changes the border color and helper text. This is essential for high-fidelity prototypes.\n\n### 5. Task: Build a modal dialog with overlay\n\nPrompt: \"Generate a modal component with an overlay background (50% black opacity) and a centered modal card. The card should have a width of 480px, a white background, corner radius 8px, and contain a title, a description, and two buttons: Cancel and Confirm. The modal should be centered both horizontally and vertically within the overlay. Use auto layout for the card content.\"\n\nExample result:\nCreate a frame for the overlay (100% width and height of the artboard, fill: #000000 with 50% opacity). Inside, center a card frame (480px, white, radius 8). Within the card, vertical auto layout: title (bold, 20px), description (regular, 14px), and a horizontal auto layout for the two buttons. The Cancel button is outlined, the Confirm button is filled with #0066FF. This modal can be turned into a component with a property for visibility.\n\n### 6. Task: Create a responsive grid system with auto layout\n\nPrompt: \"Design a responsive grid layout in Figma using auto layout. The grid should have 3 columns with a 16px gap between them. Each column should be a fixed width of 200px. Inside each column, place a card component. The entire grid should be wrapped in a horizontal auto layout frame that centers the columns. The grid should adapt if you add or remove columns.\"\n\nExample result:\nCreate a horizontal auto layout frame. Inside, add three nested auto layout frames (each 200px wide) separated by a gap of 16px. Each frame contains a card (from earlier). If you duplicate a column, the auto layout automatically re-spaces them. This is a powerful technique for creating responsive layouts without manual positioning. You can also wrap the grid in a parent frame that constrains the maximum width.\n\n## Expert Prompts\n\n### 7. Task: Build a design system component with nested variants and properties\n\nPrompt: \"Create a complex button component in Figma with the following properties: size (small, medium, large), type (primary, secondary, ghost), and state (default, hover, pressed). The button should use auto layout and include an icon slot. The icon slot should be a boolean property that shows or hides an icon. The button text should be a text property. Use color tokens from a local library.\"\n\nExample result:\nYou create a main component with auto layout. Add three component properties: \"Size\" with values small (padding 8px, font 12px), medium (padding 12px, font 14px), large (padding 16px, font 16px). \"Type\" changes the fill color: primary (#0066FF), secondary (white with border), ghost (transparent). \"State\" modifies opacity and shadow: default (none), hover (slight darken), pressed (inner shadow). The icon slot is a boolean that toggles an icon layer. The text property allows editing the label. This yields 3x3x3 = 27 variants, all manageable through Figma’s properties panel.\n\n### 8. Task: Create a prototype interaction with conditional logic\n\nPrompt: \"Design a multi-step form prototype in Figma with three steps. Step 1: email input. Step 2: password input. Step 3: success message. Use smart animate to transition between steps. Add conditional logic: if the email input is empty, show an error state on the button click; if filled, proceed to step 2. Use variables to track the input value.\"\n\nExample result:\nSet up three frames: Step1, Step2, Step3. In Step1, add an input field and a button. Create an interaction on the button: if input text length > 0, navigate to Step2 with smart animate. If empty, change the input variant to error. In Step2, similar logic to proceed to Step3. Use Figma’s variable feature to store the email value and display it on Step3. This creates a realistic prototype that mimics real app behavior.\n\n### 9. Task: Design an atomic component hierarchy with auto layout constraints\n\nPrompt: \"Generate a complete atomic design system hierarchy: atoms (icon, label, button), molecules (input group, card), organisms (header, form). Use auto layout for all components. Each component should have defined spacing tokens (4px, 8px, 16px) and color tokens. Document the hierarchy in a Figma page with an organized layout.\"\n\nExample result:\nOn a dedicated page, you build a library: atoms like a 24x24 icon (auto layout), a label text, a button. Molecules combine atoms: an input group uses a label atom and an input frame. Organisms combine molecules: a header uses a logo atom and a navigation molecule. All spacing uses auto layout with token-based padding (e.g., 8px). The hierarchy is visually documented with arrows or a table of contents. This approach ensures consistency across the entire product.\n\n### 10. Task: Create a dark mode switch with component properties\n\nPrompt: \"Design a dark mode toggle component in Figma. The component should have two variants: light and dark. Each variant should change the background color, text color, and border colors of all child elements. Use a combination of component properties and nested instances. The switch itself should have a boolean property 'on' that changes its appearance.\"\n\nExample result:\nCreate a main frame with a toggle switch (a pill shape with a circle). Add a boolean property \"on\": when true, circle moves right and background turns #0066FF; when false, circle left and background gray. Then create two component variants: light and dark. In the light variant, the background is white and text black. In the dark variant, background is #1A1A1A and text white. Nest the switch inside a card that also changes colors. This is a real-world pattern used in many apps.\n\n## Comparison Table: Prompt Levels\n\n| Level | Focus | Key Skill | Example Use Case |\n|---|---|---|---|\n| Basic | Single components | Auto layout, padding | Button, card, nav bar |\n| Advanced | Stateful components | Variants, interactions | Form inputs, modals |\n| Expert | Design systems | Nested properties, tokens | Atomic hierarchy, dark mode |\n\nThis table summarizes what each level targets. Beginners should master basic auto layout before moving to advanced states. Experts can combine all techniques to build scalable design systems.\n\n## Conclusion\n\nPrompts are more than just shortcuts—they are a structured way to think about design problems. By using the 10 prompts in this collection, you can streamline your work in Figma, from simple components to complex design systems. The key is to start with basic auto layout, then layer on variants and interactions, and finally build a full atomic hierarchy. Whether you are a solo designer or part of a large team, these prompts will help you produce consistent, responsive, and professional UI/UX designs.\n\nAs you continue to explore, consider how prompts can also be used to generate design specs, write documentation, or even train junior designers. The future of design is not just about pixels—it’s about clarity of communication. And a good prompt is the clearest message you can send.\n\nThis article was created with contributions from the design community and references to Figma’s official documentation on auto layout and component properties.",
"excerpt": "A structured collection of 10 UI/UX design prompts for Figma, organized by basic, advanced, and expert levels. Each prompt includes a task, the exact prompt text, and a concrete example result. Covers auto layout, component variants, prototypes, and design systems."
}