A MacBook frame in Figma only stays linked to your design when the screen sits inside it as a component instance. Photo scenes and 3D renders don’t work that way. They’re pictures, so every edit means another export. The vector frame stays live, and that is the main reason to start with one.
Designers put their work in a laptop frame for landing pages and portfolio case studies, and for client decks when a bare screenshot feels thin.
Tilted camera angles are still the gap. Figma’s own announcement lists native 3D transforms as coming soon (Figma blog, 2026), so perspective shots still depend on plugins or outside renderers.
Figma MacBook Mockups
The mockups below cover clean studio frames and desk scenes, and the choice between them depends on whether the screen or the setting carries the shot.
Device Mockups Library (100+ devices!)
Massive collection of over 100 device mockups including MacBooks, iPhones, iPads, and more. Comprehensive library covering all major Apple devices and screen sizes. Perfect for presentation decks and client showcases.
Macbook Pro & Air Device Mockups
100% vector MacBook Pro and Air mockups with precise Apple design details. Professional quality suitable for high-resolution presentations. Created by Ernest Ojeh with accurate proportions and styling.
App Store / Play Store Preview Templates / Icon generator
Complete app store preview templates with MacBook mockups for showcasing mobile apps on laptop screens. Includes icon generation tools and store-ready formatting. Perfect for app marketing materials.
Have you seen the latest Figma statistics?
Discover comprehensive Figma statistics including revenue growth, market share, user demographics, and funding data.
Check them out →Free MacBook Pro 16 Mockups
High-quality MacBook Pro 16-inch mockups with realistic shadows and lighting. Multiple angles and orientations available. Perfect for showcasing web designs and applications on large screens.
Minimal Clay Macbook Pro & Air Mockups
Clean, minimal clay-style mockups with soft 3D aesthetic. Modern presentation style that focuses attention on screen content. Perfect for portfolio presentations and design showcases.
Minimal Apple devices Mockups
Minimalist Apple device collection including MacBooks with clean, uncluttered presentation. Simple shadows and professional styling. Good for corporate presentations and client work.
MacBook Air Free Figma Mockups (2022) | BRIX Templates
2022 MacBook Air mockups from BRIX design studio with professional quality and attention to detail. Updated models with current design specifications. Perfect for modern web design presentations.
(Variants) macOS Big Sur UI Kit for Figma
Complete macOS Big Sur interface kit with system components and MacBook frame mockups. Includes native UI elements and window styles. Perfect for designing macOS applications and interfaces.
Macbook clay mockup template v2
Updated clay-style MacBook mockup with improved 3D rendering and shadows. Soft, modern aesthetic perfect for contemporary design presentations. Version 2 includes enhanced details and quality.
Flat Macbook Pro Mockup
Flat design MacBook Pro mockups in shaded, fill, and outline styles. Includes 13, 14, and 16-inch models with 2021 specifications. Perfect for minimalist presentations and icon-style graphics.
MacBook Pro Mockups
Professional MacBook Pro mockup collection with multiple viewing angles. High-quality vector graphics with accurate proportions. Good for detailed design presentations and portfolio work.
Device Mockups (iMac, Macbook, iPad, iPhone)
Apple device ecosystem mockups including MacBooks alongside other Apple products. Consistent styling across all devices for unified presentations. Perfect for showing multi-platform designs.
MacBook Pro 14 – Realistic Mockup
Photorealistic MacBook Pro 14-inch mockup with accurate lighting and shadows. High-fidelity presentation quality suitable for client work. Perfect for showcasing web applications and software.
MacBook Pro 14 Free Mockup 01
Free MacBook Pro 14-inch mockup with professional presentation quality. Clean design with focus on screen content. Good for web design presentations and app showcases.
MacBook Pro 16 Mockup
Large screen MacBook Pro 16-inch mockup perfect for detailed design presentations. Professional quality with accurate proportions. Ideal for showcasing complex interfaces and detailed work.
Big Sur UI Kit: Safari
macOS Big Sur Safari browser UI kit with MacBook frame mockups. Includes native browser elements and window styling. Perfect for web design presentations in native macOS context.
MacBook 12′ Mockup
Compact MacBook 12-inch mockup with portable design aesthetic. Perfect for showcasing mobile-responsive designs and compact interfaces. Clean presentation with minimal shadows.
Edefer’s Macbook mockups
Custom MacBook mockup collection by Edefer with unique styling and presentation angles. Professional quality with creative positioning options. Good for portfolio and agency presentations.
laptop mockup
Generic laptop mockup with MacBook-style design and clean presentation. Versatile template suitable for various laptop designs. Simple, effective mockup for basic presentation needs.
MacBook Pro (2023) Free Figma Mockups | BRIX Templates
Latest 2023 MacBook Pro mockups from BRIX with current design specifications. Professional quality with expert attention to detail. Perfect for showcasing modern web designs and applications.
iMac 24″ Mockups (Front + Back)
iMac 24-inch mockups with both front and back views. Colorful modern design matching current iMac aesthetics. Good for desktop application presentations and workspace showcases.
Macbook pro 2021 Mockup
2021 MacBook Pro mockup with updated design features and proportions. Professional presentation quality with accurate hardware details. Perfect for current design work and client presentations.
Apple Products UI Kit
Comprehensive Apple products UI kit including MacBook mockups and interface elements. Complete ecosystem for designing Apple-focused presentations. Includes hardware and software components.
MacBook Pro 14 Status Bar
MacBook Pro 14-inch status bar component for accurate macOS interface design. Native system elements for realistic application mockups. Perfect for designing macOS applications and interfaces.
MacBook Pro Mockup
Standard MacBook Pro mockup with clean presentation and professional quality. Versatile template suitable for various design presentations. Simple, effective mockup for general use.
MacBook Air – Realistic Mockup
Realistic MacBook Air mockup with vector-based design and resize capability. Professional quality with accurate proportions and styling. Perfect for lightweight design presentations.
Free MacBook Air M2 Frontview Mockup
Latest MacBook Air M2 mockup with updated design specifications. Front-facing view perfect for interface showcases. Modern design matching current Apple aesthetic.
macOS Big Sur UI Kit
Complete macOS Big Sur interface kit with system components and MacBook frames. Native UI elements for authentic macOS design work. Perfect for application and interface design.
Apple Device Mockups (iMac, MacBook, iPhone, iPad and Apple Watch)
Complete Apple ecosystem mockups including MacBooks alongside all major Apple devices. Consistent styling for unified product presentations. Perfect for showing cross-platform design work.
Macbook Pro Mockup
Professional MacBook Pro mockup with clean design and accurate proportions. Standard template suitable for various presentation needs. Good foundation for design showcases and client work.
MacBook Pro 13″ Mockup | Saljug Studios
MacBook Pro 13-inch mockup from Saljug Studios with professional quality and attention to detail. Compact screen size perfect for detailed interface presentations. Studio-quality design and execution.
Which type of Figma MacBook mockup fits the job?
Where the image ends up decides it. The plain version of a mockup puts a Figma screen design inside a MacBook frame in the same file, so the design and the presentation image stay linked. That only holds for one of the types below.
The vector device frame is a MacBook drawn with vectors inside Figma, front view only. It’s quick to edit and it follows the screen design.
A photo scene is a photographed or rendered laptop on a desk, filled with your screen through a plugin. Then there’s the 3D or perspective render, where angle, lighting and reflections get set outside Figma and the result leaves as an image. It looks the best of the lot and takes the longest to revise.
Photo scenes and 3D renders suit a hero image on a landing page or product page, where the picture is the first thing a visitor sees.
Portfolio case studies mix both. A photo scene opens the page and flat frames carry the detailed screens.
Vector frames suit presenting work to clients in Figma. The design changes between meetings, and nobody wants to re-render a scene each time.
A plain screenshot shows the interface and nothing else. A MacBook frame adds device scale and some context around it.
The more revision rounds left, the flatter the frame should be.
MacBook models and the screen sizes to design for
Pick the model first, then build the Figma frame on that model’s native pixel grid.
Native resolution by model, from the sources checked:
- MacBook Pro 14-inch: 3024 by 1964 pixels at 254 ppi (Apple Support tech specs)
- MacBook Pro 16-inch: 3456 by 2234 pixels at 254 ppi (Apple Support tech specs)
- MacBook Air 13-inch: 2560 by 1664 pixels at 224 ppi (Apple tech specs)
- MacBook Air 15-inch: 2880 by 1864 pixels at 224 ppi (9to5Mac spec comparison)
These grids hold steady across chip generations in the sources checked. Apple lists the same 3456 by 2234 panel for the 16-inch Pro in its 2021 and 2023 spec pages, and the 13-inch Air shows 2560 by 1664 from the M2 generation through the M4.
So a frame built for one generation fits the next, even when the chassis and chip move on.
Match the frame to the model’s screen resolution and the design lands on the glass without resampling. A frame built at half the native width needs a 2x export to reach the same pixel count.
Build the screen at that size before touching a frame. If the layout doesn’t exist yet, designing the site itself in Figma comes first.
For dense dashboards and wide tables, the 16-inch Pro is the better pick, since the 3456-pixel width fits more columns before the screen feels cramped. The 13-inch Air makes more sense for consumer products. Apple’s March 2026 MacBook Air press release calls it the world’s most popular laptop, which is a decent argument for showing everyday users a machine they already recognize.
The 14-inch Pro and 15-inch Air sit in between. Go with whatever your audience actually owns.
Apple’s March 2026 refresh brought the MacBook Neo, the M5 MacBook Air and the MacBook Pro with M5 Pro and M5 Max (Apple Newsroom). LS Graphics already lists MacBook Neo sets in Figma, PSD and Sketch formats, but the Neo’s native resolution is on Apple’s own tech specs page, so pull it from there before sizing a frame.
Both Pro sizes and every MacBook Air since the M2 generation, in both 13-inch and 15-inch sizes, have a notch at the top center of the display, per 9to5Mac. The MacBook Neo does not. Keep key interface elements out of that strip.
Where to find MacBook mockup files for Figma
Most MacBook frames come from the free side, meaning Figma Community and Apple Design Resources, or from paid mockup libraries.
Free sources: Figma Community and Apple Design Resources
Figma’s own website mockups page lists a vector MacBook Pro and Air mockup among its free Community templates.
Orizon Art Studios has a free file that’s a good example of a decent one. It ships realistic, flat and wireframe styles in 16-inch and 13-inch sizes, so Pro and Air both get covered, with the screen at real resolution and linked components. Its Gumroad listing sets the price at pay what you want, starting from zero.
Before using any download, check that the screen frame matches the model’s native resolution and that the screen is an image fill or component you can swap. Check the model year against the device you want to show. And read the license, because it needs to cover client and commercial work.
Apple Design Resources hosts product bezels for placing screenshots in device frames, and Apple’s design talk says Figma users reach its UI kits and templates through the assets panel or the Apple Community page.
Formats vary by device. When Apple added bezels for the iPhone Duo and iPhone 18 Pro, the update shipped Photoshop and PNG files (9to5Mac), so check the format listed for the exact MacBook before planning around it.
Paid libraries and what the price adds
Paid libraries sell scenes and lighting, not a more accurate frame.
- LS Graphics runs $99 per year for the online editor, the Figma plugin and PNG or JPG export, and $144 per year adds Sketch and Figma file downloads (LS Graphics pricing).
- Neue Store sells a MacBook Pro M2 vector file for $10, with realistic, flat and custom color variations.
- Mockup Cloud has 10 MacBook Pro scenes in PSD and Fig at 5000 by 4000 pixels, delivered as a 2.9 GB download.
A 2.9 GB pack is heavy for a single hero shot. A $10 vector frame covers a flat client deck just as well.
Which plugins and outside tools build MacBook mockups from Figma designs?
Mockuuups Studio and the LS Graphics Mockup plugin drop a Figma frame into photo scenes without leaving Figma, and so does the Wannathis plugin. Rotato handles 3D renders. Placeit works in the browser only.
Prices are as listed on each vendor’s page, checked October 2026.
| Tool | Output and where it runs | Cost | Fails when |
|---|---|---|---|
| Mockuuups Studio | Photo scenes, Figma plugin | $15 per month or $120 per year | You deliver client work without the paid plan, which carries the commercial license |
| LS Graphics Mockup plugin | Photo scenes, Figma plugin and online editor | $99 or $144 per year | You need Sketch or Figma source files on the $99 tier |
| Wannathis plugin | Photo scenes matched to perspective, Figma plugin | Free and paid scenes | The scene you want is one of the paid sets |
| Rotato | 3D renders and video, Mac app | $89 one-time for laptops | You buy Basic at $79, which covers phones only, or you work on Windows without the web beta |
| Placeit | Template scenes, browser | $14.95 per month | You stay on the free account, where downloads are limited, often watermarked, and commercial rights come with the paid plan |
Rotato’s tiers come from its pricing page. Placeit’s plan terms are as Printify’s review lists them.
Mockuuups Studio or LS Graphics are the ones for client-ready scenes without leaving Figma. Wannathis works when free scenes are enough to start.
Going outside Figma means Rotato for 3D tilt, reflections and video, with laptops included from the Standard tier. Placeit is the fast option for template scenes when no Figma file is involved. Either way, you export the screen and re-import it after every design change, which gets old quickly.
A plugin is optional. A flat front view needs only a free vector frame and an image fill.
Free tiers also move. Artboard Studio’s pricing page limits its free plan to free mockup items, three projects, exports up to 720 pixels wide and personal use only, with the full library on paid plans. Test an export on a real project before building a workflow around any free plan.
The cheapest setup that works is one free vector frame for revisions and one paid photo scene for the final hero shot.
How to put a design into a MacBook mockup in Figma
Size the mockup’s screen frame to the design, fill it, and turn on Clip content so nothing crosses the bezel. Only a component instance stays linked to the original design.
- Duplicate the MacBook frame and select the screen layer, the placeholder inside the bezel.
- Resize the screen frame to the exact size of the design, so nothing gets scaled.
- Add the design as an image fill, a pasted frame, or a component instance.
- For an image fill, set the Fill mode to Fill when the aspect ratios match, or Crop to reposition it.
- Turn on Clip content for the screen frame.
- Zoom to 100% and check the corners and the top edge before exporting.
An image fill suits a static screenshot. A pasted frame keeps the design editable in place, and a component instance is the only version that updates with the original.
On fill modes, Fill covers the layer and may clip the image, Fit shows the whole image, Crop repositions it without destroying it, and Tile repeats it (Figma Help).
Using a mask crops the same way. A mask stops at a parent frame or at any frame with Clip content on, so frame-level clipping is the simpler default for a screen.
Figma scales any image fill larger than 4096 pixels on its longest edge down to that size (Figma Help). Every MacBook screen grid fits under the cap, but a full-resolution scene photo can exceed it.
Keeping the mockup linked to the design file
Instances of a component update automatically whenever the main component changes, according to Figma’s plugin documentation.
To use that, turn the screen design into a component, then place an instance of it inside the MacBook screen frame.
- An instance swap property switches between screens (home, pricing, checkout) without detaching anything.
- A variant property helps when one file holds several MacBook sizes.
- Keep the bezel and shadow layers outside the instance, so design edits never touch them.
It breaks with plugin scenes and image fills, which are flat pictures. Change the design and they stay old until the plugin runs again.
Shadows, glare, the notch and angle: making the mockup look real
Stack two drop shadows under the base, one tight and one wide, then lay a low-opacity gradient glare over the screen. The notch cutout and the viewing angle finish the effect.
Figma allows up to eight drop shadows on one layer (Figma Help), each with its own offset, blur radius, spread, color and blend mode. A dark, tight contact shadow plus a faint, wide ambient one reads as a laptop on a desk. A single soft shadow reads as a sticker.
For glare, draw a rectangle over the screen and fill it with a gradient running from white to transparent. Set a blend mode and low opacity, and clip it to the screen frame so it can’t spill onto the bezel. Soften the edge with a layer blur. Each layer accepts one.
The notch and camera cutout belong in the bezel layer above the screen, not inside the design. The design shows through around the cutout, and swapping screens never moves it.
Angle is the weak spot. Built-in rotation in Figma is two-dimensional as of October 2026, so a flat front view is the default. Tilted laptops come from photo scenes or from plugins that warp the design onto an angled screen.
Realistic frames suit the final hero and flat ones suit decks. Wireframe frames are for early reviews, where polish just distracts.
Two shadows and one glare layer beat a pile of effects that fights the screen content.
Export settings for MacBook mockups
Export as PNG at the scale that matches your target width, use JPG only when no transparency is needed, and treat SVG and PDF as special cases. The multiplier equals the target pixel width divided by the frame width.
| Format | Best for | Catch |
|---|---|---|
| PNG | Web heroes, decks, transparent cutouts | Lossless files grow large with photo scenes |
| JPG | Photo scenes on solid backgrounds | No transparency, and compression can soften small text (Figma Help) |
| SVG | Vector frames for sites | Photos inside stay raster |
| Shared or printed decks | Exports at 1x only (Figma Help) |
A 1000-pixel frame needs a 3x export to deliver a 3000-pixel hero. Figma also exports to a fixed width or height instead of a multiplier, per its developer documentation, which removes the arithmetic.
When a vector frame goes into a site, the difference between SVG and PNG decides whether it scales cleanly or stays a fixed bitmap.
For decks, exporting Figma to PDF works, but the 1x lock means a retina-sharp hero should leave as PNG.
For a transparent background, there are a few things to know:
- Hide or remove the fill on the exported frame, which is the standard answer on the Figma Community Forum.
- Keep Ignore overlapping layers on, because turning it off pulls in anything that intersects the selection (Figma Help).
- Test masks and effects before delivery, since a May 2026 forum report ties grey backgrounds to both.
Blurry exports usually come from a multiplier too low for the target width, or from raster content that never had enough pixels in the first place. A 4x export of a small screenshot enlarges it, it doesn’t sharpen it.
When a Figma MacBook mockup is the wrong tool
A Figma MacBook mockup is the wrong choice when the image needs a real camera angle, reflections, or a model Apple shipped after your frame was drawn. One older limit has moved, so check it before ruling Figma out.
Still a limit as of October 2026:
- Native 3D tilt is missing, and Figma’s Motion announcement lists 3D transforms as coming soon (Figma blog).
- Live perspective doesn’t exist. Plugin output is a warped copy, so the image goes stale when the design changes.
- Lighting and reflections stop at flat gradients.
Animation and video from a flat frame is no longer a limit. Figma Motion, in open beta, exports MP4, GIF, WebM and Animated SVG (Figma Help), though Starter plan users get limited exports (Figma blog).
Figma’s own pages say 3D transforms are on the way, while an October 2026 guide still says built-in transforms stop at resize, scale, rotate and flip (Pixel Fine Converter). Both statements fit together. It was announced in June 2026 and not released.
Until it ships, perspective is plugin work. Perspective Distort rotates a layer on all three axes up to plus or minus 90 degrees with a field of view from 0 to 180 degrees, and it creates transformed copies (Figma Community listing).
The Free Transform plugin fits a design onto a four-point shape drawn over a laptop photo, and its author says to run it again when the design changes (Figma Forum, October 2026).
Frame libraries also lag Apple. A MacBook Air bundle on Yellow Images ships Photoshop, Sketch and Figma files in Space Grey, Silver and Gold, while Apple’s March 2026 Air launch offered sky blue, midnight, starlight and silver (Apple Newsroom).
Licenses fail quietly. The Yellow Images free trial license bars public display, showcasing, portfolio and ad use, and its Standard license covers projects valued at 10,000 USD or less and excludes use in native and web apps or games (Yellow Images license terms).
Skip the frame when the point is a detailed UI state. A framed laptop shrinks the interface, so a cropped screenshot reads better.
Figma MacBook Mockups FAQ
Can I use Apple bezels and free Community files in client work?
Not automatically. Apple asks that product bezels used in marketing follow its marketing and identity guidelines, as 9to5Mac reported from its Design Resources page.
Free Community files carry terms set by each author, so read the license before delivery.
Can a MacBook mockup be animated inside Figma?
Yes. Figma Motion puts a timeline with keyframes on the canvas, so a flat frame can move through position, scale, rotation and opacity changes in the same file.
An orbit around the laptop is 3D work, which Rotato handles.
How do I make a dark mode MacBook mockup?
Change the screen design, not the frame. Apple’s design resources talk shows a UI kit frame switching to dark through the appearance setting in the Design panel.
For photo scenes, pick a night or dark-room scene from the plugin library.
Is it possible to draw a MacBook mockup from scratch?
Yes. A Tegra tutorial on Medium builds one from rectangles, gradients and layered shadows, with a keyboard rectangle placed in front of the screen.
The result is a generic laptop, so Apple’s own bezels remain the better base when exact proportions matter.
How do I show a MacBook next to an iPhone or iPad in one scene?
Start from a multi-device set. Figma’s template page lists Apple device mockups covering iPhone, Mac, iPad and Apple Watch, and Wannathis sells separate MacBook, iPhone and iPad scene sets, so check that their styles match before combining them.
Build each screen at its own native size before placing it.
Building One Reusable Figma MacBook Mockup File
The setup that saves the most time is one file with the screen design as a component and each MacBook model as a frame variant. A new project then means swapping a screen instead of rebuilding a scene.
Build the linked parts first and the static parts last. That means the screen component at native size, then one vector frame variant per model, and the photo scene for the final hero only.
That order limits a design change to one re-render, because everything ahead of the photo scene updates on its own.
The structure also absorbs hardware changes. MacRumors, citing Bloomberg’s Mark Gurman, reports a redesigned MacBook Pro with an OLED touchscreen between late 2026 and early 2027, and Macworld’s October 2026 roundup says Gurman expects an announcement as early as October or November (verified October 2026).
A new body means a new bezel layer. The screen component and its instances stay as built, unless the pixel grid changes.
The price is a flat look, with no tilt and no photographic light. The component structure behind the file is covered in more depth in best practices for Figma components.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- How to Insert Image in Figma With Ease - November 3, 2026
- How to Download Figma Files Fast and Free - October 30, 2026
- Figma Keyboard Shortcuts That Will 10x Your Speed - October 25, 2026
