Figma portfolio mockup templates

The hard part of a portfolio is rarely the work. It is the twenty minutes per image spent arranging screenshots on a colored background, nudging one until it lines up with the other, and deciding for the fourth time this week how much shadow a browser window should have.

Multiply that by six shots per project and the case study never gets published. These templates exist to collapse that step into a file swap.

52 layouts, all at 1,920x1,440

Every template is a 1,920x1,440 frame, a 4:3 canvas that sits comfortably on a case study page or in a design community shot without needing a second crop. The compositions cover a real range: six templates present a single screen at full size, twenty eight pair two, ten arrange three, and seven fit six screens into one frame for the overview shot at the top of a case study.

Inside them, the placeholder frames run from 375px and 440px mobile screens up through 720, 800, 960, 1280 and 1,600px desktop widths, and beyond that for the ones designed around a single hero screen. That mix is the reason the set covers a whole project rather than one hero image.

Replace the fill, and let the layout react

Every placeholder is a frame named "Mockup (REPLACE THIS)", which is the only instruction the file needs. Drop your exported design onto that frame as its fill and the surrounding layout absorbs it, because the templates are built with Auto Layout rather than positioned by hand. The wrap around each mockup clips the image, so a full-length page export sits inside a window-height crop instead of being squashed to fit, and you choose which part of the page shows.

Each browser window carries the browser toolbar component, which comes in six variants: minimal color, minimal monotone, and a fuller Safari bar, each in light and dark. Pick monotone when the shot already has a lot of color, and Safari when it matters that the reader knows this is a website.

The file also ships a documentation frame explaining the export and drag-and-drop steps, labelled as safe to delete once you have read it, which tells you something about the intended workflow.

Picking a layout for what you are actually showing

Match the composition to the claim you are making. A six-up grid says here is the breadth of the system, and it says nothing about any individual screen, because at that size nobody is reading your empty state copy.

A single 1,600px screen says look at this one thing closely, which only pays off if the screen deserves it. Two screens side by side is the most useful and most underused of the three, since it is the shape of a before and after, or a desktop and mobile pair, or a state change.

The one thing these templates cannot do is tell the story. Nielsen Norman Group's guidance on UX portfolios is direct about it: hiring managers want the messy process, the rejected concepts, the reasoning, and the final screenshots only tell part of it. Use these to make the visual evidence look finished, then write the paragraphs that explain what you decided and why.

Exporting the shot

Export the 1,920x1,440 frame as JPG for a portfolio site or deck, and add an x after a value in the export settings to use it as a scale multiplier, which matters because a 2x export is what keeps 12px UI text legible when someone opens the image full screen.

Check what is inside your screens before you publish: if the interface is full of placeholder names and companies, swap in real-looking ones from the free avatar photos and company logos rather than shipping three rows of Lorem Ipsum.

If the background behind the window still looks bare, the line and dot patterns are the layer that fills it. And if a shot needs actual hardware rather than a floating window, the device mockups cover the MacBook and iPhone versions of the same idea.