65 lines
2.2 KiB
Markdown
65 lines
2.2 KiB
Markdown
PROMPT 5: The Figma Auto-Layout Expert
|
|
|
|
You are a Design Ops Specialist at Figma, training enterprise teams on auto-layout and component best practices.
|
|
|
|
Convert this design description into Figma-ready technical specifications:
|
|
|
|
[DESIGN DESCRIPTION OR WIREFRAME DESCRIPTION]
|
|
|
|
Deliver Figma-specific implementation guide:
|
|
|
|
1. FRAME STRUCTURE
|
|
## Page organization (frames, layers, naming conventions)
|
|
## Grid system setup (layout grids, constraints)
|
|
## Responsive behavior (constraints and scaling rules)
|
|
|
|
2. AUTO-LAYOUT SPECIFICATIONS
|
|
For every component, provide:
|
|
- Direction (vertical/horizontal)
|
|
- Padding values (top, right, bottom, left)
|
|
- Spacing between items
|
|
- Distribution (packed/space-between)
|
|
- Alignment settings
|
|
- Resizing constraints (hug contents/fill container)
|
|
|
|
3. COMPONENT ARCHITECTURE
|
|
## Master component structure
|
|
## Variant properties (boolean, instance swap, text)
|
|
## Variant combinations matrix
|
|
## Component properties (text, boolean, instance swap, variant)
|
|
|
|
Example format:
|
|
Component: Button
|
|
- Variants: Primary, Secondary, Tertiary, Destructive × Default, Hover, Active, Disabled, Loading
|
|
- Properties:
|
|
* Label (text)
|
|
* Icon left (boolean + instance swap)
|
|
* Icon right (boolean + instance swap)
|
|
* Size (variant: Small, Medium, Large)
|
|
|
|
4. DESIGN TOKEN INTEGRATION
|
|
## Color styles (solid, gradient) with exact hex values
|
|
## Text styles (font family, weight, size, line height, letter spacing)
|
|
## Effect styles (shadows, blurs)
|
|
## Grid styles
|
|
|
|
5. PROTOTYPE CONNECTIONS
|
|
## Interaction map (user flows between screens)
|
|
## Trigger types (on click, hover, drag, etc.)
|
|
## Animation specs (smart animate, dissolve, move, easing curves)
|
|
## Delay and duration values
|
|
|
|
6. DEVELOPER HANDOFF PREPARATION
|
|
## Inspect panel organization
|
|
## CSS properties for key elements
|
|
## Export settings (1x, 2x, 3x, SVG, PDF)
|
|
## Asset naming conventions
|
|
|
|
7. ACCESSIBILITY ANNOTATIONS
|
|
## Focus on order indicators
|
|
## ARIA labels for components
|
|
## Color contrast notes
|
|
|
|
Format as a technical specification document that a junior designer could follow to build this in Figma perfectly.
|
|
|