We have already written about the general method for saving design references: capture the image with its link, write one line on why, let the tool read and tag it, and search by description later. That method does not change.
What does change is the source. A website, a Dribbble shot, a Figma file and a banking app all need a slightly different capture step. This guide goes through each source so everything ends up in the same library, in the same shape.
The rule that applies everywhere
Every reference you save should have three things: the image as you saw it, the link to where it came from, and one line on why you kept it. If a source makes one of those hard, the steps below cover the workaround.
Websites and landing pages
Websites are the easiest source and the one designers save most.
- Visible area: a browser extension that captures the screen and the URL together in one click. Our roundup of Chrome extensions for designers compares options.
- Full page: in Chrome, open DevTools, press Cmd+Shift+P (Ctrl+Shift+P on Windows) and run Capture full size screenshot. In Firefox, right-click, choose Take Screenshot, then Save full page. Then add the image to your library with the link.
- Interactions: for a hover state or an animated menu, record a short screen video, or capture the two or three states as separate screenshots.
Save the page you saw, not just the link. Sites redesign, and the link will eventually show something else. We wrote more on this in how to save website designs for inspiration.
Dribbble shots
Dribbble has likes and collections, and they are useful for browsing. They do not let you write a private note, search inside the image, or keep the shot if the designer removes it.
- Open the shot page, not the thumbnail in the feed, so you capture it at full size.
- Capture it into your library with the shot's link attached.
- In your note, write what is worth borrowing: the card layout, the chart style, the colour pairing.
- Remember that many Dribbble shots are concepts, not shipped products. Mark concepts in your note so you do not mistake them for proven patterns later.
Behance projects
Behance projects are long case studies. Saving the whole thing as one tall screenshot gives you an image nobody can use.
- Capture the individual frames that matter: the logo sheet, one key layout, the type specimen.
- Save each one with the project link, so you can go back to the full case study.
- Use a note on each to say which part you liked, since a single project may give you three unrelated references.
Figma community files and your own Figma work
Figma is where references end up, but it is a poor place to keep them. Large reference boards slow files down, and there is no search across projects. See how to organise Figma inspiration files.
- For a Figma community file, capture the frames you care about and save them with the community link.
- For your own past work, export the key screens and save them to your library with the file link. Your own solved problems are some of your best references.
Mobile apps
Apps give you no link and no selectable text, and the screenshots land in your camera roll.
- Capture the screen and the two screens around it, so you keep the flow, not just a moment.
- Send it to your library straight away, from the share sheet if your tool supports it.
- Write the app name and the screen type in the note: "Monzo, onboarding step 2."
- Delete it from the camera roll.
The full routine is in how to save UI inspiration from mobile apps. Libraries such as Mobbin and Refero are useful sources too. Save the screens you want to keep into your own library.
Motion and video
For a transition or micro-interaction, a still loses the point. Record a short clip (Cmd+Shift+5 on Mac, Win+Alt+R with the Xbox Game Bar on Windows, or your phone's screen recorder), and save it with the source link and a note on what moves. If your tool does not hold video, save a still of the key frame and link the clip.
Colour palettes and type
- Palettes: screenshot the palette or the page where you saw it, and put the hex values in the note. A searchable number beats a pretty swatch.
- Type pairings: capture a specimen where the pairing is used well, and write the font names in the note.
Keep everything in one library
The point of treating sources differently is so they all end up in the same place. A Dribbble shot, a live pricing page and an app paywall are the same problem solved three ways, and you want all three to appear when you search "pricing".
GetRef captures web pages with their link in one click, reads the text in every saved image, tags it and finds it later by description. That makes it easy to mix sources in one library. If you are still choosing a tool, see the best design reference manager.
Common questions
- How do I save design references?
- Capture a screenshot and its source link together in one library, add a one-line note about why you kept it, and use a tool that reads and tags the image so you can search for it later. Do this the same way whether the source is a website, Dribbble, Behance, Figma or a phone app.
- How do I save Dribbble shots for inspiration?
- Dribbble lets you like shots and add them to collections, but those stay inside Dribbble. To keep a shot with your own note and search it later, capture it with a browser extension into your reference library, which keeps the image and the link to the shot.
- How do I take a full-page screenshot of a website?
- In Chrome, open DevTools, press Cmd+Shift+P on Mac or Ctrl+Shift+P on Windows, and run Capture full size screenshot. In Firefox, right-click the page, choose Take Screenshot and then Save full page. Many reference-saving extensions also capture the full page in one click.
- Where is the best place to save design references?
- One private library that keeps the link, reads the text in each image and searches by description. GetRef, mymind and Eagle are the most common choices. Avoid splitting references across folders, bookmarks and several apps.
