Capture a page or the specific section you want to study, place it on a design canvas, and label it with its source URL and the design detail it illustrates. A useful inspiration-board thumbnail makes one idea easy to compare—not a whole website so small that its details disappear.
How do I make website thumbnails for a web design inspiration board?
- Choose a design question. Decide whether you are collecting examples of navigation, hero layouts, card grids, typography, or another feature. Capture the page or section that answers that question.
- Capture the reference. A browser screenshot works when you need a flat image. If you want to continue arranging or editing page elements in Figma, Figma documents using its Chrome extension to capture a production website page or section and paste it into Figma Design as editable layers for research and moodboards. The extension cannot capture privileged browser pages such as
chrome://URLs. See Figma’s instructions for capturing websites into Figma. - Place and label it. Arrange captures on a design canvas or board. Add the source page URL and a concise note about what to study, such as “mobile navigation” or “hero layout.” Group examples by the design question you are exploring.
- Make the examples comparable. For desktop-layout comparisons, use the same viewport for each capture. For responsive design, include distinct, clearly labeled desktop and mobile examples. These are practical board-making choices, not dimensions prescribed by Figma.
- Check the result at board size. Make sure the feature you want to discuss remains legible. A selected section can work better than a full-page capture shrunk until its details are unreadable.
Should the thumbnail be a screenshot or editable layers?
Choose based on what you need to do with the reference. A screenshot is a flat image that is quick to place and compare. Figma’s documented Chrome-extension workflow can bring a website page or section into Figma Design as editable layers, which is useful when arranging a research board. Editing those captured layers does not make the original website yours; retain the source URL and check reuse rights before distributing the board.
As an Amazon Associate I earn from qualifying purchases.
For motion, do not assume a browser copy preserves animation: Figma documents that a GIF copied directly from a browser becomes a static image in its paste workflow. Keep a link to the live source when movement or interaction is part of the design reference. See Figma’s copy-and-paste guidance.
What size should a website thumbnail be in Figma?
There is no single required size for every inspiration-board tile. Pick a size and crop that suit your board and comparison task, and avoid shrinking a full page so far that the relevant design detail vanishes.
#1 Best Overall
For a custom Figma file thumbnail
Figma recommends a 1920 × 1080 pixel (16:9) frame for a custom file thumbnail. This recommendation is specifically for the file thumbnail, not a universal website-screenshot or board-tile standard. Figma scales the selected frame to fill the thumbnail, and the displayed dimensions vary by display, so keep important content away from the edges and inspect the result in the file browser. In Figma Design, only frames can be selected as custom file thumbnails. In FigJam, you can use a section or a copied custom frame. See Figma’s custom-thumbnail instructions.
For an inspiration-board tile
Choose dimensions according to how the board will be viewed and what readers need to compare. Keep viewport sizes consistent when comparing similar layouts; label separate mobile and desktop captures when responsive behavior is the subject. These are workflow recommendations rather than Figma-mandated dimensions.
Rank #2
How should I organize and document references?
- Keep the source URL with every capture so you can return to the original page.
- Use short labels that name the feature under study, not vague notes such as “inspiration.”
- Group examples around a concrete question—such as header hierarchy or card layout—rather than collecting unrelated pages together.
- When interaction or animation matters, link to the live page as well as including a still image.
- Before sharing or publishing a board, check the relevant site, image, and logo terms for the intended use.
Rights and attribution for website thumbnails
Capturing a website does not by itself establish that you may publish or redistribute the resulting board. Keep attribution and source links, and check applicable terms when moving beyond private study. W3C’s intellectual-rights page states: “Screenshots MUST NOT be used to circumvent W3C’s logo usage policy.” That warning concerns W3C’s own logo policy; it is not a general legal rule for every site or jurisdiction. If you are unsure about public or commercial reuse, seek permission or qualified legal advice. See W3C’s intellectual-rights notice.
Or skip the browser setup
For a quick flat screenshot, ScreenshotNeo offers a one-request API. This cURL example saves a WebP capture of Stripe’s website; replace the target URL with the page you want to capture and use your API key.
Quick Recap
Best Value
Rank #3
- New
- Mint Condition
- Dispatch same day for order received before 12 noon
- Guaranteed packaging
- No quibbles returns
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides screenshot, page-info, and PDF-capture tools for AI agents. The free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 shots. Learn more at ScreenshotNeo, or sign up for 1,000 free screenshots a month, with no card required.
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.
