Creating an image placeholder in Figma means dropping a flat, correctly sized PNG into a frame so a layout reads as complete before the real artwork lands. The most reliable way to do this is to generate the placeholder image in your browser first, then drag or import it into Figma. A locally created PNG works offline, never changes because an external placeholder service changed its response, and matches the exact pixel dimensions of the frame you want to fill. Because the placeholder is a real PNG file on your computer, Figma treats it like any other image asset: it can be resized, masked, exported with the rest of the canvas, and swapped for the final artwork later. This approach also avoids installing a Figma plugin just for a rectangle with text on it, and it keeps drafts self-contained when you share a Figma file with collaborators.
What an image placeholder does in a Figma frame
A placeholder image in Figma is a stand-in asset that occupies the exact visual slot where a final photograph, illustration, screenshot, or product render will eventually appear. Instead of leaving a frame empty — which forces reviewers to imagine what belongs there — designers drop a labeled rectangle that communicates both size and intent. A common convention is to type the target dimension onto the rectangle itself, like 1200 × 630, so anyone looking at the file can tell at a glance which aspect ratio and resolution the slot expects.
Placeholders are most useful in three moments of a design workflow: low-fidelity wireframes where the focus is layout and hierarchy, mid-fidelity mockups where copy and structure are nearly final but real photography is still pending, and design hand-offs where a developer needs to see exactly where and how large each image will be in the build. In all three cases, the placeholder answers the same two questions every reviewer asks: how big is this slot and what kind of image goes here.
Why a local PNG is often the better placeholder
Figma offers several ways to fill a frame with a placeholder. You can draw a rectangle and type text on it, install a community plugin that drops in stock-style graphics, paste in a remote placeholder URL, or import a PNG you generated yourself. Each method has trade-offs, and the right pick depends on whether you care most about visual realism, file portability, or privacy. A remotely hosted placeholder URL, for example, stops working the moment the service changes its response, redirects, or goes offline — a real risk for files that ship to clients or sit in long-lived documentation.
| Approach | Works offline | Shows real dimensions | Needs a plugin or URL | Stable across edits |
|---|---|---|---|---|
| Local PNG from Placeholder Image Generator | Yes | Yes (label baked in) | No | Yes — file never changes |
| Figma rectangle plus text | Yes | Only if you type it | No | Yes |
| Community placeholder plugin | Depends on plugin | Usually no | Yes | Can break on updates |
| Hosted placeholder service URL | No (needs network) | Sometimes | Yes (third-party) | No — service can change |
A locally generated PNG hits the practical sweet spot for most Figma work: it looks intentional, it announces its size, it does not depend on any third party, and it can travel inside a shared Figma file as a regular image asset. The same file also works as a fixture when you screenshot the frame later, since the label tells you what size was rendered.
Make an image placeholder for Figma with Placeholder Image Generator
The Placeholder Image Generator creates the PNG file you will drop into Figma. Canvas drawing, text rendering, PNG encoding, preview, and download all run inside the browser tab, so nothing is uploaded to a server. Use it once per slot, or in a batch when a single mockup screen needs several different placeholders.
- Enter the exact output width and height in whole pixels. Match the dimensions of the Figma frame you want to fill; each side is accepted from 1 to 10,000 pixels, subject to a combined 40-megapixel canvas budget.
- Choose background and text colors with the native color pickers. Both use six-digit hex values; the background paints across the entire canvas and the text is drawn in the foreground color, with no automatic contrast adjustment, gradient, or transparency.
- Optionally replace the default dimension label. Leave it blank to print the validated size (for example 1200 × 630), or type a short string up to 80 Unicode characters — the tool trims whitespace, centers the text horizontally and vertically, and shortens it with an ellipsis if it would otherwise overflow the canvas.
- Select Create placeholder, then check the result line for the exact dimensions, the label that was actually rendered, and the approximate file size.
- Download the PNG. The file is named placeholder-WIDTHxHEIGHT.png, which makes it easy to recognize in a folder of mockup assets.
If a single placeholder is not enough for a full mockup screen, repeat the steps for each slot. Because the preview on the page may be visually scaled to fit your screen, always trust the dimensions printed in the result line, not the on-screen size, when matching the asset to a Figma frame.
Drop the generated PNG into a Figma frame
Once the PNG is on your computer, adding it to Figma is a matter of pointing and clicking. The sequence below works in the Figma desktop app and in the browser.
- In Figma, select the frame you want to fill. Note its width and height from the right-hand properties panel — match those numbers in the Placeholder Image Generator so the asset drops in at the right size.
- Drag the downloaded placeholder-WIDTHxHEIGHT.png from your file explorer straight onto the Figma canvas. Figma imports it as an image layer placed at the cursor.
- If the frame already has a Fill set to Image, drag the file onto the frame thumbnail in the layers panel instead — Figma replaces the fill rather than creating a separate layer on top.
- Resize the imported image to match the frame exactly. Use the position and size fields in the right-hand panel to type the target width and height, or press K for the scale tool and constrain proportions with Shift.
- Right-click the image layer and choose Set as thumbnail if the frame lives inside a component — that keeps every instance of the component referencing the placeholder until you swap in the final asset.
- When the real artwork arrives, replace the placeholder layer with the final image in the same way. The frame size and position do not move, so the surrounding layout stays intact.
For larger mockup sets, File → Place Image → Multiple lets you import several placeholders at once and lay them out in a grid you can then drag into the right frames. Naming the downloaded PNGs with their target slot — hero.png, avatar-1.png, product-card.png — keeps the Figma layers panel readable even before you start dragging.
Common Figma frame sizes worth pre-baking
Pre-generating placeholders at standard sizes saves time when you know the same mockup will appear in several contexts — a social share card on top of a landing page mockup, for instance, or a hero image that doubles as an Open Graph preview. The list below uses widely used conventions; Figma itself does not enforce them, and your design may need different ratios.
| Use case | Typical width × height (px) | Why pre-bake it |
|---|---|---|
| Social share / Open Graph image | 1200 × 630 | Matches the conventional large preview rectangle |
| Wide hero banner on a landing page | 1920 × 720 | Common desktop hero aspect ratio |
| Square product card | 800 × 800 | Same asset fits grids, carousels, and profile thumbnails |
| Mobile screen mockup | 390 × 844 | Common modern phone viewport baseline |
| Avatar / circular profile | 512 × 512 | Forces a square source before any circular crop |
Starting from a familiar size means the placeholders you generate line up with what your build environment expects later. If the design eventually moves to a different ratio, regenerate the placeholder at the new dimensions rather than stretching the existing one — Figma will resample it and the label will still match the new render size.
How the Placeholder Image Generator produces the PNG
It helps to know what is happening under the hood when you generate a placeholder, because the same mechanics explain why the tool behaves deterministically. After the form is submitted, the generator validates the width and height as whole numbers inside the 1 to 10,000 range per side and confirms that the total pixel count does not exceed the 40-megapixel budget. It then normalizes the two color inputs into six-digit hex values, chooses either your custom label or the validated dimensions as the rendered text, and trims the label to 80 Unicode characters.
A canvas element is created at exactly the validated width and height in natural pixels. The background is painted across the whole canvas using the standard fillRect drawing primitive, and the label is rendered with the browser's built-in text drawing API, centered horizontally and vertically. Font size scales from the shorter image side, with a minimum of 12 pixels and a maximum of 96 pixels. The canvas is then encoded into a PNG via the browser's toBlob mechanism, which produces a flat, broadly supported file with no compression artifacts around the text. The downloadable object URL is revoked whenever any input changes, so a stale preview is never mistaken for the current settings.
Because no remote service, AI model, or external image is involved, the result is fully reproducible: the same dimensions, colors, and label always produce the same PNG. That determinism is useful when a placeholder doubles as a fixture for screenshot tests or visual regression checks against the Figma frame.
Tips for predictable Figma placeholders
- Pick a background color from your existing design tokens. A neutral gray like #e5e7eb reads as "placeholder" without shouting, and dark mode files can use #1f2937 with a light label.
- Choose foreground and background combinations that pass a quick contrast check. The tool does not adjust contrast for you, so a light gray label on a light gray background will be hard to read in the Figma canvas.
- Use the default dimension label during early wireframes so anyone reviewing the file knows the target render size at a glance. Switch to a semantic label — hero-photo, product-shot, avatar-1 — once the slot's role is locked in.
- Keep the original PNG alongside the Figma file. If you later need to recreate a mockup at a different resolution, the generator can rebuild a new asset at the new dimensions in seconds without you having to redraw anything.
- If you need to invert or recolor a placeholder after dropping it in, a separate Figma-friendly local invert workflow can repaint the pixels without leaving the browser.