UI/UX Design

Refbox helps UI/UX designers organize interface patterns, collect inspiration, and maintain design system references while working in design tools.

Organizing Design References

Box Structure for Designers

Create Boxes organized by project, pattern type, or design system component:

• Design System - Product Name - Component library, patterns, guidelines
• UI Patterns - Navigation, forms, cards, modals, buttons
• Mobile Design Inspiration - Apps, interactions, layouts
• Web Design Reference - Landing pages, dashboards, marketing sites
• Project: Client Name - References specific to client work

Using Group Frames for Pattern Collections

Create Group Frames on your workspace to view related design elements together:

• Button Variations - Primary, secondary, ghost, disabled states
• Form Components - Inputs, dropdowns, checkboxes, validation states
• Navigation Patterns - Top nav, side nav, mobile menu, tabs
• Card Layouts - Product cards, blog cards, user cards

Common Workflows

Building a Design System Reference

1. Create a Design System Box for your product or client
2. Import component screenshots from existing designs or design tools
3. Organize into Groups by component type - buttons, forms, typography, colors
4. Use Grid layout in Group Frames for consistent component comparison
5. Keep Frame open while designing to maintain consistency

Collecting UI Inspiration

1. Screenshot inspiring interfaces from apps and websites
2. Paste screenshots (⌃ +v ) directly into a Box
3. Add URLs for interactive examples you want to revisit
4. Use Gallery View (⌃ +⌥ +A ) to browse your collection
5. Create Groups for specific patterns (navigation, onboarding, dashboards)

Interface Comparison Studies

1. Import multiple interface examples showing the same pattern type
2. Open as Group Frame to view all variations side-by-side
3. Use Grid layout for structured comparison
4. Analyze patterns - what works, what doesn't, what's common
5. Reference while designing your own implementation

Responsive Design Reference

1. Create Groups for mobile, tablet, and desktop views of the same interface
2. Open multiple Frames showing different breakpoints simultaneously
3. Reference while designing responsive behavior

Frame Management for Designers

Component Reference While Designing

Keep component references visible while working:

• Open 2-3 Frames showing relevant components or patterns
• Position Frames beside your design tool window
• Lock Frames (⌃ +L ) so they don't move accidentally
• Switch references by closing and opening different Assets

Using Text Frames for Guidelines

• Create text notes with design guidelines, spacing values, or color codes
• Keep Text Frames open as quick reference while designing
• Use task lists to track component completion or design review items
• Copy text (⌃ +C ) to paste values into your design tool

Color Sampling

• Use color picker (⌃ +I ) to sample colors from reference images
• Open color palette images as Frames for quick sampling
• Compare color schemes from multiple references side-by-side

Screenshot Workflows

When you find inspiring web designs:

1. Copy the URL
2. Paste into Refbox (⌃ +v )
3. Choose "Screenshot" to capture the page visually
4. Or choose "Link" if you want to revisit the live site
5. Set default behavior in Settings if you prefer one method
6. Export Boxes to share mood boards or pattern collections with teams

Project-Based Organization

Client Project Setup

For a client UI/UX project:

1. Create a project Box - "Website Redesign - Company ABC"
2. Add reference Assets:
   • Competitor interfaces
   • Inspiration and mood board
   • Existing design system components
   • Approved design direction
3. Import client brand assets if relevant
4. Pin the Box during active project work
5. Export when complete to archive project references

Design System Maintenance

1. Create a living Box for your product's design system
2. Update with each component addition or design change
3. Import latest component screenshots regularly
4. Share exported Box with team members for reference alignment

Asset Import Strategies

Building Pattern Libraries

• Screenshot interfaces from apps, websites, and design showcases
• Import Figma/Sketch exports of your own components
• Save inspiration from Dribbble, Behance, or design communities
• Organize immediately into appropriate Boxes

URL vs Screenshot

Use Screenshots when:

• You want a permanent visual record
• The design might change or disappear
• You want to crop the reference

Use Links when:

• You need to see interactions or animations
• The reference includes technical implementation details
• You want to revisit the live site

Tips for Designers