Ticket Templates

🔍 Phase 1: Discovery

-

🔍 Phase 1: Discovery

-

---

💡 Phase 2: Ideation & Iteration

-

💡 Phase 2: Ideation & Iteration Issue Template

-

---

🧱 Phase 3: Design

-

🧱 Phase 3: Design Issue Template

-

---

⚙️ Phase 4: Prototyping (Baseline Only)

⚙️ Phase 4: Prototyping (Baseline Only) Issue Template

-

---

🔄 Phase 5: Review + Iteration

🔄 Phase 5: Review + Iteration Issue Template

-

---

📝 Phase 6: Documentation

-

📝 Component Documentation Issue Template

Type: Documentation Level: Minimum Component Name:

---

✨ Goal

Document the <Component Name> at the Minimum Level, embedded directly within the Figma component configuration panel. This ensures consistent, accessible guidance and sets the foundation for progressing to more advanced documentation levels.

---

✅ Definition of Done: Minimum Level Documentation

The following sections must be completed directly in Figma’s component configuration panel:

---

📘 Overview

• 📘 Overview

  • Describe what the component is and its purpose in the system

  • Include key use cases and how it supports scalable, accessible design

---

📚 Usage Guidelines

• 📚 Usage Guidelines

  • Provide instructions for using the component correctly in designs and handoff

  • Clarify where and when to use this component (e.g., not suitable as a button)

  • Mention expected patterns (e.g., spacing, outlined vs filled usage)

  • Call out considerations for responsiveness, accessibility, or variants

---

♿ Accessibility Considerations

• ♿ Accessibility Considerations

  • Confirm contrast compliance (use Figma Contrast plugin)

  • Mention semantic tags (e.g., utility-semantic-tag) if applicable

  • Include expectations for keyboard navigation, focus, and screen reader behavior

---

⚙️ Component Properties

• ⚙️ Component Properties

  • List all interactive or visual properties clearly

  • Confirm naming aligns with Component Properties documentation

Document all configurable properties using this format:

<property-name> (<type>):

* Purpose: What this property controls
* Usage: How it should be used or when to toggle it
* Context: (Optional) Any design/system constraints

📌 Example:

size (Select):

* Purpose: Adjusts the size of the tag
* Usage:

  * sm – for dense UI or compact elements
  * base – default size for most contexts
  * lg – for emphasis or large display areas

---

🔀 Appearance Layer Modes & Variations

• 🔀 Appearance Layer Modes & Variations This component supports dynamic styling through Figma’s Appearance panel, which allows toggling between variable collections (e.g., theme, status, device).

✅ Supported Variable Collections

• List all supported variable collections used by this component

📌 Example:

* theme: light, dark
* status: default, hover, focus, active, disabled
* device: desktop, tablet, mobile

✅ Behavior When Modes Are Applied

• Ensure tokens (surface, content, border, spacing) adapt correctly

• Describe layout, visibility, or interaction changes

• Confirm all supported modes are previewed and validated

📌 Example:

Responsive Text Size

* What changes: Font size adjusts based on `device` mode using responsive tokens
* To test:

  1. Place the component inside a responsive parent frame
  2. Toggle `device` mode in the Appearance panel
  3. Confirm font size and spacing adapt as expected

ℹ️ Note any unsupported collections or edge cases

---

🧱 Nested Components

• 🧱 Nested Components

  • List and describe all nested or reusable subcomponents

  • Clarify their function, interaction (if any), and visibility rules

📌 Example:

* TagIcon: Displays a leading icon
* CancelButton: Affordance to dismiss the tag
* LabelText: Tokenized text element

---

📝 Additional Notes

• 📝 Additional Notes

  • Provide usage tips across screen sizes or layouts

  • Mention related component families

  • Warn about common usage mistakes or confusion

---

🧠 Developer Notes

• 🧠 Developer Notes

If no developer notes: No current notes.

• Include logic expectations, prop notes, or code mapping

• Mention if this maps to a frontend component (e.g., <Tag />)

• Document known quirks or implementation constraints

---

🐛 Known Issues

• 🐛 Known Issues

If no known issues: No known issues.

• Document limitations, bugs, or incomplete functionality

• Include open questions or gaps

---

Reference Links

If no reference links: No current reference links.

---

📎 Additional Info & Resources

• Minimum documentation must be written within the Figma configuration panel

• This documentation is a prerequisite for advancing to Production or Lovable levels

---

👥 Assignees

• Primary Owner: @

• Reviewer: @

---

📋 To Copy – Example Template Format for Figma Panel

<Component Name>

Overview: <Brief summary of what this component is and its purpose in the system.>

---

Usage Guidelines:
\<Explain when, where, and how this component should be used.
Clarify any restrictions or best practices (e.g., not for navigation, only used in filters, etc.).>

---

Component Properties:

<property-name> (<type>):
Purpose: <What this property controls>
Usage: <How to use or when to toggle this property>
Context: \<Optional – design system constraints or special behavior>

<Repeat for each property>

---

Appearance Modes:
Supports the following variable collections:

**theme:** <Describe how the component adapts visually or functionally between light and dark mode.>

**status:**
\<Describe how the component changes across interaction states (e.g., hover, focus, active, disabled).>

**device:**
\<Describe how the component responds to different device contexts (e.g., layout changes for desktop, tablet, mobile).>

> ℹ️ Note any unsupported collections or edge cases

---

Nested Components:

* <Subcomponent Name>: <Purpose and when it appears>
* <Subcomponent Name>: <Purpose and when it appears>

---

♿ Accessibility Considerations:

* Contrast: Meets WCAG AA in all supported modes
* Keyboard navigation: \<Describe expected focus/tab order>
* Screen reader support: \<ARIA roles or live regions, if any>
* Semantic tags: \<e.g., utility-semantic-tag for structure/meaning>

---

🧠 Developer Notes:
\<Add implementation notes or component mappings (e.g., maps to `<Tag />`).>

If no developer notes:
**No current notes.**

---

Known Issues:
\<List bugs, limitations, or open UX gaps.>

If no known issues:
**No known issues.**

---

Reference Links:

* <Link to design spec, storybook, or dev handoff doc>  
* <Link to external references or accessibility specs>