Conference talks, product walkthroughs, teardown videos and tutorials are full of interfaces you will never find on a gallery site: internal tools, unreleased work, prototypes shown for twenty seconds. They are also the references most often lost, because a video is not a thing you can save and the moment slides past.
Here is how to catch the frame and keep it.
Get a sharp frame
- Pause as close to the moment as you can.
- Press the full-stop key to step forward one frame, comma to step back, until the interface is sharp and the cursor is out of the way.
- Press F for full screen, move the mouse off the player so the controls fade, and take a screenshot.
- Set the quality to the highest available first. A 1080p frame of a UI is usable; a 480p one is a blur.
Extensions such as Screenshot YouTube add a button to the player that saves the frame with no controls and no cropping needed. Worth installing if you do this weekly.
Keep the timestamp link
A frame tells you what the screen looked like. The video tells you what the designer said about it. Right-click the player and choose Copy video URL at current time, and save that URL with the frame. In three months, when you want to know why that table had a sticky summary row, the explanation is thirty seconds away.
Save it like any other reference
Paste the frame into your reference library, add the timestamped link, and write the one line: "Linear's issue view, talk about density." If the library reads text from images, the words on the screen in the frame become searchable too, which matters because video frames almost never have useful filenames. How to search text inside screenshots covers how that works.
Tagging video frames
Add a video tag so you can find everything that came from a talk when you want the context rather than the visuals. Otherwise tag it exactly as you would any screenshot. The source does not change what the reference is.
For long tutorials
If a tutorial walks through building an interface, save two or three frames rather than one: the finished state, and the one or two intermediate screens that taught you something. Caption each. A sequence of three annotated frames is often a better reference than the finished product's live site.
For the full set of capture routes, see how to save design references from anywhere.
Common questions
- How do I take a clean screenshot of a YouTube video frame?
- Pause, press the full-stop key to step one frame at a time until the frame is sharp, press F for full screen, then take a screenshot. Hide the controls by moving the mouse away first. Browser extensions such as Screenshot YouTube capture the frame directly without the player chrome.
- How do I link to a specific moment in a YouTube video?
- Right-click the video and choose Copy video URL at current time, or add &t=5m23s to the URL. Save that link with the screenshot so you can watch the context later.
- Where should I save video references?
- In the same library as your screenshots and links, with the frame as the image and the timestamped URL as the link. A reference manager that reads text out of the frame makes it searchable like any other screenshot.
