Published March 10, 2026
Design reviews go faster when mockups look finished. The problem is that real photography and illustrations are rarely available at the wireframe stage. Off-brand stock photos distract stakeholders, and generic grey rectangles fail to communicate aspect ratios or content hierarchy. Custom placeholder images — sized to your frames, colored to your palette, labeled with component names — give Figma mockups a polished, intentional appearance without waiting on the asset pipeline.
When stakeholders see grey boxes where images should be, the conversation shifts. Instead of discussing layout, hierarchy, and copy, reviewers ask about the images: what goes here? What size? What's the tone? Answering these questions mid-review interrupts the feedback loop and creates action items that obscure real design decisions.
On-brand placeholder images reframe the review. A placeholder that matches your brand color and carries a label like `Feature / Hero / 1440×600` communicates intent clearly. Stakeholders understand that this is a placeholder, but they can evaluate the layout without mentally filling in the image themselves.
Open your Figma file and select each frame that contains an image element. Note the frame width and height from the right-hand panel. For responsive designs, collect the key breakpoint sizes — desktop, tablet, and mobile — for each component type.
Common Figma frame sizes to placeholder:
- **Hero banner**: 1440×600, 1280×520, 768×400, 375×280 - **Card thumbnail**: 400×225 (16:9), 400×300 (4:3) - **Avatar**: 48×48, 64×64, 96×96 - **Article cover**: 1200×630, 800×420 - **Product image**: 600×600, 400×400 (square)
Paste these into PlacePack one per line. Use the label prefix to associate each size with its component: `hero:1440x600`, `card-thumb:400x225`.
PlacePack lets you set a global background color and text color, then override both per item. Use your brand's primary color as the default background and white or a light neutral as the text color. This immediately differentiates your placeholders from the default grey that every other tool generates.
For a multi-brand or multi-theme project, generate separate packs for each theme. Store them in distinct subdirectories — `assets/placeholders/light/` and `assets/placeholders/dark/` — and swap them at the Figma component level using frame fills.
Download the ZIP from PlacePack and extract the PNG files. In Figma, select an image fill layer and use the image picker to load the matching placeholder. The filename convention `{label}_{w}x{h}.png` makes it easy to find the right file in the picker without guessing.
For a more efficient workflow, import all placeholders at once using the Figma plugin API or a community plugin that supports batch image imports. Once imported, each placeholder is stored in the Figma file and travels with it when shared — no external dependencies.
Suggested filename convention
hero_1440x600.png
hero_768x400.png
hero_375x280.png
card-thumb_400x225.png
avatar_64x64.png
article-cover_1200x630.pngInteractive prototypes shared with users or stakeholders should look as close to finished as possible. When a prototype contains real placeholder images (rather than empty frames or generic stock), users focus on the interaction flow rather than questioning what the images represent.
Use the share link from PlacePack to embed a reference to the exact placeholder configuration in your Figma file description or design spec. When the real assets arrive, replace the placeholders one-to-one — the frame sizes are already correct, so no layout adjustments are needed.
Design handoff works smoothly when developers receive images that are the right size for every breakpoint. Share the PlacePack link in the design spec or Figma annotation so developers can regenerate or extend the placeholder set during implementation.
For component libraries, add the placeholder pack to your Storybook fixture directory alongside the design tokens export. Both designers using Figma and developers using Storybook will then reference the same visual language during the build phase.
Ready to generate placeholder images?
Open the generator with the right preset pre-loaded and download your pack in seconds.