Design Reference Manager for UI and UX Designers (2026)

By refern | Last updated: June 2026

UI and UX designers accumulate hundreds of interface screenshots, pattern references, and flow recordings but rarely have a system that lets them capture, organize, search, and use those references in the same workflow. This guide covers how to build a practical design reference system: capturing UI from the browser, tagging screenshots by pattern type and platform, using color search across your library, and assembling moodboards for design directions. It also honestly compares the tools most designers use today so you can choose what fits your actual workflow.

The problem with most design reference systems

Most UI/UX designers settle into one of two broken patterns:

1. Scattered bookmarks and folders. Screenshots dumped into a Downloads folder, browser bookmarks nobody revisits, and Figma frames used as an inspiration graveyard. Searching means scrolling.

2. A cloud inspiration board that never scales. A Savee or Milanote board that works beautifully for 50 references and becomes a performance problem at 500. When a deadline arrives and you need "all the onboarding flows I've saved with a blue primary color," there is no way to ask that question.

The gap is a local-first tool that combines a real library with real search alongside a canvas for active moodboarding. refern is built around that gap.

Before you start: choosing the right tool for your workflow

Different tools solve different problems. Read this honestly before committing.

Use refern if: you accumulate screenshots on your local machine, want to search by color or tag, build moodboards alongside your library, work offline, or are on Linux.

Use Savee if: community discovery of what other designers are saving is important to you, or you need a Figma plugin that saves directly from your design files. Savee has over 1 million registered users and a genuinely strong human-curated feed with no algorithmic noise. Its browser extension covers Chrome, Safari, Firefox, and Edge (as of 2026).

Use Eagle if: you manage fonts, audio files, or 90+ file formats beyond images, or you need the plugin ecosystem. Eagle previews 108 formats on macOS. It does not have an infinite canvas or a relationship graph.

Use Milanote if: you collaborate with clients or teammates on shared boards, need a web app with no install, or want mobile access. Milanote has real-time co-editing and 100+ profession-specific templates. Its individual plan costs $9.99/mo billed annually, which is $120/year vs. refern's one-time $30.

Step 1: Capture UI screenshots with the browser extension

refern ships a browser extension for Chrome, Firefox, and Safari. The core capture workflow for UI designers:

Hover-save works on individual images: hover over any interface screenshot on a site, see the refern save button appear, click to send it to your library. The file lands in your default import folder without leaving the browser tab.

Right-click save works on any image. Right-click the element and choose "Save to refern" to send it to your library or directly to a specific folder.

Batch save lets you select multiple images from a page and send them all at once. Useful when you find a component library or a Dribbble project page you want to capture wholesale.

When a page is saved, the source URL is recorded automatically. You can retrieve the origin of any screenshot later via the source URL metadata field. This is useful for citing references in design documentation.

Comparison note: Savee's Chrome extension has a 3.9/5 rating and users report the save bar "appears 1/10 clicks" and "the image isn't uploaded" on some sites (as of 2026). refern's extension is newer, but reliability on specific sites can always vary. If a particular site's extension fails, the fallback is drag-drop directly into the app.

Savee's Figma plugin is a genuine advantage Savee holds here. If you regularly save UI components directly from Figma files, Savee has a dedicated integration. refern does not have a Figma plugin.

Step 2: Tag screenshots by pattern type and platform

A flat folder of 800 screenshots is as useless as no folder at all. The system that makes it searchable is tagging.

Recommended tag structure for UI/UX designers:

refern supports hierarchical tags with parent/child relationships. A practical structure:

pattern/
  navigation
  modal
  onboarding
  card
  form
  empty-state
  toast
  tooltip
  table
  data-visualization

platform/
  ios
  android
  web
  desktop

interaction/
  animation
  microinteraction
  gesture

tone/
  minimal
  data-dense
  playful
  enterprise

How to apply tags in bulk: Select multiple screenshots in the grid (shift-click for ranges, cmd/ctrl-click for individual items), open the metadata panel, and type tags into the tag field. Tag macros let you define a shortcut like "ios-card" that expands to platform/ios, pattern/card so you apply two tags with one keystroke.

Smart folders auto-populate based on saved filter queries. Create a smart folder called "Top iOS navigation patterns" with the query platform/ios AND pattern/navigation AND rating:>=4 and it will always contain your highest-rated iOS navigation screenshots without manual curation. See how refern's search works for a full list of available operators.

Directory metadata presets let you attach a default set of tags to a folder so every screenshot dropped into that folder inherits the folder's tags automatically. A folder named "iOS Screenshots" can be configured to apply platform/ios to everything added to it.

Step 3: Organize by design direction or project

Beyond pattern-based tagging, UI designers typically organize references around project context: a folder per project or per design direction, sometimes per design phase (exploration, refinement, handoff).

Recommended folder structure:

Inspiration/
  Navigation patterns/
  Card layouts/
  Form design/
  Onboarding flows/
  Dark mode UI/

Projects/
  Project A/
    Discovery/
    Exploration/
    Final direction/
  Project B/
    ...

Archive/

Cover images and folder backgrounds let you make a folder visually identifiable at a glance. Set a hero screenshot as the cover image so you recognize a project folder without reading the name.

Color labels (9 available) work well for project status: green for active, yellow for review, grey for archived. They are searchable via the colorLabel: operator.

Step 4: Search your library by color, pattern, or keyword

This is where a local-first design reference manager earns its value. You captured 1,200 screenshots over six months. Now you need every example of a blue primary CTA button in an onboarding flow that you rated 4 stars or above.

In refern, that query is:

color:#1a73e8 tag:pattern/onboarding rating:>=4

This runs entirely locally against your SQLite index, returns results in under a second, and requires no internet.

Full-text search covers all metadata fields: filename, folder name, description, notes, source name, creator, and content tags. If you wrote "Stripe checkout new 2025" in the notes field of a screenshot, stripe checkout finds it.

Color search by hex finds the closest matches to any hex value across your entire library. You can get a hex from Figma's color picker and run it directly. This is useful when a client specifies a brand color and you want to see what UI patterns you have in that palette range.

Visual similarity search shows images that look like a reference. Select an image and choose "Find similar" to surface images with matching composition, color distribution, or visual structure. This is useful for finding variations on a pattern you are already looking at.

is:duplicate runs perceptual hash comparison across your library. UI designers who capture screenshots from multiple sources over time accumulate quiet duplicates. This operator surfaces them for cleanup.

Comparison note: Milanote has basic keyword search with no fuzzy matching and no image search of any kind. A recent Milanote app update was criticized for limiting search to recently viewed content, making older references hard to find (as of 2026). Eagle has keyword, color, and recently a local AI Search plugin (released March 2026 for Eagle 4.0). refern's color and similarity search are built in without any plugin installation.

Step 5: Build moodboards for design directions

When a design direction solidifies into a board you can pin next to your work, the reference library connects to the active design process.

refern's infinite canvas for UI designers:

1. Open a new canvas from any folder (right-click or the canvas icon in the action bar).
2. Drag screenshots from your library directly onto the canvas. You can drag from search results, from a folder, or from a smart folder.
3. Arrange images in spatial groupings by pattern type, by flow sequence, or by visual weight.
4. Use text elements to label sections, add notes, or annotate individual screens.
5. Use shape elements (rectangles, circles, arrows) to draw flow connections or highlight specific UI regions.
6. Use color swatch elements to anchor a color palette alongside the references.
7. Apply non-destructive crop to trim screenshots to specific components without creating a separate file.
8. Group related elements into a layer group with a background to create visual sections on the canvas (similar to frames in Figma).

Pin the canvas on top of your design tools. refern's canvas supports pin-window-on-top, adjustable window transparency, and mouse click-through. This replicates the PureRef overlay workflow: the moodboard floats above Figma or Sketch and you can interact with your design tools through the canvas. Read more about the canvas workflow if you use PureRef today.

Linked references track which canvas each screenshot appears on. If you use the same UI pattern across three different design direction boards, the Linked References sidebar on that screenshot shows all three canvases. This backlink system prevents context loss as your project evolves.

Step 6: Use the relationship graph to understand your reference library

After a few months of active collection, a UI reference library develops implicit structure: certain patterns appear together, certain visual languages recur across projects, certain screens connect by flow.

refern's relationship graph view makes this structure visible. The graph shows folders, images, canvases, groups, and tags as nodes connected by typed edges. You can navigate to any node and see what it connects to. For UI designers, common use cases:

• See which canvases an image has been placed on.
• Find all images in a group (the "member-of" relation shows fan cards in the grid).
• Trace a cropped component back to its source screenshot via the "derived-from" link.
• Navigate from a tag node to see everything tagged with that pattern type.

The graph is an Obsidian-style knowledge map for your visual references. If you use Obsidian for research notes and want the same navigable structure for your screenshot library, the graph view is that feature. See a full description of what a reference manager does.

Common problems and fixes

"My screenshots are in a dozen different folders across my drive."

Point refern at your existing folder structure. refern indexes folders in place without copying files. If your screenshots are in Documents/Design/References/, Downloads/Screenshots/, and an external drive, you can add all of them as separate workspaces and switch between them. Each workspace is a separate SQLite index alongside its source folder. refern never moves or copies originals.

"I already use Eagle for files. Do I have to migrate everything?"

refern has a dedicated Eagle importer that reads Eagle folders, tags, ratings, source URLs, notes, and images. The import preserves your metadata. You do not need to rebuild your tag structure from scratch. Details on switching are in the comparison with Eagle.

"I need to share a moodboard with a client."

refern is currently a single-user, local-first app. There is no shareable link feature today. Cloud sharing with public links is planned for Phase 2. For now, export the canvas as an image or use a screen recording. If client sharing is a core requirement of your workflow today, Milanote's view-only shared links that do not require sign-up are worth knowing about.

"I save UI screenshots on my phone while using apps."

refern has no mobile app today. Mobile capture is on the long-term roadmap (Phase 3). For now, use your phone's screenshot function and sync those files to your desktop via iCloud, Dropbox, or a shared folder. Dropping a screenshot-import folder into your refern workspace means new arrivals appear when you open the app on desktop.

"I want Figma to send assets directly to my library."

refern does not have a Figma plugin. Savee does. If your primary capture flow is from inside Figma, that is a genuine advantage Savee holds. The workaround in refern is to export assets from Figma to your workspace folder, and refern picks them up on next sync.

Next steps

• What is a reference manager? covers the full concept if you are evaluating tools from scratch.
• refern vs Eagle goes deep on the comparison for designers already on Eagle who want to understand the canvas and file-handling differences.
• Best Eagle alternatives for artists covers the broader landscape if you are not locked into any existing tool.
• refern vs PureRef is for designers who use PureRef as an always-on-top reference overlay and want to understand how refern's canvas fits that workflow.