What a mockup is and why you need one
A mockup is a realistic visual representation of how your design will look when it's finished and in use. It shows your design applied to a real object — a website displayed on a phone screen, a logo on a business card, a poster on a wall, a package on a shelf. Mockups let you see problems before you build the real thing, and they help clients or teammates understand what you're proposing without having to imagine it.
Mockups are different from prototypes. A prototype is interactive — you can click buttons or scroll through pages. A mockup is a static image that shows placement, scale, and appearance. You create a mockup when you need to show how something will look in context, not how it will work.
The tools you use depend on what you're designing. If you're working in Figma or Adobe XD, you may build mockups directly into your design file. If you're designing in Photoshop or Illustrator, you'll place your artwork into a mockup template. If you're coding a website, you might use a screenshot tool or a mockup generator that takes your live site and wraps it in a device frame.
Key Takeaways
- Mockups show your design applied to a real object — a phone, billboard, package, or business card — so you can see scale and placement before production.
- Figma and Adobe XD let you build mockups inside your design file using components and frames that match real device dimensions.
- Photoshop and Illustrator require you to place your artwork into a mockup template, which is a layered file with the device or object already built.
- Free mockup generators like Placeit and Smartmockups let you upload an image and automatically wrap it in a device frame without design software.
- The fastest route depends on your workflow: use built-in tools if you're already in a design app, use templates if you work in Photoshop, or use a generator if you need a quick result.
Creating mockups in Figma
Figma has built-in mockup capabilities that work directly in your design file. Start by creating a new frame at the dimensions of the device or object you're designing for — iPhone 15 is 390 × 844 pixels, iPad Pro is 1024 × 1366 pixels, and a standard desktop screen is 1920 × 1080 pixels. Figma's frame presets include these sizes automatically. Select Frame from the toolbar, choose the device type from the right panel, and your frame appears at the correct size.
Design your content inside that frame. Once your design is complete, you can place it into a mockup by using Figma's mockup plugin or by manually creating the device frame around it. The easiest method is to use the Figma Community library, which contains pre-made device mockups. Search "iPhone mockup" or "iPad mockup" in the Community tab, duplicate the mockup file into your project, and paste your design into the designated layer. Figma also lets you export your frame as an image at any size, which you can then place into a more detailed mockup template in Photoshop if you need photorealistic results.
For web design, Figma's browser mockup frames show how your design looks in a desktop or mobile browser window, complete with address bar and browser chrome. This is useful when you're presenting to clients who need to see the full context of how the page will appear online.
Creating mockups in Adobe XD
Adobe XD works similarly to Figma. Create an artboard at your target device size — XD includes presets for iPhone, iPad, Android, and desktop screens. Design your content on that artboard, then export it as a PNG or PDF. To place it into a mockup, you can use Adobe's built-in device mockup feature or read a mockup template from the Adobe Stock library or third-party sites like Placeit.
If you want a photorealistic mockup without leaving XD, use the Mockup plugin from Adobe's marketplace. Install it, select your artboard, and the plugin wraps your design in a device frame with shadows, perspective, and realistic materials. You can adjust the device angle, background, and lighting before exporting.
XD also integrates with Adobe Creative Cloud, so you can move your design into Photoshop for more detailed mockup work if needed. This is useful when you're designing something that needs to appear on a complex background — a billboard in a city street, a poster in a coffee shop, or a package on a store shelf.
Using Photoshop mockup templates
If you design in Photoshop, the fastest way to create a mockup is to use a smart object template. A smart object is a special layer that lets you drop your artwork into a pre-built mockup without manually positioning or scaling it. read a mockup template from sites like Placeit, Smartmockups, or GraphicRiver. The template file opens in Photoshop with layers for the device or object, shadows, and reflections already built.
To use the template, locate the smart object layer — it's usually labeled "Place your design here" or "Artwork". Double-click the smart object, and Photoshop opens a new window showing a blank canvas. Paste or place your design into this canvas, save it, and Photoshop automatically updates the mockup with your artwork in the correct position and perspective. You can then adjust shadows, lighting, and background to match your vision.
Photoshop mockup templates come in hundreds of varieties: phone screens, laptop screens, billboards, business cards, t-shirts, coffee mugs, book covers, and packaging. Many templates include multiple angles or variations of the same object, so you can show your design from different perspectives in a single file. This is especially useful for presenting packaging or product design, where clients need to see how the design wraps around the object.
Using free mockup generators
If you don't have design software or need a mockup in minutes, a free mockup generator is the fastest option. Placeit and Smartmockups are the most common. Both work the same way: upload an image of your design, choose the device or object you want to display it on, and the tool automatically wraps your image in a realistic frame with shadows and perspective.
Placeit offers hundreds of mockup templates — phones, tablets, laptops, billboards, business cards, packaging, apparel, and more. Upload your design, adjust the angle and background if the template allows it, and read the result as a PNG. The free version includes watermarks on some templates, but many are watermark-free. Smartmockups works the same way and also includes a drag-and-drop editor so you can position your design before generating the mockup.
These generators are useful for quick presentations or social media posts, but they have limits. You can't adjust lighting or shadows in detail, you can't show multiple angles easily, and the results look generic because thousands of other designers use the same templates. For professional work or client presentations, a custom mockup in Photoshop or Figma usually looks more polished.
Choosing the right tool for your workflow
The best mockup tool depends on where your design already lives. If you're designing in Figma or XD, build the mockup inside the same file — it's faster and keeps everything in one place. If you're working in Photoshop, use a smart object template to avoid manual positioning. If you're designing a website and need to show it on a device, take a screenshot of your live site and drop it into a browser mockup template.
For client presentations, consider creating multiple mockups showing different contexts. A mobile app design might appear on a phone in a hand, on a desk, and in a pocket. A website design might appear on a desktop, tablet, and phone. A logo might appear on a business card, website, and billboard. Showing your design in multiple contexts helps clients understand how it will work across different situations.
If you're presenting to non-designers, mockups are essential. They bridge the gap between a flat design file and the real-world object. A client who can't visualize a design on a phone screen will understand it when ready when they see a mockup. This reduces revision requests and speeds up approval.
Frequently Asked Questions
Can I create a mockup if I don't have design software?
Yes. Free mockup generators like Placeit and Smartmockups let you upload an image and automatically wrap it in a device frame. You don't need Photoshop, Figma, or any other software. The trade-off is that you have less control over lighting, shadows, and background, and the results use generic templates that many other designers also use.
What's the difference between a mockup and a prototype?
A mockup is a static image showing how your design looks in context. A prototype is interactive — you can click buttons, fill forms, or navigate between pages. Use mockups to show appearance and placement. Use prototypes to show how something works and how users interact with it.
Should I create mockups for every design project?
Not always. Mockups are most useful when you're presenting to clients, showing how a design will appear in the real world, or when the context matters — a logo on a business card, a website on a phone, a poster on a wall. For internal design work or when the design itself is the deliverable, mockups may not be necessary.
Can I use the same mockup template for different designs?
Yes. Most mockup templates are designed to be reused. You can drop different artwork into the same smart object layer in Photoshop, or upload different images to the same generator template. This is useful when you're presenting multiple design options or when you're creating a series of designs that all need the same context.
What file format should I export my mockup in?
PNG is the standard for mockups because it preserves quality and supports transparency. JPG works if file size matters and you don't need transparency. If you're sending the mockup to a client or posting it online, PNG is usually the better choice. If you need to edit the mockup later, keep the original Photoshop or Figma file so you can update the design without starting over.