A Figma mockup is a realistic-looking visual of a design built entirely inside Figma, using frames, shapes, text and image fills instead of a layered Photoshop template. It can show a screen, a poster or a product scene.
It sits within the wider practice described in the guide to what is a design mockup, where a mockup is the stage between rough structure and finished build.
Why build mockups in Figma
Figma is a browser and desktop design tool where layout, vector shapes, text and photographs live in one file. For screen-based work that is a practical advantage, because the mockup and the design are the same object. Edit a heading in the source frame and the presentation updates without a round trip through another program.
The trade-off is that Figma works with flat vector and bitmap layers rather than Photoshop-style smart objects. A Figma mockup therefore suits flat, front-on or lightly styled presentations well, and it needs more manual work when a scene calls for perspective, lens blur or fabric folds. The sections below cover the building blocks that make the approach reliable, and the last section explains where a photo-based workflow still has the edge.
Frames: the canvas for every mockup
Everything starts with a frame. Figma’s help centre describes frames as layers that act as containers to organize other layers, so a single frame can hold a screen design, a device outline and a background.
When the Frame tool is active, the right sidebar offers presets. According to the same documentation, you can choose presets for popular device and asset templates, which gives a correctly proportioned starting rectangle for a phone, tablet, desktop window or paper size. Starting from a preset avoids guessing the proportions of the thing being presented.
A practical structure uses two levels. The inner frame is the design itself, built at its real working size. The outer frame is the presentation: a background colour or gradient, a simple device body drawn with rounded rectangles, and perhaps a soft shadow. Keeping the two separate means the same design can be dropped into several presentation frames, such as a light version for a pitch and a dark version for a case study.
Placing screens and photographs as fills
Figma does not use a dedicated image layer. Its documentation states that these assets are treated as fills, which means a photograph can fill a rectangle, a rounded frame or even a text layer. This is the technique behind most Figma mockups: draw the shape of the surface, then fill it with the image.
The same page notes that when an image is dropped onto the canvas, Figma creates a rectangle layer with the asset set as the fill. Because the result is an ordinary shape, it can take corner radius, strokes, shadows and a clipping frame like any other layer. For batches, the Place image/video command lets you import assets in bulk and position each one on its own target.
One limit is worth knowing before importing large photography. The help article explains that if an asset exceeds 4096 x 4096 pixels, Figma will automatically scale the asset proportionally. For on-screen presentation that is ample, but it matters when a mockup is meant to be exported at a very large size.
Fills are not limited to photographs. The fills guide lists the types that a layer can use: solid colors, gradients, patterns, images, or videos. Layering a gradient over an image fill is a simple way to mimic screen glare or a vignette, and a solid fill with reduced opacity can stand in for a shadow where a true blur would be too heavy.
Components keep a set consistent
Mockups rarely come alone. A client presentation usually needs the same device frame around many screens, or the same business card layout in several colourways. Components handle that. As the documentation puts it, components are elements you can reuse across your designs.
The model has two parts. The main component holds the definition, and each copy placed on the canvas is an instance. The help centre explains that instances are linked to the main component and receive any updates made to the component. For mockup work, that means adjusting the corner radius or bezel of one device component updates every presentation frame that uses it.
A tidy approach is to build a presentation component with a placeholder fill where the design goes, then override that fill in each instance. Name components clearly and keep them on a dedicated page of the file so they are easy to find later.
From mockup to prototype
A static mockup shows how something looks. When the question is how it behaves, the same frames can become a prototype. Figma describes prototyping as a way to present your designs to stakeholders, among other uses, and defines a flow as the network of frames and connections in a single page.
The distinction between the two matters when planning review sessions. Research from Nielsen Norman Group frames the idea neatly: a user interface prototype is a hypothesis, a candidate solution to be tested by watching people use it. A polished mockup is a poor substitute for that test, but it is a good way to agree on visual direction first.
Exporting the finished mockup
Once the presentation frame is ready, it is exported through the Export section of the right sidebar. The steps in the help centre are straightforward: click the plus in the Export section to add an export configuration, choose a format and scale, and export.
For a portion of a larger canvas, the Slice tool is useful, since you can use the Slice tool to select and export a portion of your canvas. The documentation adds that slices also let you control padding around the exported object, which keeps a consistent margin around a device even if the artwork inside changes size.
Using stock photographs, device artwork or third-party templates inside a presentation brings licence terms into play. The article on mockup license terms explains what to look for, and the actual licence text and the rights holder are the final word when something is unclear. This page offers general information and is not legal advice.
When a Figma mockup is not enough
Photographic scenes remain the stronger choice when realism depends on surface behaviour: curved packaging, folded paper, fabric and printed stock. Those jobs are about print finishing and perspective, and the article on print mockup work shows how the paper-based side differs from the screen-based one. Where a photograph must be warped over a surface with real depth, a smart-object workflow in a raster editor usually does it faster.
A sensible rule is to match the tool to the deliverable. Screens, social graphics, slide decks and flat brand boards fit comfortably into Figma. Anything that has to look like a physical object photographed in a room usually needs a photographic base.
Frequently asked questions
Can a Figma mockup replace Photoshop completely?
For flat and screen-based presentations it often can, since frames, fills and components cover most needs. For scenes that need real perspective, depth of field or fabric texture, a raster editor with smart objects is still the more direct route.
How do images work inside a Figma mockup?
Figma treats images as fills rather than a separate layer type, so a photograph is applied to a shape, frame or text layer. The shape then controls cropping, corner radius and shadows.
Is a mockup the same as a prototype in Figma?
No. A mockup is a visual presentation of how a design looks, while a prototype connects frames into flows so that people can click through an experience. The same frames can serve both purposes.
How should the finished mockup be shared?
Add an export configuration to the presentation frame, pick a format and scale, and export it. A slice can be used to crop to a specific region with consistent padding.
