2.2 KiB
2.2 KiB
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:
-
FRAME STRUCTURE
Page organization (frames, layers, naming conventions)
Grid system setup (layout grids, constraints)
Responsive behavior (constraints and scaling rules)
-
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)
-
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)
-
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
-
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
-
DEVELOPER HANDOFF PREPARATION
Inspect panel organization
CSS properties for key elements
Export settings (1x, 2x, 3x, SVG, PDF)
Asset naming conventions
-
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.