figma-design-brief

Figma Design Brief Skill

Converts a product requirement or feature request into a structured design brief — everything a designer needs to open Figma and start building confidently.

Required Inputs

• Feature or requirement (paste PRD snippet, ticket, or describe the feature)
• User goal (what is the user trying to accomplish?)
• Platform (iOS / Android / Web / Responsive / All)
• Existing components available (optional)
• Timeline (when does design need to be ready?)

Output Structure

1. Brief Header

Feature, PM, Designer, Platform, Design due, Dev handoff dates.

2. What We Are Designing and Why

• The goal: [One sentence — user problem being solved]
• Context: [2-3 sentences. Why now? What triggers this?]
• Success looks like: [Specific observable outcome]

3. User Flows to Design

Flow N: [Flow name]

• Entry point: [Where user starts]
• Steps: [Numbered key steps]
• Exit point: [Where flow ends]
• Edge cases: [empty state, error state, loading state]

4. Screens Required

Screen	New / Update	Notes
[Screen]	New	[Key requirement]

5. Components Needed

Component	In library?	Action
[Component]	Yes/No/Needs variant	Use/Create/Extend

6. Constraints and Requirements

• Must haves: [Non-negotiable constraints]
• Must avoid: [Design patterns to not use]
• Accessibility: [WCAG level, touch target sizes]

7. Open Questions

• [Question — with owner]

Quality Checks

• Goal is outcome-focused (not "design the feature")
• All flows include edge cases
• Components table identifies create vs reuse
• Constraints include accessibility requirements
• Open questions have owners

Example Trigger Phrases

• "Write a design brief for [feature]"
• "Turn this PRD into a Figma design brief"
• "Brief the designer on what to build for [requirement]"
• "Create a design spec for [feature] for Figma"
• "What does the designer need to know to design [feature]?"