> ## 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.
# Building on Existing
> Extend and enhance your current product interfaces while maintaining consistency and user familiarity.
# Building on Existing
Enhance your product without breaking user expectations. Figr understands your existing interface patterns and helps you extend them naturally for new features and improvements.
**Seamless evolution:** Add new capabilities that feel like they've always been part of your product, maintaining user confidence and reducing learning curves.
## Understanding Your Current Product
**Figr analyzes your existing design patterns:**
**Pattern recognition:**
```yaml theme={null}
Navigation patterns:
- Menu structures and hierarchies
- Breadcrumb usage and styling
- Link behaviors and states
- Mobile navigation approaches
Layout conventions:
- Page structure consistency
- Content organization methods
- Spacing and alignment rules
- Responsive behavior patterns
Component usage:
- Button styles and variations
- Form input patterns
- Card and container designs
- Data table approaches
```
**How users currently interact with your product:**
```yaml theme={null}
User flow analysis:
- Most common user pathways
- Preferred feature access methods
- Search vs browse behavior
- Mobile vs desktop usage patterns
```
```yaml theme={null}
Established behaviors:
- Click target expectations
- Form completion patterns
- Error recovery methods
- Help-seeking behaviors
```
**Identify existing design debt and opportunities:**
```yaml theme={null}
Successful design elements to preserve:
- Well-adopted navigation structures
- Efficient user workflows
- Clear information hierarchies
- Effective visual feedback systems
```
```yaml theme={null}
Areas needing alignment:
- Mixed button styles across pages
- Inconsistent form layouts
- Varying spacing patterns
- Different error message approaches
```
```yaml theme={null}
Gaps to address:
- Undefined edge case handling
- Missing accessibility patterns
- Incomplete responsive behaviors
- Absent loading state designs
```
## Extension Strategies
**Extend existing patterns logically:**
**Grow existing design systems:**
* Add new component variants
* Extend interaction patterns
* Scale layout approaches
* Develop pattern variations
**Seamlessly add new capabilities:**
* Match existing navigation logic
* Follow established workflows
* Use familiar interaction methods
* Maintain visual consistency
**Improve while maintaining familiarity:**
Find areas where small changes create big user experience gains
Validate that improvements don't disrupt existing user workflows
Roll out enhancements that feel natural to existing users
**Add features where users expect them:**
```yaml theme={null}
Strategic placement:
Expected locations:
- Settings in consistent menu locations
- Actions near related content
- Help where users encounter difficulties
- Advanced features in logical progressions
User mental model alignment:
- Group related functionality together
- Follow established information architecture
- Maintain predictable navigation paths
- Use familiar terminology and concepts
```
## Design Consistency Maintenance
**Maintain design system integrity:**
**Consistency checkpoints:**
```yaml theme={null}
Color usage:
- Primary action colors consistent
- Status colors follow established patterns
- Brand colors used appropriately
- Contrast ratios maintained
Typography:
- Heading hierarchy preserved
- Body text consistency maintained
- Link styling follows patterns
- Label and helper text alignment
Spacing:
- Component padding consistent
- Layout margins follow grid
- Element relationships preserved
- White space usage patterns
```
**Preserve user expectations:**
```yaml theme={null}
Consistent interactions:
- Link behaviors and styling
- Back button functionality
- Breadcrumb interactions
- Menu hover and click states
```
```yaml theme={null}
Input consistency:
- Validation timing and messaging
- Error state styling and behavior
- Success feedback patterns
- Auto-save and draft behaviors
```
```yaml theme={null}
User feedback patterns:
- Loading indicator styles
- Progress communication methods
- Error message formatting
- Success confirmation approaches
```
**Maintain voice and information architecture:**
```yaml theme={null}
Content consistency:
Voice and tone:
- Writing style preservation
- Terminology consistency
- Help text approaches
- Error message voice
Information architecture:
- Content categorization logic
- Labeling conventions
- Hierarchy preservation
- Cross-referencing patterns
```
## Common Extension Scenarios
**Adding new capabilities to existing areas:**
```yaml theme={null}
Common additions:
- New metric widgets following existing card patterns
- Additional filter options using established controls
- Export functionality matching current button styles
- Refresh mechanisms consistent with existing patterns
Integration approach:
- Use existing widget framework
- Follow established data visualization patterns
- Maintain consistent spacing and alignment
- Preserve familiar interaction methods
```
```yaml theme={null}
New configuration options:
- Additional preference categories
- New user management features
- Integration configuration panels
- Security and privacy controls
Design approach:
- Extend existing settings navigation
- Use established form patterns
- Follow current validation approaches
- Maintain help text conventions
```
**Improving existing user journeys:**
**Reduce steps while maintaining familiarity:**
* Combine related actions logically
* Add shortcuts for power users
* Implement smart defaults
* Provide progress indicators
**Improve user success rates:**
* Add validation at appropriate points
* Provide clearer guidance
* Implement auto-save features
* Create better error recovery
**Extending to new platforms or devices:**
```yaml theme={null}
Cross-platform considerations:
Mobile adaptation:
- Touch-friendly interaction scaling
- Navigation pattern adaptation
- Content prioritization for small screens
- Platform-specific conventions integration
Tablet optimization:
- Intermediate layout approaches
- Hybrid interaction patterns
- Optimal information density
- Split-screen and multitasking support
Desktop enhancement:
- Advanced keyboard shortcuts
- Multi-window workflows
- Drag-and-drop functionality
- Right-click context menus
```
## Validation and Testing
**Ensure changes feel natural:**
```yaml theme={null}
Testing approaches:
Findability tests:
- Can users locate new features?
- Do new features appear where expected?
- Are new interactions discoverable?
Learnability assessment:
- How quickly do users adapt to changes?
- Do existing users need retraining?
- Are new patterns intuitive?
Satisfaction measurement:
- Do users prefer enhanced workflows?
- Are new features perceived as valuable?
- Does overall satisfaction improve?
```
**Verify design system integrity:**
**Systematic consistency verification:**
* Color usage validation
* Typography consistency checks
* Spacing pattern verification
* Component usage auditing
**Human assessment of coherence:**
* Visual flow evaluation
* Interaction pattern assessment
* Content strategy alignment
* Brand expression consistency
**Ensure enhancements don't degrade experience:**
```yaml theme={null}
Performance monitoring:
- Load time impact assessment
- Interaction responsiveness testing
- Memory usage evaluation
- Mobile performance validation
```
## Best Practices for Building on Existing
**Honor existing user knowledge:**
✅ Preserve familiar workflows
✅ Maintain muscle memory patterns
✅ Keep successful shortcuts
✅ Respect user customizations
✅ Provide migration paths for changes
**Improve thoughtfully:**
✅ Focus on high-impact improvements
✅ Address actual user pain points
✅ Build on successful patterns
✅ Test changes with real users
✅ Plan for iterative refinement
***
Learn how to design completely new interface areas while maintaining product consistency.
[Creating New UI →](/designing/interface/creating-new-ui)