How to Make Website Thumbnails for a Figma Community Resource List

A strong Figma Community thumbnail gives people a quick, accurate preview of the resource. In Figma Design, create a 1920 × 1080 frame with the Community file cover preset, place representative artwork inside it, then right-click the frame and choose Set as thumbnail. Figma requires a frame for a custom file thumbnail and scales that frame to fill the thumbnail display, so the recommended 16:9 size helps avoid awkward cropping.

1. Choose what the thumbnail should show

Start with the resource itself. For a website template or UI kit, show a representative page or a small selection of components. For a plugin, icon set, or other resource, show a useful example of what someone will find after opening the file. The preview should be recognizable and truthful to the contents.

Keep the composition simple and easy to scan at a small size. Figma recommends an eye-catching design, short scannable text, and a visual style consistent with your other resources. These are design recommendations, not a guarantee of more views or downloads.

2. Create the recommended frame

Open the resource in Figma Design.
Select the frame tool.
Choose the Community file cover frame preset. Figma’s thumbnail tutorial identifies this as a 1920 × 1080 frame.
Arrange the artwork within the frame, keeping important details away from the very edges so they remain clear when the thumbnail is displayed.

Figma recommends 1920 × 1080 pixels for Community thumbnail and preview imagery. The ratio is 16:9. Starting at the recommended dimensions makes it easier to compose for the displayed shape instead of relying on a later crop.

3. Design a useful preview

Show the resource, not a generic promotion. Use a real page, component, or visual sample from the file.
Make the subject obvious. A viewer should be able to tell whether the file is a website layout, illustration pack, wireframe kit, or another kind of resource.
Limit text. If a title or short label is useful, make it brief and readable when scaled down.
Use consistent styling. Align colors and type choices with your other creator resources so listings feel related.
Check small-size legibility. Zoom out in the editor and make sure the key subject remains understandable.

Before assigning the thumbnail, check that the frame is 1920 × 1080 and that the artwork inside it reflects what the published file contains.

4. Set the frame as the file thumbnail

Select or right-click the cover frame in the canvas.
Choose Set as thumbnail.
Confirm that the file thumbnail reflects the intended frame.

If the menu option is missing, verify that the artwork is inside a frame. Figma’s guidance says only frames can be used for custom file thumbnails. Figma scales the selected frame to fill the thumbnail display, which is why the recommended 1920 × 1080 frame is useful.

5. Plan the Community listing images

When publishing a Figma Design or FigJam file, you can add a thumbnail and up to nine more images to the listing carousel. Figma recommends 1920 × 1080 for these images too. Use supporting images to show different parts of the resource: for example, a page overview, component details, and a practical example.

Thumbnail choice	What it gives you	Consider it when
Static custom image	A selected frame as the thumbnail, with the option to add supporting carousel images	You want to show a fuller set of static previews
Prototype preview	An interactive prototype preview used as the thumbnail	Interactivity is the most useful first impression

Figma says that using a prototype preview as the thumbnail prevents uploading additional carousel images. Choose based on whether an interactive preview or several static views will explain the resource better.

The publishing flow also collects the resource name, description, category, tags, and a support contact. Treat the thumbnail as one part of a complete, accurate listing.

6. Capture a website example for your thumbnail

If the resource represents a website, you can capture a page and use that image as source material in your 1920 × 1080 cover frame. A browser screenshot is one way to get that source image. This example uses Playwright with Node.js to capture a page screenshot; the result is a source asset to place and compose in Figma, not a replacement for setting the frame as the thumbnail.

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({
  viewport: { width: 1920, height: 1080 },
  deviceScaleFactor: 1,
});

await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'website-preview.png' });
await browser.close();

Install the browser automation package in your Node.js project before running the script. Replace the example URL with a page you have permission to capture. For a long page, Playwright supports full-page screenshots with fullPage: true, but that output is taller than 16:9; crop or compose it into the cover frame rather than using it directly as the cover artwork.

7. Troubleshooting

Problem	Likely cause	What to do
“Set as thumbnail” is missing	The selection is not a frame	Put the artwork inside a frame and right-click the frame.
The preview looks cropped or cramped	The source frame has a different aspect ratio or important content sits at the edges	Use the 1920 × 1080 cover preset and reposition the artwork with safe space around key details.
The thumbnail does not represent the resource	The design is mostly decorative or shows only a minor detail	Replace it with a representative page, component, or sample from the published file.
There are no supporting carousel uploads available	A prototype preview was selected as the thumbnail	Use a static custom image if you want to upload additional carousel images.
The browser screenshot is blank or incomplete	The page may still be loading, or its content may depend on scripts or delayed resources	Wait for the relevant page content before capture, or capture a stable representative page you control. Check the resulting image before importing it into Figma.

8. Capture considerations: reliability, performance, and cost

A browser capture is useful when the thumbnail should show a real website state. Keep the source capture focused on the content you want to represent; full-page captures can be large and need composition to fit a 16:9 frame. Waiting for network idle can also take longer on pages with ongoing requests, so use it only when the page needs that wait. For a stable preview, check the captured file before building the final cover frame.

With a local browser automation setup, the main costs are your development and runtime resources. Hosted screenshot services instead charge according to their own plans and billing rules. If you capture pages you do not control, consent dialogs, popups, chat widgets, bot checks, or failed loads can affect whether the result is suitable; inspect the output before publishing it.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server from ScreenshotNeo. One GET request can return a screenshot in PNG, JPEG, or WebP, or a PDF. Use a captured website image as source material, then compose it into Figma’s 1920 × 1080 cover frame and set that frame as the thumbnail. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

Cookie banners are accepted and more than 60 known consent platforms, newsletter popups, and chat widgets are removed before the shot; each step can be turned off.
Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing. Responses identify the page verdict and billing status in headers.
An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents.
The free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is available on every plan.

Frequently asked questions

What size should a Figma Community thumbnail be?

Figma recommends 1920 × 1080 pixels, a 16:9 aspect ratio, for Community thumbnails and preview images.

Can I use a shape or group directly as the thumbnail?

No. Figma’s instructions say only frames can be used for custom file thumbnails. Place the artwork inside a frame and set that frame as the thumbnail.

How many extra images can I add to the listing?

A Figma Design or FigJam listing can have its thumbnail plus up to nine more images. A prototype preview used as the thumbnail prevents additional carousel uploads.

Does the thumbnail need to be a screenshot of the website?

No. It should represent the resource. A website screenshot can be useful source material, but you can also design a composed preview that shows the relevant file contents.