Ask a senior designer how they solve a new problem quickly and the honest answer is usually: "I have seen something like this before." Years of looking at good work build a mental library. The trouble is that memory is a lossy library. You remember that you saw a great settings page, not where.
A design library is that mental library made real. It is the private collection of references, patterns and past work you draw on, kept in one place you can search. This guide explains what goes in one, how to structure it and how to keep it useful for years.
Design library vs component library
The phrase "design library" means two things, so it helps to separate them.
- A component library or design system holds the reusable parts of your own product: buttons, inputs, tokens, rules. It lives in Figma and code.
- A design reference library holds examples from everywhere: other products, websites, apps, print, your own old work. It informs what you design next.
This post is about the second kind. The two work well together. Patterns you collect in your reference library often become decisions in your design system.
What goes in a design library
Organise what you save around the problems you actually solve, not around what is pretty.
- Flows: onboarding, sign-up, checkout, cancellation, invites.
- Screens: pricing, dashboards, settings, profiles, search results, empty states, errors.
- Components in context: tables, filters, forms, navigation, modals, notifications.
- Visual language: colour palettes with hex values, type pairings, illustration styles, iconography.
- Motion: transitions and micro-interactions, as short clips.
- Copy: button labels, onboarding text, error messages that explain themselves.
- Your own work: shipped screens and explorations. Your past solutions are some of your best references.
If you want a word for the collecting habit behind this, it is a swipe file. We wrote about it in how to build a design swipe file.
Step 1: Pick one home
A design library only works if everything is in it. Split between a desktop folder, bookmarks, Pinterest and a Figma page, it is four half-libraries, and you will always look in the wrong one first.
Pick one tool for keeping. You can still browse Pinterest or Dribbble and build boards in Figma, but everything you keep goes into the library. The best design reference manager compares the options.
Step 2: Save every reference the same way
Every item gets three things:
- The image as you saw it, not just a link. Sites redesign.
- The source link, so you can go back for context.
- One line on why, such as "progress bar keeps totals visible in checkout".
The third is the most important and the one nobody does unless it is fast. How to save design references from anywhere covers capture for websites, Dribbble, Behance, Figma and apps.
Step 3: Structure with tags and search, not folders
Folders force each reference into one place, and a dark fintech dashboard belongs under dashboard, fintech and dark at once. Use tags instead, and let search do most of the work.
A modern reference manager tags automatically and reads the text in every image, so you can search by description: "pricing with annual toggle", "table with bulk actions". Add a few tags of your own for things the tool cannot know, such as client names or project codes. AI image search for designers explains how this works.
Step 4: Use collections for projects
When a project starts, search the library and pull the relevant references into a collection. That collection becomes the starting point for a moodboard or a design review. When the project ends, archive the collection. The references stay in the library for next time.
Step 5: Review weekly
Ten minutes a week keeps a design library alive: sharpen notes on new saves, delete what you cannot explain, and search for one thing you need right now. The routine is in a weekly design inspiration review.
Step 6: Share it with your team
A personal library becomes much more valuable when the team can use it. The pricing page one designer found reaches the designer working on pricing. Start with a shared space for competitor screens and agreed patterns. See how to build a shared design reference library for teams.
Tools for building a design library
- GetRef: built for this. One-click capture with the link, text recognition, automatic tagging, notes, search by description and collections. Private by default and free for 50 references.
- Eagle: a desktop library for very large collections of local files, with folders, tags and colour filters.
- mymind: a private space for images, articles and notes, tagged automatically.
- Figma: great for project boards built from your library, not for the library itself. See how to organise Figma inspiration files.
Start today in 30 minutes
- Choose one tool and install its browser extension.
- Move your 30 best existing references into it, each with one line on why.
- Add 5 screens from your own shipped work.
- For the next month, save everything you want to keep there, and nowhere else.
- Put a weekly 10-minute review in your calendar.
Common questions
- What is a design library?
- In this sense, a design library is a designer's personal collection of visual references: screenshots of websites and apps, patterns, palettes, type pairings and their own past work, kept in one searchable place. It is different from a component library or design system, which holds the reusable parts of a product.
- How is a design library different from a design system?
- A design system holds the components and rules of your own product. A design library holds references from everywhere, including other products, that inform new work. Many teams have both, and a good design library often feeds decisions that end up in the design system.
- What should be in a design library?
- References organised around the problems you solve: onboarding, pricing, dashboards, tables, empty states, settings, navigation, forms, plus palettes, type pairings, motion examples and screens from your own shipped work. Each item should have its source link and a line on why you kept it.
- What is the best tool for a design library?
- A reference manager that captures with the link, reads the text in each image, tags automatically and searches by description. GetRef is built for this, Eagle suits large local libraries, and mymind suits mixed collections.
- How big should a design library be?
- Size matters less than retrieval. A few hundred well-chosen references you can find in seconds beat thousands you cannot. Add freely, but prune in a weekly review.
