Figma Plugin
Capture website screenshots directly into your Figma canvas
Figma plugin
Capture website screenshots directly into your Figma designs. Perfect for creating mockups, responsive design presentations, and visual documentation without leaving Figma.
Install: Figma Community
Installation
Open Figma
Open any Figma design file where you want to use the plugin.
Install from Figma Community
Go to Resources (Shift+I) → Plugins → Search for "AllScreenshots" → Click Run or Save to install.
Alternatively, visit the Figma Community page and click Open in Figma.
Run the plugin
Right-click on the canvas → Plugins → AllScreenshots, or use the Resources panel to run it.
Quick start
Set up your API key
Get your API key from the dashboard. Click the settings icon (gear) in the plugin and paste your API key.
The free tier includes 100 screenshots per month. Your API key is stored securely in Figma's local storage.
Enter a URL
Type or paste any website URL in the input field. Press Enter or click the Capture button.
Screenshot inserted
The screenshot is automatically inserted onto your canvas as an image fill. The viewport centers on the new image and selects it for immediate use.
Features
Device presets
Choose from 50+ device presets across desktop, mobile, and tablet categories. Select a category tab, then pick a specific device from the dropdown.
Main options
| Option | Description |
|---|---|
| Block Ads | Remove advertisements from the captured page |
| Hide Cookies | Remove cookie consent banners and GDPR popups |
| Full Page | Capture the entire scrollable page instead of just the viewport |
| Dark Mode | Render the website in dark color scheme (if supported) |
Custom dimensions
Select the Custom tab to specify exact pixel dimensions. Width and height can range from 100 to 4096 pixels.
Device presets
Desktop
| Device | Resolution |
|---|---|
| Desktop HD | 1920 x 1080 |
| Desktop Large | 2560 x 1440 |
| Laptop | 1440 x 900 |
| Laptop Small | 1280 x 800 |
Mobile
| Device | Resolution |
|---|---|
| iPhone 15 Pro Max | 430 x 932 |
| iPhone 15 Pro | 393 x 852 |
| iPhone 15 | 393 x 852 |
| iPhone 14 Pro Max | 430 x 932 |
| iPhone 14 | 390 x 844 |
| iPhone SE | 375 x 667 |
| Pixel 7 Pro | 412 x 892 |
| Pixel 7 | 412 x 732 |
| Samsung Galaxy S23 | 360 x 780 |
| Samsung Galaxy S21 | 360 x 800 |
Tablet
| Device | Resolution |
|---|---|
| iPad Pro 12.9" | 1024 x 1366 |
| iPad Pro 11" | 834 x 1194 |
| iPad Air | 820 x 1180 |
| iPad | 810 x 1080 |
| iPad Mini | 768 x 1024 |
| Surface Pro 7 | 912 x 1368 |
| Galaxy Tab S7 | 800 x 1280 |
Advanced options
Click Advanced options to expand additional settings:
| Option | Description |
|---|---|
| Format | Output format: PNG (default), JPEG, or WebP |
| Quality | Quality level for JPEG/WebP (1-100%). Higher values produce larger files with better quality. |
| Delay | Wait time in seconds (0-30) before capturing. Useful for pages with animations or lazy-loaded content. |
| Selector | CSS selector to capture a specific element instead of the full viewport (e.g., #hero, .product-card). |
| Custom CSS | Inject custom CSS before capture. Useful for hiding elements or adjusting styles. |
| Hide selectors | Comma-separated CSS selectors for elements to hide (e.g., .popup, #banner, .chat-widget). |
Examples
Capture after animations complete:
- Set Delay to 2-3 seconds
Capture specific element:
- Set Selector to
.hero-sectionor#main-content
Hide distracting elements:
- Set Hide selectors to
.newsletter-popup, .chat-widget, #sticky-footer
Custom styling:
/* Hide navigation and increase contrast */
nav { display: none !important; }
body { background: #fff !important; }Large image handling
Figma has a maximum image dimension of 4096 x 4096 pixels. When capturing full-page screenshots that exceed this limit, the plugin automatically:
- Detects oversized images
- Splits them into a grid of smaller chunks
- Creates separate image rectangles for each chunk
- Groups all chunks together for easy manipulation
This allows you to capture extremely long pages while maintaining full resolution. The chunks are precisely positioned so the complete image appears seamless.
Settings and usage
Click the settings icon (gear) in the top-right corner to:
- Enter or update your API key
- View your current usage and remaining quota
- See your plan tier (FREE, PRO, etc.)
- Check when your monthly quota resets
Use cases
Design mockups
Quickly insert real website screenshots into your design mockups. Capture competitor sites, reference designs, or your own staging environment.
Responsive design documentation
Use different device presets to capture the same URL across desktop, tablet, and mobile. Compare layouts side-by-side in your Figma file.
Client presentations
Create presentation decks with actual website captures. Use full-page captures to show entire landing pages or specific sections.
Visual QA
Capture staging or production sites to document bugs, review implementations, or create before/after comparisons.
Content placeholders
Replace placeholder images with real website captures during the design process. Update them as the actual site evolves.
Troubleshooting
Invalid API key
Ensure your API key is correct and active. Get a new key from the dashboard.
Quota exceeded
Your monthly screenshot limit has been reached. Upgrade your plan or wait for the next billing period.
Screenshot timeout
Some complex pages may take longer to render. Try increasing the Delay setting or capturing a specific element with Selector.
Image not appearing
Check that you have an active Figma file open with edit permissions. The screenshot is inserted at the center of your current viewport.