Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.

To create a website thumbnail in Figma, make a 1920 × 1080 px (16:9) frame, design the artwork inside it, then either choose Set as thumbnail for the Figma file or export the frame as a separate PNG or JPG. Figma permits custom thumbnails only from frames; an unframed group, component, or slice cannot be assigned directly.

The two outcomes are different: a file thumbnail helps people identify a Figma file or Community cover, while an exported image is an asset you can place on a website. This guide shows both workflows, explains sizing and export choices, and covers common failures.

Decide which kind of thumbnail you need

Before designing, decide whether the image belongs inside Figma or will be downloaded for a site.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Use case What you do in Figma What you receive Update method
Figma file thumbnail Assign a selected frame with Set as thumbnail A thumbnail shown for the file Edit the source frame and assign it again when needed
Website image Select a frame or draw a slice, configure Export, and export A standalone image file such as PNG or JPG Export a new version and replace the website asset
Community or plugin cover Use a 16:9 cover frame, commonly the Plugin / file cover preset An image prepared for a cover-style presentation Update the cover frame, then export or reassign it

You can prepare one source frame for both purposes. Keeping the artwork in a named frame makes the thumbnail easy to find and gives your team one place to make revisions.

#1 Best Overall
Wacom Intuos Small, Wired Graphic Drawing Tablet with Pen + Software
  • Wacom Intuos Small Graphics Drawing Tablet: Enjoy industry leading tablet performance in superior control and precision with Wacom's EMR, battery free technology that feels like pen on paper
  • Works With All Software: Wacom Intuos tablet can be used in any software program to explore new facets of digital creativity; draw, paint, edit photos/videos, create designs, and mark up documents
  • What the Professionals Use: Wacom's industry leading pen technology and pen to paper feeling makes it the preferred drawing tablet of professional graphic designers
  • Software and Training Included: Only Wacom gives you software with every purchase. Register your Intuos tablet and gain access to some of the best creative software and Wacom's online training
  • Wacom is the Global Leader in Drawing Tablet and Displays: For over 40 years in pen display and tablet market, you can trust that Wacom to help you bring your vision, ideas and creativity to life

Choose the right Figma thumbnail size

Figma’s documented recommendation for file thumbnails is 1920 × 1080 pixels, an aspect ratio of 16:9. It is a practical baseline for a website thumbnail too because the wide canvas survives reductions better than a tightly cropped design.

Create the frame

  1. Open the Figma design file and go to the page where you want the thumbnail source.
  2. Create a new frame.
  3. Set the frame width to 1920 and height to 1080 in the right sidebar.
  4. If your Figma workspace offers it in the frame presets, choose Plugin / file cover. The preset gives you a ready-made cover-sized frame; you can still edit its contents.
  5. Name the frame clearly, for example Website thumbnail — current. A descriptive name prevents someone from assigning a draft or an unrelated frame later.

The dimensions are a recommendation, not a requirement for every exported website asset. If a publisher gives you another ratio, create the source frame at that ratio and keep the important content inside its safe area. For a Figma file thumbnail, 1920 × 1080 remains the documented starting point.

Design a thumbnail that remains readable when small

A thumbnail is viewed at a much smaller size than the working canvas. Build the hierarchy for that reduced view rather than treating the frame as a miniature full webpage.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Use one clear subject

Choose the page, product, illustration, or device mockup that identifies the project fastest. Too many equal-size screenshots create visual noise. Make one element dominant and let supporting details stay secondary.

Rank #2
Sale
XPPen Deco 01 V3 10x6 Drawing Tablet, 16K Battery-Free Stylus, 8 Keys
  • Word-first 16K Pressure Levels: The upgraded stylus features 16,384 levels of pressure sensitivity and supports up to 60 degrees of tilt, delivering smoother lines and shading for a natural drawing experience. With no battery or charging needed, it operates like a real pen, making it easy for beginners to create effortlessly. This functionality helps novice artists develop their skills and explore their creativity without the intimidation of complex tools
  • Designed for Beginners: This drawing pad desinged with 8 customizable shortcuts for both right and left-hand users, express keys create a highly ergonomic and convenient work platform
  • Perfectly Adapted for Android: The XPPen Deco 01 V3 art tablet supports connections with Android devices running version 10.0 and above. It is recommended to download the XPPen Tools Android application, which adapts to your smartphone's screen aspect ratio, ensuring accurate mapping. It also supports mapping on Android screens with different aspect ratios in portrait mode
  • Large Drawing Space, Bigger Bold Inspiration: This expansive drawing pad has10 x 6.25-inch helps you break through the limit between shortcut keys and drawing area
  • Easy Connectivity for Beginners: The Deco 01 V3 offers USB-C to USB-C connectivity, plus adapters for USB C. This ensures easy connection to various devices, allowing beginner artists to set up quickly and focus on their creativity without compatibility concerns. Whether using a laptop, tablet, or desktop, the Deco 01 V3 provides a seamless experience, making it an ideal choice for those just starting their digital art journey

Keep text short

Use a concise title or label instead of a paragraph. Check the frame at a reduced zoom before assigning it. If the words cannot be read at the size your team normally sees in the file browser, shorten the copy or enlarge it.

Protect contrast and margins

  • Place text over a background with clear contrast; add a solid or translucent backing when an image makes lettering hard to read.
  • Leave generous margins around titles, logos, and the main subject so reductions do not make the composition feel cramped.
  • Avoid placing essential details at the extreme edge of the 16:9 frame, where a consuming platform may display the image at a slightly different size.
  • Use a restrained palette and a consistent type treatment if the thumbnail represents a family of files.

These are layout practices, not extra Figma requirements. Figma’s documented requirements for a custom file thumbnail are the frame, its dimensions, and assigning that frame as the thumbnail.

Set a custom thumbnail for a Figma file

Once the artwork is inside a frame, assigning it takes only a few clicks.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  1. Select the finished frame on the canvas or in the Layers panel.
  2. Right-click the frame.
  3. Choose Set as thumbnail.
  4. Open the file browser or file details view to confirm that the new image appears as the file thumbnail.

Figma uses the first page’s contents for a file thumbnail by default. Choosing Set as thumbnail overrides that default with the specific frame you selected. Only frames can be used for custom thumbnails. If the command is missing, select the artwork, create a frame around it, and try again.

Rank #3
Sale
HUION Inspiroy H640P 6x4 inch Drawing Tablet 8192 Pen Pressure
  • Customize Your Workflow: The 6 customizable press keys on Huion H640P drawing tablet for pc let you assign your most-used commands—like undo, zoom, brush switch, or save—so you can keep your hands on the tablet and your mind on the art. Whether you're a digital painter switching brushes, or a comic artist zooming in and out, these keys keep your workflow smooth and uninterrupted. Plus, the Huion driver lets you save different shortcut profiles for different apps, so you never have to reconfigure when switching software.
  • Professional Pen Performance: Huion H640P drawing pad for computer comes with the battery-free PW100 stylus that's always ready when inspiration strikes. With 8192 levels of pressure sensitivity, every light sketch, or bold stroke responds naturally to your hand—just like a real pen. The 5080 LPI resolution and 233 PPS report rate deliver lag-free, precise strokes, so you can draw confidently without second-guessing your cursor. The pen side buttons help you switch between pen and eraser instantly.
  • Compact and Portable: Huion H640P computer graphics tablet features a compact, ultra-portable design at just 0.3 inches thin and 0.61 lbs light, so it slides easily into your backpack—perfect for sketching in coffee shops, taking notes in class, or editing on the go between home and studio. The 6x4 inch active area offers enough room for natural pen movements while fitting comfortably on crowded desks, or lecture hall seats.
  • Stable Compatibility: Huion H640P graphic drawing tablet works seamlessly with Mac, Windows, Linux PCs, and Android smartphones/tablets (OS version 6.0 or later). Left-handed friendly, and you just need to flip the tablet and adjust the settings in the driver. Please note: H640P does NOT support iPhone/iPad.
  • Move Beyond the Mouse: Huion Inspiroy H640P is a pen tablet that replaces your mouse for more natural, precise control. Freehand draw, take notes, or even play OSU—everything you do with a mouse, you can do better with a pen. The precise tip makes it ideal for detailed photo editing, graphic design, or signing PDF. Meanwhile, the ergonomic pen grip helps you avoid the strain that comes from hours of using a mouse.

When the command is unavailable

  • You selected a group, component, or individual layer: wrap the artwork in a frame first, then select the frame itself.
  • You selected a slice: slices are useful for exporting regions, but they are not the object Figma accepts for a custom file thumbnail. Create a frame with the same bounds for the thumbnail assignment.
  • The wrong image appears: check that you right-clicked the intended frame rather than a nested layer or a similarly named draft.
  • The thumbnail looks stale: make the change in the source frame and use Set as thumbnail again. Assigning the frame is the explicit refresh action.

Export the thumbnail as a PNG or JPG

Use export when a website, CMS, documentation page, or social card needs an actual image file rather than a Figma file thumbnail.

  1. Select the thumbnail frame. If you need only part of the artwork, draw a slice around that region instead.
  2. In the right sidebar, find the Export section and add an export setting.
  3. Choose the required format, such as PNG or JPG, and choose the scale supplied by your website specification.
  4. Review the preview or filename, then click Export.
  5. Open the resulting file and check its dimensions, crop, text legibility, and transparency behavior before uploading it.

PNG or JPG?

  • PNG: use it when you need crisp interface text, flat graphics, or transparency.
  • JPG: use it for photographic or richly textured artwork when a smaller compressed file is more useful and transparency is not required.

The choice is an export decision; it does not change the frame used for the Figma file thumbnail. If a site has a strict maximum file size, export at the requested scale and inspect the result instead of assuming the 1920 × 1080 source will be acceptable unchanged.

Maintain thumbnails as the design changes

Keep a single source frame

Put the thumbnail artwork in one clearly named frame rather than scattering copies across pages. When the website title, hero image, or color changes, edit that frame first. This keeps the assigned file thumbnail and the next exported asset aligned.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Separate source and delivery concerns

The Figma thumbnail can contain guides or working layers while the exported frame should contain only what the website needs. Hide temporary annotations before exporting, and use a slice when the delivery crop differs from the full frame.

Rank #4
Sale
XPPen Artist 13.3 Pro V2 Drawing Tablet with Screen, 16K, Full-Laminated
  • PLEASE NOTE:XPPen Artist13.3 Pro drawing tablet Need to connect with computer,you need to use it with your computer or laptop, the 3 in 1 cable is included
  • Drawing Tablet with Screen: Tilt Function- XPPen Artist 13.3 Pro supports up to 60 degrees of tilt function, so now you don't need to adjust the brush direction in the software again and again. Simply tilt to add shading to your creation and enjoy smoother and more natural transitions between lines and strokes
  • Graphics Tablets: High Color Gamut- The 13.3 inch fully-laminated FHD Display pairs a superb color accuracy of 88% NTSC (Adobe RGB≧91%,sRGB≧123%) with a 178-degree viewing angle and delivers rich colors, vivid images, and dazzling details in a wider view. Your creative world is now as powerful as it is colorful
  • Drawing Pad: One is enough- The sleek Red Dial on the display is expertly designed with creators in mind, its strategic placement allows for natural drawing postures. With just one wheel, you can effortlessly zoom in and out, adjust brush sizes, and flip the canvas—all tailored to suit the habits of everyday artists. The 8 customizable shortcut keys allow you to personalize your setup, streamlining your workflow and enhancing creative efficiency
  • Universal Compatibility & Software Support:supports Windows 7 (or later), Mac OS X 10.10 (or later), Chrome OS 88 (or later), and Linux systems. Fully compatible with major creative software including Photoshop, Illustrator, SAI, and Blender 3D. Register your device to access additional programs like ArtRage 5 and openCanvas for expanded creative possibilities.

Check the update path

Changing the frame updates the design source, but a previously downloaded PNG or JPG does not change automatically. Export a replacement and update the website or content-management entry that references the old file.

Troubleshoot common problems

Symptom Likely cause Fix
Set as thumbnail is not in the menu The selection is not a frame. Place the artwork in a frame, select the frame boundary, and open the context menu again.
The thumbnail is cropped unexpectedly The source frame is not 16:9 or important content touches an edge. Use a 1920 × 1080 frame for the file thumbnail and move essential content inward from the edges.
Text is unreadable in the file browser The title is too long or was sized for the full canvas rather than a reduced preview. Shorten the title, increase its size, strengthen contrast, and inspect the frame at a smaller zoom.
The exported image includes unwanted layers You exported a larger parent frame or left working layers visible. Select the intended frame or slice, hide temporary layers, and export again.
The file has the old thumbnail after an edit The edited frame was not reassigned. Select the revised frame and choose Set as thumbnail again.
The website image has the wrong file type The export setting was left on a different format. Open Export, choose PNG or JPG explicitly, and export a replacement.

When a live website screenshot is the real requirement

A Figma thumbnail represents a designed composition. If what you actually need is a current image of a live URL, recreating a browser environment in Figma is unnecessary. ScreenshotNeo is a website screenshot API and MCP server for developers; it returns PNG, JPEG, WebP, or PDF from one GET request. It is the first alternative to try because it removes consent banners, popups, and chat widgets before capture, bills only clean shots, and has a $5 paid plan for 3,000 shots.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Or skip the browser setup

Use the API when the source is a live page rather than a Figma canvas. The complete parameter reference is in the ScreenshotNeo documentation.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

cURL

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

Python

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

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo has 63 capture options for production workflows: full-page screenshots with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets or a custom viewport, retina scale, PDF paper sizes and margins, page ranges, custom CSS and JavaScript, pre-capture clicks, hidden selectors, waits for selectors, delays or network idle, ad/tracker/request/resource blocking, custom headers, cookies, user agents and Authorization, timezone and geolocation, transparent backgrounds, image resizing, selectable cache TTLs, signed links for public image tags, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. Parameter names used by other screenshot APIs also work, which can simplify a migration.

Every response identifies its result with X-Page-Verdict and X-Billed headers. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; only clean shots are billed. An MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients, so an AI agent can request captures without a hand-built browser script.

Best Value
Sale
Drawing Tablet XPPen StarG640 Digital Graphic Tablet 6x4 Inch Art Tablet with Battery-Free Stylus Pen Tablet for Mac, Windows and Chromebook (Drawing/E-Learning/Remote-Working)
  • Battery-Free Pen: StarG640 drawing tablet is the perfect replacement for a traditional mouse! The XPPen advanced Battery-free PN01 stylus does not require charging, allowing for constant uninterrupted Draw and Play, making lines flow quicker and smoother, enhancing overall performance
  • Ideal for Online Education: XPPen G640 graphics tablet is designed for digital drawing, painting, sketching, E-signatures, online teaching, remote work, photo editing, it's compatible with Microsoft Office apps like Word, PowerPoint, OneNote, Zoom, Xsplit etc. Works perfect than a mouse, visually present your handwritten notes, signatures precisely
  • Compact and Portable: The G640 art tablet is only 2 mm thick, it's as slim as all primary level graphic tablets, allowing you to carry it with you on the go
  • Chromebook Supported: XPPen G640 digital drawing tablet is ready to work seamlessly with Chromebook devices now, so you can create information-rich content and collaborate with teachers and classmates on Google Jamboard’s whiteboard; Take notes quickly and conveniently with Google Keep, and effortlessly sketch diagrams with the Google Canvas
  • Multipurpose Use: Designed for playing OSU! Game, digital drawing, painting, sketch, sign documents digitally, this writing tablet also compatible with Microsoft Office programs like Word, PowerPoint, OneNote and more. Create mind-maps, draw diagrams or take notes as replacement for mouse
Plan Allowance and price
Free 1,000 shots per month, no card
Starter $5 for 3,000 shots
Growth $15 for 15,000 shots
Pro $39 for 60,000 shots
Scale $99 for 250,000 shots
Business $249 for 1,000,000 shots

Yearly billing provides two months free, and every feature is included on every plan. Start with 1,000 free screenshots a month with no card, then move to a paid plan when your capture volume requires it.

Practical checklist

  • Create a named 1920 × 1080 frame for a Figma file thumbnail.
  • Keep the subject, title, contrast, and margins readable at reduced size.
  • Use Set as thumbnail on the frame, not a group or slice.
  • For a website asset, select the frame or slice, choose PNG or JPG in Export, and inspect the downloaded file.
  • When the design changes, reassign the frame and replace any previously exported image.
  • For a live-URL capture, use ScreenshotNeo and verify the response headers before publishing.

Frequently Asked Questions

Can a thumbnail frame have a different name from the Figma file?

Yes. The frame name is an internal organizational aid; the file thumbnail is determined by the frame you explicitly assign with Set as thumbnail.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

How should a team hand off a thumbnail to a website editor?

Provide the exported PNG or JPG, its pixel dimensions, the intended display location, and the name of the Figma source frame so the editor can request a replacement without guessing which version is current.

When is a Figma thumbnail preferable to a live screenshot?

Use the Figma frame when you need a designed, stable preview of work in progress. Use a live screenshot service when the image must reflect the current rendered URL, responsive state, or page content.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.