> ## Documentation Index > Fetch the complete documentation index at: https://docs.figr.design/llms.txt > Use this file to discover all available pages before exploring further. # Links & Notes > Add contextual links and notes to provide Figr with comprehensive product understanding and design guidance. # 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. **Contextual intelligence:** Links and notes create a rich knowledge base that Figr references when making design decisions, ensuring consistency and context-awareness. ## Types of Contextual Information **External resources that inform design:** * Live product URLs (staging/production) * Competitor websites and apps * Industry best practices * Design inspiration sources * Documentation sites * User testing videos * Analytics dashboards * Survey results * Case studies * Academic research **Contextual guidance and decisions:** ``` Decision Notes: "We use blue for primary actions because user testing showed 23% better click-through rates vs. green" Constraint Notes: "Mobile layouts must work with one-handed usage - primary actions in thumb reach zone" Pattern Notes: "Error messages appear below form fields, not above, based on eye-tracking studies" ``` **Institutional memory and learnings:** * Design rationale and reasoning * A/B test results and insights * User feedback themes * Technical implementation notes * Stakeholder preferences and requirements ## Adding Links and References **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 ``` **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 ``` **Automatic context organization:** ```yaml theme={null} 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 **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)" **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" ## Link Processing & Integration **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" ``` **Track changes in referenced content:** * Competitor feature changes * Design system updates * Documentation changes * Research report updates * High relevance: Direct feature comparisons * Medium relevance: Similar user flows * Low relevance: General inspiration * Outdated: No longer applicable **Figr suggests relevant links:** ``` When designing checkout flow: "Consider reviewing the Stripe checkout pattern you bookmarked" When creating mobile layout: "Reference the thumb-zone research from NN Group" When adding error states: "Check the error message guidelines in your design system" ``` ## Collaborative Notes **Everyone adds their expertise:** ```yaml theme={null} 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 ``` **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 **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 **Contextual design:** Notes and links become active participants in the design process, not just static documentation. **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 ``` **Automatic compliance checking:** ``` Constraint note: "Buttons must be minimum 44px for accessibility" Figr check: ✅ All buttons meet minimum size requirement Reference link: Brand guidelines Figr check: ✅ Colors match brand palette ``` **Context-aware improvements:** ``` Previous note: "Users confused by icon-only navigation" Design suggestion: Add text labels to navigation icons Research link: Form completion study Design suggestion: Reduce form fields based on completion data ``` *** Learn how to share your screen with Figr for the deepest product understanding possible. [Screen Sharing →](/designing/input/screen-sharing)