→ Get the file on Figma Community
Shots.so is genuinely well-designed. Animated mockups, magic backgrounds, one-click export — it nails the workflow. If you need it fast and don't want to build anything, go use it. This resource exists for a different situation.
When you don't want to pay for a subscription — and want to own it outright, with your actual brand tokens, your color system, your border rules — you build it in Figma once and it's yours forever.
This is that system. Same layer logic, same border styles, same atmosphere approach. Yours to fork, modify, and publish from without ever hitting a paywall.
Note
One-time setup. After that it's fast, flexible, and expandable — add your own layers, your own styles, your own rules. It grows with you.
Every template is built on a consistent 5-layer stack inside a [MOCKUP] group. Understanding this structure is how you take full control of the output.
[YOUR BACKGROUND] ← full-bleed bg — image, color, gradient
[OVERLAY] ← vignette — don't touch
[MOCKUP]
├── [SHADOW] ← drop shadow or glow effect lives here
├── border ← the frame border — fill, stroke, effects
├── [YOUR SCREENSHOT] ← your content goes in here as a fill
├── [FRAME] ← decorative inner detail — don't touch
└── [LIGHT] ← gloss/reflection — don't touch
How to Update Each Layer
Background
[YOUR BACKGROUND]← image / color / gradient
Select ← YOUR BACKGROUND in the layers panel. In the Fill section on the right, click + and choose Image to drop in a photo, or set a solid color or gradient. This is the full canvas behind the mockup.
Swap per postScreenshot
[YOUR SCREENSHOT]← your content as image fill
Select ← YOUR SCREENSHOT in the layers panel. In Fill, click + → Image. Use fill mode (Fill, Fit, Crop) to control how it sits inside the frame. Your screenshot stays perfectly clipped — including corner radius.
Swap per postBorder Style
border← Properties panel dropdown
Click the template once. In the right panel under Properties, use the Border dropdown to switch between Solid, Light Glass, Dark Glass, Liquid, and Outline. Changes apply instantly.
Variant propertyShadow
[SHADOW]← Properties panel dropdown
Same as above — use the Shadow dropdown to switch between None, Hug, Spread, and Glow.
Variant propertyCorner Radius
Radius← Properties panel dropdown
Use the Radius dropdown — 0px, 25px, 50px, or 100px. The radius applies across the border, screenshot frame, and gloss layer simultaneously.
Variant propertyOverlay
[OVERLAY]← don't touch
Vignette layer sitting above the background. Leave it alone — it's doing quiet work to add depth.
Leave it Note
Each template is a component instance. The right panel shows your style dropdowns (Border, Shadow, Radius) — change them without entering the frame. Double-click to enter and access individual layers. Changes to fills (background, screenshot) are instance overrides and only affect your copy. To get full layer control: right-click → Detach Instance.
// Quick Workflow01
Go to Templates — find your size — Cmd + D to duplicate
02
Click once — set Border, Shadow, Radius from the right panel
03
Double-click in — select ← YOUR BACKGROUND — add image fill
04
Select ← YOUR SCREENSHOT — add image fill — Fill or Fit
05
Click out — frame selected — export or screen record
Warning
The square brackets are a contract. [SHADOW], [MOCKUP], [OVERLAY], [BG] — bracket-named layers collapse cleanly and anyone opening the file knows exactly what to touch and what to leave alone.
Universal frames — master ratio sizes. Build all nine; pick the right one per context.
RatioDimensionsOrientationViz
16:91920 × 1080Landscape — wide 5:41920 × 1536Near square 9:161080 × 1920Portrait — tall Platform-specific frames — pre-sized to each platform's exact spec.
All visual styling is exposed as Figma variant properties — switch from Light Glass to Outline by clicking in the sidebar, not by manually re-styling layers.
// Border Style — 5 optionsSolidclean opaque frameLight Glassfrosted, subtle white edgeDark Glassdarker, shadowed borderLiquidbackdrop blur, depthOutlinethin hairline, minimal
// Shadow — 4 optionsNoneflat, no shadowHugtight, follows frameSpreaddiffused, expands outGlowwhite luminous lift
// Corner Radius — 4 options0pxsharp corners25pxslight rounding50pxrounded100pxheavily rounded
01
Solid Color
Flat fill. Use your darkest brand color (Woodsmoke #121314 as default). Simplest option — works with every mockup style. Best for editorial layouts where the mockup is the hero.
02
Gradient Style
Build a library of gradient styles in Figma (Styles panel → Fill styles). Name them: Cosmic, Mystic, Radiant, Malibu→Kobi, etc. Reuse across all platform frames. One click to swap.
03
Image / Photo Fill
Drop a photo directly into the [BG] layer frame. Set it to Fill. Add a noise overlay or vignette in the [OVERLAY] layer to blend the edges. Works especially well with dark, desaturated editorial photos.
04
Animated — Video Workflow
For animated posts: export your mockup layer as PNG (transparent BG). Composite it in CapCut or After Effects over a looping gradient video. Screen record for quick social exports.
Note
Add noise by importing a PNG grain texture and placing it on the [OVERLAY] layer at Overlay blend mode, 6–12% opacity. Add blur via a background blur effect on a transparent rectangle — use this to soften photo backgrounds and make mockups pop forward.
The [OVERLAY] layer sits above the background and below the mockup. It ships empty — what you put in it is up to you.
01
Noise / Grain PNG
Import a grain texture PNG, place it inside [OVERLAY], set blend mode to Overlay at 6–12% opacity. Kills the "Figma flatness" immediately. Generate one free with any noise texture tool or Figma plugin.
02
Background Blur
Add a rectangle inside [OVERLAY] with a Background Blur effect. Use this to soften photo backgrounds and push the mockup forward. Works best when your BG is a photo rather than a solid color.
03
Radial Vignette
A radial gradient rectangle — transparent center, dark edges — at Multiply blend mode, 30–50% opacity. Frames the mockup naturally and adds depth without touching the background itself.
04
Any PNG on Multiply
The overlay layer accepts anything. Dust, light leaks, color washes, abstract textures — place any PNG, set it to Multiply or Screen, adjust opacity. One layer, infinite options.
Tip
The overlay layer works best at low opacity. 6–15% is usually enough. If you can clearly see it, it's too strong — it should feel like it's not there, just making everything look better.
Warning
Figma exports static frames beautifully — 2× PNG, exact dimensions, no watermark, full color accuracy. For animated posts, Figma has no built-in video export. The two paths below cover it.
Path 01 — Screen Record (recommended)
The simplest approach and honestly what most people posting "animated mockups" are actually doing. Use CleanShot X (Mac) or any screen recorder — OBS is free and cross-platform.
Open your Figma frame fullscreen
Present mode (⌘ + Return) or just zoom to fill the screen. Hide the UI chrome.
Play a looping gradient behind it
A looping animated gradient video on a second monitor, or a background tab. Motion Array and Envato Elements have free options. Match the vibe of your blob colors — doesn't need to be exact.
Record with CleanShot X
Capture a region, not the full screen. Crop tight to your frame. CleanShot X exports as MP4 or GIF directly — no extra step needed.
Trim and export in CapCut or directly
Cut the start/end handles, export at platform size. Done. Total time: under 3 minutes.
Path 02 — Figma Video Export Plugins
If you need a clean programmatic render without screen recording — useful when you want pixel-perfect output or are batch exporting multiple frames.
Free
Flowshot
Exports Figma prototypes as MP4 or GIF. Preserves transitions and animation timing. Free, open source, no watermark. Best option if you're not paying for anything.
Free
Export to GIF / Video
One-click export of Figma prototypes to animated video. Works directly from the Figma Community plugin panel. Good for quick social exports without leaving Figma.
Freemium
CreativeFlow
Exports smart animations to GIF or MP4. Supports cubic-bezier easing, spring animations, and component animations. Good if your mockup has prototype transitions you want to preserve.
Paid
Protonix
One-click export to MP4, GIF, WebM, and Lottie. Most format options of the bunch. Worth it if you're exporting animations regularly and want Lottie output for web.
Note
Before you export or record — make sure your duplicated frame is selected. For static: right-click the frame → Export, set to 2× PNG. For screen record: zoom into the frame so it fills your screen edge to edge, then record. No UI chrome, no canvas bleed — just the frame.
You don't need to generate everything from scratch. These are the sources worth bookmarking.
// Free — Stock Photos & Abstracts
Free
Unsplash — Abstract
The most reliable free source for high-quality abstract and texture backgrounds. No attribution required for commercial use. Search "abstract wallpaper" or "dark background".
Free
Freepik / Magnific
Massive library of gradient backgrounds, abstract vectors, and texture PNGs. Free tier requires attribution. Good for dark abstract backgrounds, noise textures, and gradient mesh assets.
Free
Pixabay
CC0 licensed — no attribution, no restrictions. Large collection of abstract backgrounds, gradient textures, and dark wallpapers. The cleanest license of any free source.
Free
Pexels
Curated free photos, commercial use allowed. Smaller selection than Unsplash but stronger on dark cinematic and moody textures. Good for atmospheric editorial BGs.
Free · Figma
Figma Community Wallpapers
Official Figma community stock photography — wallpapers and backgrounds you can duplicate directly into your file and use as BG fills. No export/import, just copy-paste frames.
Free · Figma
BRIX Gradient Backgrounds
200+ editable gradient backgrounds as Figma frames. Fully vector, recolorable, duplicate and swap directly into your [BG] layer. One of the most useful free Figma resources for this exact use case.
Free · Figma
Tech Background Visuals
Dark, tech-aesthetic Figma background frames — geometric, grid, circuit-style. Good match for UI/product mockups. Duplicate and recolor to fit your palette.
Tip
Search Figma Community
Search "gradient background", "dark background", "noise texture" or "wallpaper" in Figma Community for more. Filter by File type to find fully editable Figma sources vs plugins.
Paid
MockupCloud
Premium mockup assets and background packs built specifically for designers. High production value, well organized. Good if you're outputting client deliverables at volume and need consistency.
Paid
Envato Elements
Subscription-based. Massive library of background packs, gradient sets, noise textures, and looping video backgrounds. The video backgrounds are especially useful for the screen record animated workflow.
Paid
Motion Array
Best source for looping animated gradient videos — the exact asset type you need for the screen record workflow. Search "gradient loop" or "abstract background loop". Clean, seamless, multiple color options.
Freemium
Adobe Stock
Free collection available without subscription — limited but curated. Premium tier through Creative Cloud. Strong on abstract dark backgrounds and gradient textures.
Tip
For the screen record workflow you specifically need looping video backgrounds — 5–10 second seamless MP4 loops. Motion Array and Envato Elements are the best sources. Search "gradient loop", "abstract background loop", or "dark gradient animation".