Skip to main content

​
Links & Notes

Enhance Figr’s product understanding with contextual links and detailed notes. Share references, document decisions, and provide ongoing guidance that shapes every design.

​
Types of Contextual Information

1

Link Categories

Organize references by purpose:
🔗 Production app: https://app.yourproduct.com
🔗 Staging environment: https://staging.yourproduct.com
🔗 Design system: https://design.yourcompany.com
🔗 Component library: https://storybook.yourproduct.com

📊 Google Analytics: dashboard.google.com/analytics
🎥 User testing videos: loom.com/share/user-research
📋 Survey results: typeform.com/results/user-survey
📈 Mixpanel dashboard: mixpanel.com/project/insights

🎨 Design inspiration: dribbble.com/shots/saved
🏆 Best practices: nngroup.com/articles/mobile-ux
🔍 Competitor analysis: competitor.com/feature-name
📱 Mobile patterns: mobbin.design/patterns
2

Contextual Notes

Add detailed context and reasoning:
Interface for adding contextual notes with rich text formatting
Note types:
📝 Design Decisions: Why certain choices were made
⚠️ Constraints: Technical or business limitations
💡 Insights: User research findings
🎯 Goals: Success metrics and objectives
🔄 Iterations: What was tried and why it changed
3

Smart Tagging

Automatic context organization:
Auto-tags based on content:
- #accessibility (WCAG, screen readers)
- #mobile-first (responsive, touch)
- #performance (load times, optimization)
- #conversion (CTAs, funnels)
- #enterprise (B2B, admin features)
- #onboarding (new user experience)

​
Note-Taking Best Practices

Effective Notes

Write notes that inform future designs:✅ Specific and actionable “Users expect save button top-right in admin interfaces”✅ Include reasoning “Single-column mobile layout because 68% of users are one-handed”✅ Reference data “Blue CTAs convert 15% better than green (A/B test July 2024)”

Context Hierarchy

Organize information by importance:🔴 Critical constraints (must follow) 🟡 Strong preferences (should follow) 🟢 Nice to have (consider when possible)Example: 🔴 “WCAG AA compliance required for government contract” 🟡 “Users prefer minimal form fields” 🟢 “Consider animation to delight users”
  • Automatic Analysis
  • Content Monitoring
  • Smart Suggestions
Figr analyzes linked content:
When you add: https://competitor.com/dashboard

Figr extracts:
✅ Visual design patterns
✅ Layout structures
✅ Color schemes and typography
✅ Interactive elements
✅ Content organization

Application:
"Referenced competitor uses sidebar navigation 
with collapsible sections - consider for enterprise users"

​
Collaborative Notes

1

Team Contributions

Everyone adds their expertise:
Product Manager notes:
- Business requirements and constraints
- User feedback and feature requests
- Market research and competitive insights

Designer notes:
- Visual design decisions and rationale
- Usability insights and best practices
- Accessibility considerations

Engineer notes:
- Technical constraints and possibilities
- Performance implications
- Implementation complexity
2

Note Threading

Connected conversations:
Interface showing threaded notes and discussions around design decisions
Discussion flow:
  • Initial note with context
  • Team member responses and questions
  • Resolution and final decision
  • Reference in future designs
3

Knowledge Building

Cumulative team intelligence:
Month 1: Basic product context
Month 3: Pattern recognition and preferences
Month 6: Deep user understanding and edge cases
Month 12: Institutional knowledge and design wisdom

​
Advanced Features

Automatic relationship detection:
When you mention "mobile navigation" in notes,
Figr suggests relevant:
- Mobile design pattern links
- Competitor mobile examples
- Touch interaction guidelines
- Accessibility mobile standards
Understand knowledge usage:
Most referenced notes:
1. Mobile interaction guidelines
2. Brand color usage rules
3. Enterprise user requirements
4. Performance constraints

Insight: Mobile guidelines heavily used → 
Suggests mobile-first design approach
Transform notes into documentation:
Export options:
✅ Design decision log (PDF)
✅ Knowledge base (Markdown)
✅ Team wiki pages (HTML)
✅ Reference library (JSON)

​
Integration with Design Process

  • Design Generation
  • Validation
  • Iteration
Notes influence AI suggestions:
Note: "Enterprise users need bulk actions"
Design output: Tables include checkboxes and bulk operation toolbar

Link: Mobile navigation best practices
Design output: Thumb-friendly navigation with clear touch targets

Explore Screen Sharing

Learn how to share your screen with Figr for the deepest product understanding possible.Screen Sharing →
⌘I