Facebook Ad Mockup: How to Preview an Ad Properly
A Facebook ad mockup is a preview of how your ad will look in the feed before you publish it, and the only mockup worth trusting is the one Meta generates itself inside Ads Manager. A mockup built in a design tool shows what you drew, not what Meta will actually render. Those two things differ in ways that cost money.
The gap is always the same three things: where the text gets cut off, how the image gets cropped in each placement, and what the interface covers up.
Why do design-tool mockups mislead?
Because they draw a picture of an ad rather than simulate one.
Primary text collapses after a couple of lines behind a "See more" link on mobile. Your mockup shows the whole paragraph. Real users see the first sentence and a bit.
Aspect ratios get cropped per placement. A square image in a feed, a vertical crop in Reels and Stories, something else again in the right column. One flat mockup cannot represent all of them at once.
Interface elements sit on top of the creative. In vertical placements, the profile name, caption and call-to-action button occupy the top and bottom of the frame. Anything important you placed there is behind a button.
How do you preview a Facebook ad properly?
Use Meta's own renderer. Inside Ads Manager, at the ad level, the preview pane shows your creative in each eligible placement, and you switch between them from a dropdown.
Work through the placements you are actually buying, one at a time. Feed, Reels, Stories, Explore, whatever your ad set includes. Each placement is a different crop of the same asset, and each one can break differently.
You can also generate a shareable preview and send it for approval, which is how a client or a founder sees the ad without needing access to the ad account. Meta offers a few sharing routes, including a link. What you send is a real render, not a picture of one.
- 1BuildMake the asset at the right ratio for its main placement
- 2PreviewSwitch through every placement in Ads Manager's preview pane
- 3ShareSend a preview link for approval, not a screenshot
- 4Phone checkOpen it on an actual phone before approving
- 5PublishLaunch only after the worst-cropping placement still reads
What aspect ratios should the mockup use?
Build for the placement that will get most of your delivery, then check the rest.
| Placement | Working ratio | Watch out for |
|---|---|---|
| Feed (Facebook, Instagram) | 1:1 or 4:5 | Primary text truncating after ~1-2 lines on mobile |
| Reels | 9:16 | Caption and CTA covering the bottom of the frame |
| Stories | 9:16 | Profile row at the top, tap zones at the sides |
| Right column (desktop) | 1:1 | Tiny render, so fine detail and small type disappear |
4:5 is the workhorse for feed because it takes more vertical screen than a square without the crop risk of full vertical. The full breakdown of Meta ad formats covers what each one is for.
Where can you get real mockup references?
The Meta Ad Library, which is free and needs no account. It shows every ad currently running from any advertiser worldwide, rendered the way Meta renders it.
That makes it the best reference library for mockups that exist, because none of it is imagined. You are looking at live creative from brands who have already had their previews break and fixed them.
A few ways to use it:
- Check how competitors handle text placement in vertical video. Where do they put the offer? Almost never the bottom third.
- See which ratio a category defaults to. If everyone serious in your niche runs 4:5, that is a hint.
- Read the "Started running on" date. Long-lived ads have survived real delivery, so their layout decisions have been tested by money rather than opinion.
How to use the Meta Ad Library covers searching it properly, and Facebook ad examples walks through what to look for once you're in there.
That last point is why we built our free extension. The Klipio Meta Ad Library downloader adds a download button to every ad inside the library, saves videos in original HD and complete carousels, and its bulk mode packs a whole search into one ZIP with a searchable swipe board and a CSV of every ad. It is free with no account, and it is ours, so treat that as disclosed rather than neutral.
What should a mockup review actually check?
A short list, run on every ad before it goes live.
- First line of primary text. Does the ad still make sense if everything after "See more" is invisible?
- Headline length. Does it truncate in the placement you care about most?
- Safe zones in vertical. Is anything important in the top or bottom 15% of a 9:16 frame?
- Legibility at thumbnail size. Shrink the preview to about the size of a stamp. Can you still tell what it is?
- The first frame of video. Static previews show a frame; make sure it's a frame that sells.
- The CTA and destination. Does the button promise the same thing as the page it opens?
Do you need a mockup template at all?
For internal work, no. Meta's preview beats any template because it is the real renderer.
Templates earn their place in one situation: pitching. If you are showing a prospect what you would run for them, you don't have an ad account to build in, so a mockup is the only option. Keep it honest, show the truncated version, and say plainly that final rendering will be checked in-platform.
For anything you actually intend to publish, build the ad, preview it, share the preview link, then approve.
FAQ
What is a Facebook ad mockup?
It's a visual preview of how an ad will look in Facebook or Instagram before it runs. The reliable version is generated by Meta inside Ads Manager, which renders your real creative in each placement; a mockup drawn in a design tool only shows your artwork, not the platform's cropping and truncation.
How do I preview a Facebook ad before publishing?
Open the ad at ad level in Ads Manager and use the preview pane, switching through every placement your ad set includes. You can also generate a shareable preview to send for approval, which shows the real render to someone without ad account access.
Why does my ad look different from my mockup?
Three reasons, usually together: primary text collapses behind "See more" on mobile, the image is cropped differently per placement, and interface elements like the caption and call-to-action button sit on top of vertical creative. All three are invisible in a flat design file.
What size should a Facebook ad be?
1:1 or 4:5 for feed placements and 9:16 for Reels and Stories. Build at the ratio of the placement that will get most of your delivery, then check every other placement in the preview before publishing.
Where can I find real Facebook ad examples to copy the layout from?
The Meta Ad Library at facebook.com/ads/library, free and with no account, shows every ad currently running from any advertiser. Ads that have been live for months have already survived real delivery, so their layout choices are tested rather than theoretical.
Can I make a Facebook ad mockup without an ad account?
You can build a static mockup in any design tool, which is normal for pitching work. Just be aware it will overstate how much text is visible, and confirm the real rendering in Ads Manager before anything is published.
The Klipio extension adds a download button to every ad in the Meta Ad Library: one click per ad, or bulk-save a whole search as a ZIP with a searchable swipe file inside. Free, no sign-up.
Get the free extension
