Creating mockups is a powerful way to showcase your designs in context. Whether you’re presenting a mobile app inside a phone frame or showing a website on a laptop, mockups help stakeholders visualize the real experience.
Figma makes it easy to create mockups without needing Photoshop or 3D software. You can use frames, devices, and smart composition tools to craft polished, on-brand mockups quickly.
In this tutorial, you’ll learn:
- What a mockup is and when to use one
- How to create a mockup from scratch
- How to use Figma’s built-in device frames
- Bonus tips for branding and portfolio-ready visuals
📱 What Is a Mockup?
A mockup is a visual representation of your UI inside a real-world setting — like a smartphone, laptop, billboard, or product packaging. It shows your design in use rather than just on a plain canvas.
Use mockups when:
- Presenting to clients or stakeholders
- Creating pitch decks or case studies
- Showcasing UI/UX work in your portfolio
- Packaging UI kits or Figma templates for sale
🧱 Step 1: Prepare Your UI Design
Before you mock it up, make sure your actual design is:
- Complete and responsive
- Organized inside a Frame
- Sized appropriately (e.g., 375×812 for iPhone, 1440×1024 for web)
Export the design frame as a component if you’ll reuse it across devices.
🖼️ Step 2: Choose or Create a Mockup Frame
You have 3 options for the mockup shell:
Option A: Use Figma’s Built-In Devices
- Open the Assets tab
- Click “Community → Devices”
- Drag a device frame like “iPhone 14 Pro” onto the canvas
- Place your design inside it
✅ These device frames are vector-based and scalable.
Option B: Use a Mockup Plugin
Install one of these:
- Mockuuups Studio – one-click mockups in 600+ scenes
- Angle Mockups – clean angled perspectives
- Clay Mockups 3D – stylish device renders
Plugins allow you to:
- Pick a device (phone, tablet, laptop)
- Paste your design
- Auto-generate a photorealistic mockup
Option C: DIY Mockup with Custom Shapes
- Create a rounded rectangle (e.g., a phone shape)
- Add borders, shadows, and screen bezels
- Use layers and masking to insert your UI design
This is great for branded or stylized mockups (e.g., skeuomorphic, isometric).
🧲 Step 3: Insert Your UI into the Mockup
- Copy your UI frame
- Paste it into the device screen or placeholder layer
- Resize carefully to fit the screen dimensions
- Use “Crop” or “Fill” in the right sidebar if needed
💡 If the mockup uses masking, double-click inside the mask group and drop in your UI.
🎨 Step 4: Add Backgrounds, Shadows, and Branding
Polish your mockup for presentation:
- Add a light or gradient background
- Use drop shadows or reflections under the device
- Insert your logo or client brand
- Add a label like “Homepage” or “Onboarding Flow”
🎯 You can even add a real hand or person holding the device using PNG overlays.
🗂️ Step 5: Group and Export
Once done:
- Group all layers into a Frame
- Rename it clearly (e.g., “Mockup – Mobile App Home”)
- Export as PNG, JPG, or SVG
Use mockups in:
- Presentations
- Portfolio sites
- Social media case studies
- Figma thumbnails
🚫 What Not to Do
- ❌ Don’t stretch your UI to fit mismatched screens
- ❌ Don’t overload mockups with too much text
- ❌ Don’t mix inconsistent styles or device types
✅ In Summary: Creating a Mockup in Figma
| Task | Tool |
|---|---|
| Choose device frame | Figma devices or mockup plugin |
| Place UI design | Copy → Paste into frame or mask |
| Style mockup | Add background, shadows, branding |
| Export | Use grouped frames and PNG/JPG export |
Mockups aren’t just pretty—they’re persuasive. In one glance, they help clients and users visualize the experience. With Figma’s flexibility, you can build high-impact mockups in minutes, not hours.
Want more smart presentation techniques and reusable design workflows? Explore our full library at Designilo.com.
Designilo 