How to Mockup a Social Media Post (2026)

Why Mockup a Post At All

The obvious case is pitch decks. A social campaign proposal that shows the actual posts as they'd appear in a feed is meaningfully more persuasive than one that shows plain text on a slide. Clients don't buy text; they buy feel. The visual weight of an X card, a LinkedIn post, and an Instagram square are all different, and the difference matters for whether a post lands. If you're selling a campaign and using generic text boxes, you're asking the client to do the mental rendering — and most clients won't.

The less obvious case is internal review. Every organization that does social at any scale has the same problem: someone writes the post in a Google Doc or Slack, someone else approves the copy, and then the person publishing realizes the character count is off, or the image crops wrong, or the hashtags push the call-to-action below the fold. The fix isn't more approval rounds — it's reviewing the post in its actual rendered form. Mockups let approval happen in the shape the viewer will see.

The third case is content about content — Twitter threads about Twitter posts, LinkedIn posts about LinkedIn dynamics, screenshot-driven criticism of competitor campaigns. You need a mockup when you want to reference what a post would look like without actually posting it, or when the post you want to reference has been deleted, or when you're making a hypothetical ("what if we'd said X instead?"). A real mockup beats a text description every time because the reader doesn't have to imagine — they can just look.

The fourth case, and the one people underestimate, is drafting itself. Seeing your post rendered in platform chrome changes how you edit it. Text that seemed punchy in a Notes app reads flat when you see the avatar, the timestamp, the action row beneath. Text that seemed long reads short once the platform's line-height and padding are applied. The mockup is a feedback loop, not just an output.

The Platform Card Is the Canvas

Every platform wraps your content in its own chrome, and the chrome is not decoration — it's the frame inside which the content has to work. X gives you a 40-pixel avatar on the left, a 15-pixel body font, a full-width image area with rounded corners, and an action row with five icons across the bottom. Instagram gives you a 32-pixel avatar in a header, then a square image that dominates the card, then a row of action icons, then a like count, then the caption below. LinkedIn gives you a 48-pixel avatar with the person's name and headline and timestamp stacked, then the body text, then the image at a 1.91:1 crop, then a reactions bar with clicked faces, then four full-width action buttons.

The chrome determines what catches the eye first. On X, the name and handle are the first thing scanned; on Instagram, the image is the first thing scanned and the caption is almost an afterthought; on LinkedIn, the first line of the post matters most because LinkedIn truncates aggressively after about three lines and shows a "see more" link. If you write a post that front-loads the punchline on LinkedIn, the first line is the punchline; if you bury it in paragraph three, the truncation algorithm buries it for you.

The typography differs too. X and Threads default to system font stacks (SF Pro on Apple, Segoe UI on Windows, Roboto on Android), which means the rendered post looks slightly different depending on the viewer's OS — sometimes noticeably so. LinkedIn also uses system fonts but pairs them with a tighter line-height, making LinkedIn posts feel denser than X posts of the same character count. Facebook has gradually shifted toward a custom web font (Optimistic Display) for headers, with system fallback for body, which gives Facebook posts a slightly softer visual weight than their Twitter-era ancestors.

For a mockup to be useful, these have to match. A "social post" template in Figma that ignores these differences is worse than no template at all — it gives a false sense of how the post will perform. The tool we built reproduces the current card chrome for each of the five platforms from real platform specs as of April 2026, and updates when platforms ship visible redesigns.

Character Limits Actually Are a Design Constraint

X still has a 280-character limit for unverified accounts (premium accounts can post longer, but the vast majority of published posts still fit within 280 because threads remain the cultural pattern). Instagram allows 2,200 characters in a caption but truncates after about 125 and shows a "more" link. LinkedIn allows 3,000 characters but heavily prioritizes the first 210 or so in feed view before the "see more" fold. Threads allows 500 characters and treats content length with less visual truncation than X, but the first two lines still do the work of hooking attention. Facebook's ceiling is absurdly high (63,206 characters) but practically, any post over about 400 characters gets visually collapsed to a "see more" link that most scrollers won't click.

These aren't just constraints — they're design constraints. A post that is 280 characters and reads as a complete thought is doing different work than a post that is 100 characters and uses white space to make a visual point. A LinkedIn post that's 150 characters and posed as a question reads as an invitation; the same question in a 1,000-character post reads as the conclusion of a lecture. Knowing the limit is less important than knowing where the fold is, because the fold determines what gets read before the reader decides whether to click "see more."

In practice, this means the opening line of any post is doing 80% of the work. On X: the first 140 characters. On LinkedIn: the first 210. On Instagram: the first 125. On Threads: the first line, which at default font sizes is around 60–80 characters on mobile. On Facebook: the first three or four lines. If your post doesn't hook attention in those character ranges, the rest of the content never gets read, regardless of how much effort went into it. A mockup lets you see the fold — literally, as a visual truncation — so you can feel whether the opening has done the work.

The tool displays a live character counter against the platform limit, highlighting in amber when you're within 40 characters of the limit and red when over. For platforms with a fold (LinkedIn, Facebook, Instagram), the visual truncation is rendered in the mockup itself so you can see where the cut happens.

The Aspect-Crop Trap

The single most common mistake in cross-platform social content is assuming one image works everywhere. It doesn't. Instagram's feed is 1:1 (square) or 4:5 (portrait); a 1.91:1 landscape image gets letterboxed with grey bars. LinkedIn prefers 1.91:1 or close to it; a 1:1 image gets padded on the sides. X accepts up to 16:9 and handles portrait orientations reasonably. Threads mirrors Instagram's expectations roughly (Meta tuned it toward the same aspect ratios the Meta apps already use). Facebook is the most forgiving but also crops hardest in mobile feed — portrait images get aggressive top-and-bottom crops that can eliminate faces and logos.

If you're producing one image for a multi-platform campaign, the only reliable answer is to design for the tightest crop (usually 4:5 or 1:1) and let the other platforms letterbox or pad. If you're producing platform-native variants, the image needs to be re-composed for each aspect ratio, not just cropped. A good mockup tool lets you preview the same image across each platform's actual aspect crop so you can see the face cut off at the forehead on LinkedIn before you discover it in production.

The parallel issue is text in images. Twitter/X used to enforce a 20%-text rule for advertising (now relaxed); Facebook still downranks image ads with heavy text overlay (though the hard rule is gone). On organic posts none of this is a rule, but all of it is still a quality signal. The mockup shows you the image at the size the viewer will see it; text that looked legible in your 4000-pixel source file often becomes unreadable at the 540-pixel wide Twitter preview, and knowing that before you publish is the entire point.

When You Actually Need a Mockup

Client pitches are the most obvious case. If you're proposing a social campaign, showing the actual posts as they'd appear in-feed is table stakes in 2026; showing plain text is a tell that the agency hasn't thought about how the posts will actually perform. Most agencies use Figma or Sketch with hand-drawn approximations of platform chrome, which is fine but drifts from reality as platforms redesign. A purpose-built mockup tool stays current.

Internal review and approval workflows benefit even more. Content teams that review posts as plain text inevitably discover issues at the last minute: the truncation is wrong, the image crops badly, the CTA is below the fold. Reviewing posts in rendered form catches these issues at approval time instead of at publish time, when fixing them means re-shooting assets or rewriting copy. The cost of a mockup tool is essentially zero; the cost of a late-stage rewrite on a client-facing post is meaningful.

Design reviews and critiques often use mockups to show "what could have been." A designer critiquing a competitor's recent campaign, a content strategist proposing an alternative headline, a consultant showing a before-and-after — all of these benefit from seeing the post in its native chrome rather than transcribed into a slide. The mockup preserves the texture of the original medium in a way that a bullet point cannot.

Educational and tutorial content is another case. Articles about social media strategy, books about platform mechanics, training courses for content managers — any of these benefit from realistic examples that aren't real posts. Using real posts as examples carries legal risk (defamation, right of publicity, copyright on attached images) and ethical risk (dragging real people into your training material). A mockup labeled as such is clean.

Satire and critique is the edge case. Mockups that imitate a real person or brand close enough to be confused for a real post can cross legal lines — defamation if the statement is injurious and mistakable for real, right of publicity if used commercially without consent, trademark if a brand's mark is used deceptively. The tool allows any content; the legal and ethical consequences are on the producer. A mockup clearly labeled as satire or hypothetical is generally safe; a realistic mockup presented as genuine is riskier.

The 60-Second Mockup Workflow

Step 1 — Pick the platform. The platform determines everything else: avatar size, character limit, aspect crop, action row, typography weight. The tool's five platform buttons (X, Instagram, LinkedIn, Threads, Facebook) switch the card chrome instantly; all other fields stay populated so you can see how the same post reads across platforms.

Step 2 — Set the identity. Name and handle are the bare minimum. For LinkedIn, add the headline (the one-line role description that appears under the name). Optionally add the verified checkmark — every platform has its own meaning for that mark (X's blue check is paid Premium; LinkedIn's blue check is identity-verified; Instagram/Facebook's blue check is public figure or brand). Pick what applies to the account you're mocking up, not what you'd like it to say.

Step 3 — Set the avatar. Upload a 512-pixel (or larger) square PNG or JPG — it'll be center-cropped to a circle by the platform chrome. If you don't upload one, the tool generates a deterministic colored-initials avatar from the name, which is the default fallback most platforms use for new accounts. Avatars are read in-browser via File API; nothing uploads.

Step 4 — Write the post. Paste or type into the post field. The character counter shows your current length against the platform limit, turning amber near the ceiling and red when over. If you exceed the limit, the card view clips the post at the limit so you can see what the platform would actually show. Hashtags and @-mentions get colored the platform's brand link color.

Step 5 — Attach an image (if relevant). Most platforms treat images as optional; Instagram treats them as required. Upload a PNG or JPG; the card shows the image at that platform's aspect crop. If the crop is ugly, this is the moment to find out — not after publishing. The same source image can be checked against all five platforms by toggling the platform selector.

Step 6 — Dial in the engagement numbers. Likes, replies, reposts, and the time-ago label can be set to whatever plausible numbers suit the scenario. A fresh post has single-digit engagement; a viral post has thousands. Setting realistic engagement for your mockup's narrative context is surprisingly important — a pitch deck showing posts with zero engagement reads as a failure mockup; the same posts with realistic numbers read as projections.

Step 7 — Export. Copy to clipboard pastes the PNG straight into Slack, Figma, Keynote, or whatever you're assembling. Download PNG gives you a file at 2x pixel density (retina resolution) for decks and print. Both are generated via html2canvas running entirely in your browser; nothing uploads, nothing logs, the file is yours.