Back to videos

Figma

Figma Motion basics: Path trim

Launch
Platform
YouTube
Length
2:16
Spoken language
English
Views
4.8K
Median cut
0.09s
Face on screen
0%
Dark frames
0%
Figma Figma Motion basics: Path trim at 0:00
FigmaFigma Motion basics: Path trim
0:00
Figma Figma Motion basics: Path trim at 0:01
FigmaFigma Motion basics: Path trim
0:01
Figma Figma Motion basics: Path trim at 0:02
FigmaFigma Motion basics: Path trim
0:02
Figma Figma Motion basics: Path trim at 0:02
FigmaFigma Motion basics: Path trim
0:02
Figma Figma Motion basics: Path trim at 0:04
FigmaFigma Motion basics: Path trim
0:04
Figma Figma Motion basics: Path trim at 0:10
FigmaFigma Motion basics: Path trim
0:10
Figma Figma Motion basics: Path trim at 0:10
FigmaFigma Motion basics: Path trim
0:10
Figma Figma Motion basics: Path trim at 0:12
FigmaFigma Motion basics: Path trim
0:12
Figma Figma Motion basics: Path trim at 0:15
FigmaFigma Motion basics: Path trim
0:15
Figma Figma Motion basics: Path trim at 0:18
FigmaFigma Motion basics: Path trim
0:18
Figma Figma Motion basics: Path trim at 0:21
FigmaFigma Motion basics: Path trim
0:21
Figma Figma Motion basics: Path trim at 0:21
FigmaFigma Motion basics: Path trim
0:21
Figma Figma Motion basics: Path trim at 0:21
FigmaFigma Motion basics: Path trim
0:21
Figma Figma Motion basics: Path trim at 0:21
FigmaFigma Motion basics: Path trim
0:21
Figma Figma Motion basics: Path trim at 0:22
FigmaFigma Motion basics: Path trim
0:22
Figma Figma Motion basics: Path trim at 0:22
FigmaFigma Motion basics: Path trim
0:22
Figma Figma Motion basics: Path trim at 0:22
FigmaFigma Motion basics: Path trim
0:22
Figma Figma Motion basics: Path trim at 0:22
FigmaFigma Motion basics: Path trim
0:22
Figma Figma Motion basics: Path trim at 0:23
FigmaFigma Motion basics: Path trim
0:23
Figma Figma Motion basics: Path trim at 0:24
FigmaFigma Motion basics: Path trim
0:24
Figma Figma Motion basics: Path trim at 0:28
FigmaFigma Motion basics: Path trim
0:28
Figma Figma Motion basics: Path trim at 0:29
FigmaFigma Motion basics: Path trim
0:29
Figma Figma Motion basics: Path trim at 0:37
FigmaFigma Motion basics: Path trim
0:37
Figma Figma Motion basics: Path trim at 0:37
FigmaFigma Motion basics: Path trim
0:37
Figma Figma Motion basics: Path trim at 0:37
FigmaFigma Motion basics: Path trim
0:37
Figma Figma Motion basics: Path trim at 0:37
FigmaFigma Motion basics: Path trim
0:37
Figma Figma Motion basics: Path trim at 0:38
FigmaFigma Motion basics: Path trim
0:38
Figma Figma Motion basics: Path trim at 0:38
FigmaFigma Motion basics: Path trim
0:38
Figma Figma Motion basics: Path trim at 0:38
FigmaFigma Motion basics: Path trim
0:38
Figma Figma Motion basics: Path trim at 0:38
FigmaFigma Motion basics: Path trim
0:38
Figma Figma Motion basics: Path trim at 0:45
FigmaFigma Motion basics: Path trim
0:45
Figma Figma Motion basics: Path trim at 0:46
FigmaFigma Motion basics: Path trim
0:46
Figma Figma Motion basics: Path trim at 0:51
FigmaFigma Motion basics: Path trim
0:51
Figma Figma Motion basics: Path trim at 0:51
FigmaFigma Motion basics: Path trim
0:51
Figma Figma Motion basics: Path trim at 0:51
FigmaFigma Motion basics: Path trim
0:51
Figma Figma Motion basics: Path trim at 0:52
FigmaFigma Motion basics: Path trim
0:52
Figma Figma Motion basics: Path trim at 0:52
FigmaFigma Motion basics: Path trim
0:52
Figma Figma Motion basics: Path trim at 0:52
FigmaFigma Motion basics: Path trim
0:52
Figma Figma Motion basics: Path trim at 0:53
FigmaFigma Motion basics: Path trim
0:53
Figma Figma Motion basics: Path trim at 0:54
FigmaFigma Motion basics: Path trim
0:54
Figma Figma Motion basics: Path trim at 0:55
FigmaFigma Motion basics: Path trim
0:55
Figma Figma Motion basics: Path trim at 0:56
FigmaFigma Motion basics: Path trim
0:56
Figma Figma Motion basics: Path trim at 1:06
FigmaFigma Motion basics: Path trim
1:06
Figma Figma Motion basics: Path trim at 1:15
FigmaFigma Motion basics: Path trim
1:15
Figma Figma Motion basics: Path trim at 1:16
FigmaFigma Motion basics: Path trim
1:16
Figma Figma Motion basics: Path trim at 1:16
FigmaFigma Motion basics: Path trim
1:16
Figma Figma Motion basics: Path trim at 1:16
FigmaFigma Motion basics: Path trim
1:16
Figma Figma Motion basics: Path trim at 1:22
FigmaFigma Motion basics: Path trim
1:22
Figma Figma Motion basics: Path trim at 1:30
FigmaFigma Motion basics: Path trim
1:30
Figma Figma Motion basics: Path trim at 1:34
FigmaFigma Motion basics: Path trim
1:34
Figma Figma Motion basics: Path trim at 1:38
FigmaFigma Motion basics: Path trim
1:38
Figma Figma Motion basics: Path trim at 1:46
FigmaFigma Motion basics: Path trim
1:46
Figma Figma Motion basics: Path trim at 1:50
FigmaFigma Motion basics: Path trim
1:50
Figma Figma Motion basics: Path trim at 1:58
FigmaFigma Motion basics: Path trim
1:58
Figma Figma Motion basics: Path trim at 2:02
FigmaFigma Motion basics: Path trim
2:02
Figma Figma Motion basics: Path trim at 2:03
FigmaFigma Motion basics: Path trim
2:03
Figma Figma Motion basics: Path trim at 2:06
FigmaFigma Motion basics: Path trim
2:06
Figma Figma Motion basics: Path trim at 2:07
FigmaFigma Motion basics: Path trim
2:07
Figma Figma Motion basics: Path trim at 2:14
FigmaFigma Motion basics: Path trim
2:14

Transcript of Figma Motion basics: Path trim

Transcribed by a speech model from the film's own audio, not written by the brand. Click any line to jump the film to that moment.

  1. 0:00Let's learn about Path Trim.
  2. 0:02Path Trim lets you create animated lines by controlling how much of a path is visible at specific points in time.
  3. 0:09You can use Path Trim to create draw-on or erase effects,
  4. 0:14handwriting animations,
  5. 0:17and looping spinners.
  6. 0:21Path Trim animations can only be applied to center position strokes.
  7. 0:26There are two ways to create path trim animations in Figma Motion.
  8. 0:31The path animation style and path trim keyframes.
  9. 0:35Let's take a look at each option.
  10. 0:38The path animation style lets you quickly apply path trim animations without needing
  11. 0:42to set keyframes manually.
  12. 0:44Path animation styles can only be applied to open vector paths, and you can only apply
  13. 0:49one path animation per object.
  14. 0:52To apply a path animation style, click animations in the right sidebar and choose path from the list of options.
  15. 0:58If the path option is disabled, make sure you've selected an open vector path with a center position stroke.
  16. 1:04From there, configure the animation type and direction, along with its delay, duration, and easing curve.
  17. 1:16For more granular control, or to animate a closed vector path, you can use keyframes instead.
  18. 1:22Keyframes let you animate the start and end points of a path independently,
  19. 1:26giving you more precise control over the motion. For example, you can use keyframes to create a
  20. 1:32loading spinner with staggered start and end points for more fluid, organic movement.
  21. 1:37To apply Path Trim keyframes, click Add keyframe next to the Path Trim Start or Path Trim End settings in the Stroke section of the right sidebar.
  22. 1:46Then enter a value between 0 and 100% to configure where the path begins or ends.
  23. 1:53Move the playhead to where you want the animation to end, then adjust the value to add another keyframe that defines the final state of the path.
23 lines · 302 words

More from Figma

All of Figma →

The rest of their work we have taken apart.

Oh wait there’s more: we’re building 3D Transforms, here’s a preview ...39M views
Figma
Oh wait there’s more: we’re building 3D Transforms, here’s a preview ...
1:0423 frames4.0s cut78% face
Made in Figma (2025) Like this ❤️ we designed it for you36M views
Figma
Made in Figma (2025) Like this ❤️ we designed it for you
0:3872 frames0.5s cut7% face
Like a post with ‘Made in Figma’ You’ll get a surprise29M views
Figma
Like a post with ‘Made in Figma’ You’ll get a surprise
1 frames0% face
Now you can use AI agents to design directly on the Figma canvas, wit...18M views
Figma
Now you can use AI agents to design directly on the Figma canvas, wit...
0:3719 frames1.5s cut0% face
What’s your favorite scary movie?8.2M views
Figma
What’s your favorite scary movie?
2:32216 frames3.3s cut80% face

Cut at the same speed

Films whose median shot runs closest to 0.09s.

Introducing Atlas: The world's first multimodal world model that gen...Launch9.8M views
World Labs
Introducing Atlas: The world's first multimodal world model that gen...
1:2672 frames0.1s cut3% face
Iran War Expert: “I Worry They Will Attack Us On Home Soil!” | Robert Pape6.9M views
The Diary Of A CEO
Iran War Expert: “I Worry They Will Attack Us On Home Soil!” | Robert Pape
101:13191 frames0.1s cut48% face
Claude Fable 5.1 builds the ops review in Slack57K views
Claude
Claude Fable 5.1 builds the ops review in Slack
1:2643 frames0.1s cut0% face
New Anthropic research: A global workspace in language models. Of ev...11M views
Anthropic
New Anthropic research: A global workspace in language models. Of ev...
5:27387 frames0.1s cut0% face
New Anthropic research: Emotion concepts and their function in a larg...3.9M views
Anthropic
New Anthropic research: Emotion concepts and their function in a larg...
4:53435 frames0.1s cut1% face
Marcos Rico Peng - today we're launching @Palmier_io, a video editor Claude can edit. ...Launch2.8M views
Marcos Rico Peng
Marcos Rico Peng - today we're launching @Palmier_io, a video editor Claude can edit. ...
0:3949 frames0.1s cut20% face
We won the race to criticality, but the most important race is the ra...148K views
Jordan Bramble
We won the race to criticality, but the most important race is the ra...
0:2054 frames0.1s cut0% face
You made billions of searches on Perplexity in 2024. Which topics tr...102K views
Perplexity
You made billions of searches on Perplexity in 2024. Which topics tr...
0:1912 frames0.1s cut0% face
Introducing `Agent-1`: a breakthrough foundation model that can opera...Launch252K views
Matt Shumer
Introducing `Agent-1`: a breakthrough foundation model that can opera...
0:5341 frames0.1s cut0% face
v0 is now available in Claude Design. Send your designs to v0, turn ...Launch30K views
v0
v0 is now available in Claude Design. Send your designs to v0, turn ...
0:5923 frames0.1s cut0% face
How Daxko turns AI token spend management into better model choices783 views
Ramp
How Daxko turns AI token spend management into better model choices
0:2225 frames0.1s cut4% face
Flux 3 on the Pika API ClubLaunch94 views
Pika Labs
Flux 3 on the Pika API Club
0:1617 frames0.1s cut18% face

Lit and framed like this

Closest on how much of the running time has a face in it and how dark the frames are.

Introducing Sora, our text-to-video model. Sora can create videos of...Launch98M views
OpenAI
Introducing Sora, our text-to-video model. Sora can create videos of...
0:177 frames0% face
Everything we launched at Make with Notion27M views
Notion
Everything we launched at Make with Notion
1:0326 frames11.5s cut0% face
Introducing Sakana Fugu: A full multi-agent orchestration system acce...Launch26M views
Sakana AI
Introducing Sakana Fugu: A full multi-agent orchestration system acce...
5 frames0% face
Introducing Claude Code Security, now in limited research preview. I...Launch26M views
Claude
Introducing Claude Code Security, now in limited research preview. I...
0:5018 frames0% face
What is ClickUp?22M views
ClickUp
What is ClickUp?
1:2835 frames23.3s cut0% face
Introducing Claude Managed Agents: everything you need to build and d...Launch22M views
Claude
Introducing Claude Managed Agents: everything you need to build and d...
0:5921 frames0% face
Computer use is now in Claude Code. Claude can open your apps, click...16M views
Claude
Computer use is now in Claude Code. Claude can open your apps, click...
0:4519 frames25.2s cut0% face
Introducing ChatGPT Images 2.0 A state-of-the-art image model that c...Launch13M views
OpenAI
Introducing ChatGPT Images 2.0 A state-of-the-art image model that c...
1:0062 frames0.8s cut0% face
Your Base44 Superagent is waiting13M views
Base44
Your Base44 Superagent is waiting
0:4321 frames1.4s cut0% face
Power Your Performance: Know Your Cache, Own Your Speed with Cloudflare Cache Analytics13M views
Cloudflare
Power Your Performance: Know Your Cache, Own Your Speed with Cloudflare Cache Analytics
0:3011 frames0% face
Introducing Claude Sonnet 5, our most agentic Sonnet yet. It makes p...Launch12M views
Claude
Introducing Claude Sonnet 5, our most agentic Sonnet yet. It makes p...
0:115 frames0% face
ChatGPT already helps millions of people find what to buy. Now it can...Launch10M views
OpenAI
ChatGPT already helps millions of people find what to buy. Now it can...
0:2912 frames0% face

More launch

Same category, other makers, most watched first.

Introducing Base44’s Big Game Ad “It’s App to You”Launch140M views
Base44
Introducing Base44’s Big Game Ad “It’s App to You”
0:3024 frames1.9s cut79% face
Introducing Base44’s Big Game Ad Teaser “It’s App to You”Launch138M views
Base44
Introducing Base44’s Big Game Ad Teaser “It’s App to You”
0:1515 frames1.5s cut67% face
Announcing Builder 2.0 We raised $67M to build collaborative coding ...Launch90M views
Steve (Builder.io)
Announcing Builder 2.0 We raised $67M to build collaborative coding ...
0:5218 frames0% face
Introducing Perplexity Computer. Computer unifies every current AI c...Launch38M views
Perplexity
Introducing Perplexity Computer. Computer unifies every current AI c...
1:3432 frames3% face
New Model 3 Performance launching today 🏎️ → 0-60 mph in 2.9 510 hp...Launch34M views
Tesla
New Model 3 Performance launching today 🏎️ → 0-60 mph in 2.9 510 hp...
0:3934 frames0.6s cut3% face
Today we're excited to introduce Devin, the first AI software enginee...Launch31M views
Cognition
Today we're excited to introduce Devin, the first AI software enginee...
1:4937 frames11% face
introducing friend. not imaginary. order now atLaunch27M views
Avi
introducing friend. not imaginary. order now at
1:4450 frames2.9s cut50% face
Introducing Gemini Omni: Create Anything from AnythingLaunch26M views
Google
Introducing Gemini Omni: Create Anything from Anything
0:5462 frames0.8s cut8% face
Introducing Code Review, a new feature for Claude Code. When a PR op...Launch24M views
Claude
Introducing Code Review, a new feature for Claude Code. When a PR op...
0:4516 frames6% face
Say goodbye to the silent era of video generation: Introducing Veo 3 ...Launch19M views
Google
Say goodbye to the silent era of video generation: Introducing Veo 3 ...
0:094 frames100% face
It's no secret how we feel about typing at Wispr Flow. The truth is,...Launch19M views
Tanay Kothari
It's no secret how we feel about typing at Wispr Flow. The truth is,...
2:00110 frames5.1s cut52% face
Introducing NEO Beta. Designed for humans. Built for the home.Launch19M views
1X
Introducing NEO Beta. Designed for humans. Built for the home.
0:3013 frames3.1s cut38% face
Browse every frame in the library