# Make a Pan, Zoom, and Rotate Path Animation with Figma Motion
_August 1, 2026 · 12 min read · by Systergon_
> Figma Motion can keyframe position, scale, rotation and opacity — but it has no camera, the one move that carries a shot across a scene, pushes into a detail and tilts a few degrees on the way. Build one anyway: a clipped viewport, an oversized artwork, and a single path you draw. A step-by-step build of a four-second delivery-map move that pans across town, pushes in 1.55×, and rolls 7° as it lands — with a free Figma starter file, the two-shot method for measuring the path, and the one checkbox that ruins the whole thing if you leave it on.
Tags: Figma, Motion, Tutorial, Plugin
URL: https://systergon.com/blog/motion-path-figma-pan-zoom-rotate-camera-move
---
[Install Motion Path — it’s free →](https://www.figma.com/community/plugin/1654530170219655744) [Download the starter file ↓](https://systergon.com/blog/motion-path-figma-pan-zoom-rotate-camera-move/images/camera-rig-starter.svg)

Figma Motion can keyframe position, scale, rotation and opacity. What it has no primitive for is a _camera_ — the single move that carries a shot across a scene, pushes into a detail, and tilts a few degrees on the way. This is how to build one, using a path you draw yourself.

We’re going to animate a delivery map. The shot opens wide on the pickup pin, sweeps across town to the drop-off, pushes in **1.55×** as it arrives, and rolls about **7°** through the turn. One continuous move, roughly four seconds — written as **real native Figma Motion keyframes**. Inspectable in Dev Mode, exportable to CSS, and editable in the Motion panel afterwards like anything else you keyframe by hand.

![The finished camera move seen through the viewport frame: the shot pans across the scene, pushes in to 1.55 times, and rolls about seven degrees as it arrives at the drop-off pin](https://systergon.com/blog/motion-path-figma-pan-zoom-rotate-camera-move/images/pan-zoom-roll.svg)

## The trick: you don’t move the camera, you move the picture

There is no camera in Figma, and there doesn’t need to be. A camera move is just a fixed window onto a picture that moves — a slide travelling under a microscope. So you build a two-part rig:

- A **viewport** — a frame at your delivery size, with **Clip content** turned on. This never moves.
- An **artwork** layer inside it, much larger than the frame. This is what actually animates.

Everything follows from that one inversion, including the rule that trips up everyone the first time: **the picture travels opposite to the camera.** A camera that pans right is a picture that slides left. A camera that pushes in is a picture that scales up. A camera that rolls clockwise is a picture that rotates anticlockwise.

![Two ways to think about the same camera move: on top a window gliding right across a picture that never moves, below the picture gliding left under a window that never moves](https://systergon.com/blog/motion-path-figma-pan-zoom-rotate-camera-move/images/camera-rig.svg)

Motion Path animates the picture. You draw a vector, it samples that vector by arc length and writes **Translation X / Y** keyframes onto the artwork’s timeline — plus **Scale** for the zoom and **Rotation** for the roll. Your path is the artwork’s trajectory, so you draw it as the mirror of the camera move you want.

## What you’ll need

- **Figma with Motion enabled** — the timeline lives under the Animate tab in the right sidebar.
- **Motion Path** — free on the Figma Community. Nothing else: no After Effects, no Lottie, no runtime.
- **An oversized artwork** — anything at least twice your viewport in each direction.
- **About fifteen minutes.** The rig takes five. The rest is taste.

The **starter file** below is a complete, ready-to-animate scene: the viewport, a 1600×1000 city artwork with both pins placed, four pre-drawn camera paths, and the instructions on the board. Download it and drag the SVG straight onto a Figma canvas — layer names and groups come across intact.

[Download the Figma starter file ↓](https://systergon.com/blog/motion-path-figma-pan-zoom-rotate-camera-move/images/camera-rig-starter.svg)

_One thing SVG cannot carry is the clip flag — step 1 turns it on, which takes a single click._

## Build it, step by step

The numbers below match the starter file exactly, so you can follow along and check your inspector against mine. If you’re using your own artwork the method is identical — only the values change.

### 1. Build the camera rig

Select the board named **Viewport** — a 720×405 frame — and turn on **Clip content** in the right sidebar. This is the one thing the starter SVG can’t bring across, and the one thing the whole effect depends on: without it the artwork simply spills over the edges and there is no window.

Inside it sits **City artwork**, 1600×1000 — well over twice the viewport in both directions, which is what gives the camera room to travel. The artwork must live _inside_ a frame, because that is what gives it a Motion timeline. A layer sitting loose on the page has nothing to keyframe onto, and the plugin will tell you so.

### 2. Frame the opening shot

Drag **City artwork** until the pickup pin sits in the middle of the viewport. That’s your first shot; compose it by eye, the way you would any other frame. In the starter file it lands at **X −70, Y −488**, at its natural **1600×1000**.

Now write down its **centre**: **730, 12** — that is _X + W/2, Y + H/2_. The centre is the number that matters, because Motion Path moves the artwork rigidly: the whole animation is one displacement of that point.

### 3. Frame the closing shot, then undo

Now compose the last frame. With the artwork selected, lock the proportions and set **W 2480** — that’s 1600 × 1.55, our zoom. Then drag until the drop-off pin is centred. In the starter file that’s **X −1454, Y −309** at **2480×1550**, giving a centre of **−214, 466**.

Subtract the two centres and you have the move: **(−214, 466) − (730, 12) = (−944, +454)**. Left 944, down 454. That’s the path you’re about to draw — and because you framed both shots by hand, the zoom is already baked into it. No trigonometry required.

Then press **⌘Z** until the artwork is back at the opening shot. The animation has to _start_ there.

### 4. Draw the camera path

With the **Pen** tool, click twice to draw a straight line running _down and to the left_ — direction matters, since the object travels from the first point to the last. Drop it on the canvas anywhere _outside_ the viewport frame; only its shape and size are ever used, never its location.

Select the vector and set its dimensions in the inspector: **W 944**, **H 454**. That’s the displacement, exact.

Then curve it. Double-click into the vector, hold **⌘** for the **Bend** tool, and drag the middle of the segment sideways by about **25px**. A straight path gives a mechanical move; a shallow bow gives the shot a natural arc — and, in step 8, the roll.

![The path you draw is the artwork's trajectory: the whole picture slides down and to the left past a viewport that never moves, and the path's width and height are the difference between the two shots](https://systergon.com/blog/motion-path-figma-pan-zoom-rotate-camera-move/images/path-delta.svg)

### 5. Hand the plugin the path and the object

Select **both** the path vector and **City artwork**, then run **Plugins → Motion Path**. On the **Animate** tab, the **Setup** section should already read _From selection_, with **Path** set to your vector and **Animate** set to the artwork.

The first selected vector becomes the path and everything else becomes an object. If the two ended up swapped, hit the **swap** button between the rows, or select a layer and use **Set as path** / **Set as object** to pin the roles explicitly.

### 6. Set the timing

Camera moves live or die on timing. In **Essentials**, three values:

- **Duration 4.4s** — long enough to read as deliberate rather than a cut.
- **Forward**, **1 loop**. A camera move is a one-way trip.
- **Ease in and out.** Never _Linear_ — nothing physical starts at full speed.

Then open **Start, holds & seamless** and set **Hold start 0.5s** and **Hold end 0.7s**. Those two beats are what separate a camera move from a slide transition: the shot arrives, settles, and is allowed to be looked at.

### 7. Add the zoom

Scroll to **Effects** and hit **+ Add effect**. Under _Deform_, choose **Scale along path** and set **Scale from 1**, **Scale to 1.55** — the same factor you sized shot B by.

One thing worth knowing: Figma scales a layer about _its own centre_, not the centre of your viewport. The reason the zoom still lands on the drop-off pin is that the translation you measured in step 3 already accounts for it — you sized the artwork _then_ read the centre. That’s the whole reason for framing shot B by hand instead of guessing.

### 8. Add the roll

**+ Add effect → Rotate to path.** This keyframes rotation so the layer turns to follow the path’s tangent — and since your path bends, the artwork turns with it. That bend _is_ the roll.

Two adjustments make it usable. First, turn on **Auto-flip**: our path runs down-left, so its raw tangent points backwards and the artwork would arrive upside down. Second, add the **Position & rotation** effect and dial its **Rotation** until the first frame sits square — in the starter file that’s **−22°**. The preview updates as you drag, so trust your eye over the number.

Here’s the part worth internalising: **the offset chooses where the roll starts, the bow decides how much roll you get.** With a −22° offset our shot opens level and rolls to about +7° by the end — exactly the change in heading between the path’s first and last tangent. Want more? Bend the path further. Want none? Straighten it, and Rotate to path becomes a fixed Dutch angle instead.

![How much a path is bowed decides how much the shot rolls: a straight path gives no roll, a 25 pixel bow gives about seven degrees, a 60 pixel bow gives about sixteen degrees](https://systergon.com/blog/motion-path-figma-pan-zoom-rotate-camera-move/images/roll-from-bow.svg)

_One honest caveat: rotation happens about the artwork’s centre, so adding a roll nudges the final framing a few pixels off the Δ you measured — around 1% of the frame at 7°. Check the last frame in the preview and, if it matters, drag the path’s end point a touch. Add the roll last for exactly this reason._

### 9. Turn off “Start at path start”, then apply

This is the single most important checkbox in the whole tutorial, and it sits just above the Apply button.

Left **on** — the default — the plugin moves your layer so its centre lands on the path’s start point before keyframing. Perfect for a ball following a curve. Ruinous here: your carefully composed opening shot would jump to wherever you happened to draw the path.

Turn **Start at path start** off. The artwork stays exactly where it is and traces the path’s _shape_ from there. That’s why step 4 said the path’s location never matters. Now hit **Apply motion path**.

### 10. Check it in Figma’s own timeline

Select **City artwork** and open Figma’s **Animate** tab. You should see four native tracks — **Translation X**, **Translation Y**, **Scale** and **Rotation** — with keyframes spaced evenly along the path, one landing on every corner. Nothing proprietary; nothing that needs the plugin to play back. Scrub the playhead and the camera moves.

Before you commit, judge the timing at the frame rate you’re shipping at. In the plugin’s preview, tap the rate pill to cycle **Smooth → 24 → 30 → 60**, and press expand for the [full-screen theater](https://systergon.com/blog/motion-path-figma-preview-fps-theater-zoom) with play, pause and stop. A slow push-in that reads beautifully at 60 can strobe at 24 — better to find that out here than in the export.

### 11. Re-open and refine

Camera work is iterative and the first pass is never right. Select the animated layer, run the plugin, and it reads the existing motion straight back in — duration, timeline offset, and which effects are on — so you adjust and re-apply instead of starting over.

Three dials are worth revisiting, in order of impact. **The holds**: almost every camera move is improved by a longer hold at the end than the start. **The bow**: reshape the path on canvas and re-apply; roll follows the curve. **Speed**: add the Speed effect and turn on _Ease at corners_ for a move that slows through the turn and opens up on the straight — a real operator, not a lerp.

## The one bit of arithmetic (only if you want it)

Framing both shots by hand is the reliable method, and it’s the one I’d use. But if you’d rather compute the path from your points of interest, the whole thing is one line. Given two points **A** and **B** in artwork coordinates, the artwork’s centre **C**, and a zoom factor **z**:

**Δ = (A − C) − z × (B − C)**

Ours: A = (430, 690), B = (1170, 330), C = (800, 500), z = 1.55. So Δ = (−370, 190) − 1.55 × (370, −170) = **(−944, +454)** — the same numbers step 3 measured.

With **z** = 1 it collapses to Δ = A − B: the plain mirror of the camera move, which is the rule of thumb you started with. The **z** term is the correction for the fact that zooming magnifies every distance, including the one you’re travelling.

## Five camera moves worth stealing

Same rig, different numbers. Every one of these is a path, a duration and at most two effects.

- **Push in** — no path at all, just a 1px dot. 1.2–1.8s, Scale 1 → 1.9, Ease in and out. Emphasis: the hero shot of every product page.
- **Whip pan** — straight and long. 0.35–0.5s with Motion blur at a 24px peak. A cut that keeps continuity; hide a scene change inside it.
- **Arc reveal** — a deep bow, 60px or more. 2.5–4s, Rotate to path, Scale 1.3 → 1. Pulling back to show where you were. Openers.
- **Ken Burns** — short and shallow. 6–12s, Scale 1 → 1.12, Linear. Ambient life behind a headline: never noticed, always missed.
- **Orbit** — Setup → Procedural → Circle. 8–20s, Rotate to path off, looping. A slow drift with no beginning, for backgrounds and loading states.

## When it goes wrong

- **The artwork jumped somewhere else.** _Start at path start_ was left on, so the layer was relocated onto the path before keyframing. Undo, uncheck it, apply again.
- **The camera goes the wrong way.** Your path is drawn in camera direction, not artwork direction. Either redraw it mirrored, or select it and rotate 180° — which negates every displacement and is exactly equivalent.
- **The opening frame is tilted.** Rotate to path is orienting the artwork to a tangent that isn’t horizontal. Add _Position & rotation_ and dial the constant Rotation until the first frame is square.
- **Nothing animates at all.** The artwork isn’t inside a frame, so it has no Motion timeline to write to. Wrap it in one.
- **The zoom drifts off the pin.** Shot B was framed _before_ it was scaled. Size the artwork first, then position it, then read the centre — the order matters, because scale happens about the layer’s own centre.

## Hand it off

Because the result is native Motion, the hand-off is Figma’s, not ours. Open **Dev Mode** and every track is inspectable with real values and real times. Or use the plugin’s **Copy as code** and take the whole move out as CSS `offset-path` keyframes, ready to drop into the web.

Which is the argument for building camera moves this way rather than in a video tool: the artefact you produce isn’t a render. It’s a timeline your engineers can read, your design system can hold, and you can re-open six months later and re-time in about a minute.

## The rest of the series

Ten more moves native Motion can’t make on its own — each one a single practical build, each with a starter file. In order of how often people ask for them:

1. **Animate a line drawing itself** — a route, a signature or an underline that draws on as an object rides it. Draw-on, Reveal and Trail.
2. **Make text run along a curve** — native Motion animates a text layer as one box, so real type-on-a-path is impossible. Per-glyph tracks are not.
3. **Build an endless conveyor of icons** — objects riding one closed loop at a fixed gap, wrapping the seam so the belt never ends.
4. **Give an animation weight** — squash, stretch and banking, driven by velocity, so it comes free with your easing.
5. **Add real motion blur** — a blur keyed to speed, peaking where the object is fastest.
6. **Make a confetti burst** — seeded jitter across start time, offset, size and speed, so forty identical copies read as celebration.
7. **Animate a delivery route on a map** — a vehicle that turns into its corners, slows through them, and draws its route behind it.
8. **Anticipation and overshoot** — a wind-up before the launch and a coast past the landing, path-aware so it works on curves.
9. **Chain three paths into one journey** — leg A → B → C on a single timeline.
10. **Export a path animation to CSS** — what survives the trip, and what to hand an engineer instead of a video.

_Still writes real, native Figma Motion keyframes._

[Install Motion Path — it’s free →](https://www.figma.com/community/plugin/1654530170219655744) [See the product page](https://systergon.com/products/figma-plugins/motion-path)