Loading video...

Video Failed to Load

Go Home

More ways to animate with LottieFiles: - Auto-layout - Nested Frames - Multi-variant Components - Gradients - Handoff features like animation URLs and embed codes for Dev Mode Download the plugin and play →

figma's profile picture

Figma

558,908 subscribers

124,351 views • 2 years ago •via X (Twitter)

Health & WellnessEducationScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

10 Comments

LottieFiles's profile picture
LottieFiles2 years ago

We’ve also updated the community inspirations file with loads of ready-to-use Lottie animations: Share your creations using #FigmaToLottie. ✨

Dogan Ural's profile picture
Dogan Ural2 years ago

@LottieFiles Wow, great news! I have been using Figma for animations for a long time. It'd be great if we could export videos directly from prototypes.

Doug Orchard 💙's profile picture
Doug Orchard 💙2 years ago

@LottieFiles The most unreliable way to make Lottie files.

UXVoyage's profile picture
UXVoyage2 years ago

@LottieFiles Damn good

091's profile picture
0912 years ago

@LottieFiles

Karim Saif's profile picture
Karim Saif2 years ago

@LottieFiles Awesome

Ludwig Adorno's profile picture
Ludwig Adorno2 years ago

@LottieFiles Awesome!

Nur Asyrof M's profile picture
Nur Asyrof M2 years ago

@LottieFiles

Jonathan Waterworth's profile picture
Jonathan Waterworth2 years ago

@LottieFiles Wooooo this looks great!

Tito✦'s profile picture
Tito✦2 years ago

@LottieFiles That's awesome but what do developers think about this?

Related Videos

#Config2023 Launch 1: Dev Mode A new space in Figma for developers with features that help translate design into code, faster. Read more: Here are all the ways you can use Dev Mode 👇
0:43

#Config2023 Launch 1: Dev Mode A new space in Figma for developers with features that help translate design into code, faster. Read more: Here are all the ways you can use Dev Mode 👇

Figma

617,318 views • 3 years ago

Do more with Dev Mode. This new plugin allows you to write and generate dynamic code snippets for your design system. Code Snippet Editor →
0:30

Do more with Dev Mode. This new plugin allows you to write and generate dynamic code snippets for your design system. Code Snippet Editor →

Figma

141,230 views • 2 years ago

Announcing 4 key updates on Figma to Lottie. 🔽 1. 🖥️ Auto Layout - Animate the layout flow direction between vertical, horizontal, and wrapped layouts. - Auto-space elements as the parent element resizes.
0:57

Announcing 4 key updates on Figma to Lottie. 🔽 1. 🖥️ Auto Layout - Animate the layout flow direction between vertical, horizontal, and wrapped layouts. - Auto-space elements as the parent element resizes.

LottieFiles

12,889 views • 2 years ago

Excited to share Animate it Figma plugin! ✨ I made this plugin to quickly create animated smart components that I use most of the time—like rotate, zoom, slide, and more. It generates a set of components based on animation presets. Check here
0:58

Excited to share Animate it Figma plugin! ✨ I made this plugin to quickly create animated smart components that I use most of the time—like rotate, zoom, slide, and more. It generates a set of components based on animation presets. Check here

vijay verma

11,697 views • 1 year ago

Coming next week: New features in Dev Mode to bring design + dev closer. Annotations (!!), improvements to diffing, plugins, and the VS Code extension. What's shipping January 31 as Dev Mode moves out of free beta →
1:03

Coming next week: New features in Dev Mode to bring design + dev closer. Annotations (!!), improvements to diffing, plugins, and the VS Code extension. What's shipping January 31 as Dev Mode moves out of free beta →

Figma

789,302 views • 2 years ago

#Config2023 launches bridge the gap between design and development, all in Figma. → Dev Mode, a new space for developers → Variables → Advanced prototyping → Auto layout updates → Font picker → File browser redesign Plus, we previewed the future of Figma with AI and announced the acquisition of Diagram.
0:54

#Config2023 launches bridge the gap between design and development, all in Figma. → Dev Mode, a new space for developers → Variables → Advanced prototyping → Auto layout updates → Font picker → File browser redesign Plus, we previewed the future of Figma with AI and announced the acquisition of Diagram.

Figma

1,336,614 views • 3 years ago

#Config2023 Launch 4: Auto layout updates Three words: Wrap, min, max—that’s right, spend less time manually resizing and more time creating components and layouts that are much more responsive. 👇 Here’s what’s new
0:35

#Config2023 Launch 4: Auto layout updates Three words: Wrap, min, max—that’s right, spend less time manually resizing and more time creating components and layouts that are much more responsive. 👇 Here’s what’s new

Figma

205,251 views • 3 years ago

New in Dev Mode: → Ready for Dev View: see all designs marked ready for development in a single, organized space → Focus View: annotate and inspect with just your chosen design in focus → More Statuses: track what's ready for dev, changes made, and completed designs #Config2024
0:44

New in Dev Mode: → Ready for Dev View: see all designs marked ready for development in a single, organized space → Focus View: annotate and inspect with just your chosen design in focus → More Statuses: track what's ready for dev, changes made, and completed designs #Config2024

Figma

57,503 views • 2 years ago

There’s no way you caught everything. Here’s what we launched at #Config2024 → UI3, a redesigned Figma → Figma AI (Make Design, Make Prototype, Visual Search, Replace Content, Rename Layers) → Figma Slides → Dev Mode updates (Ready for Dev View, Focus View, More Statuses) → Code Connect is out of beta (!!) → Auto Layout improvements → Responsive Prototyping Viewer → FigJam Pages
1:20

There’s no way you caught everything. Here’s what we launched at #Config2024 → UI3, a redesigned Figma → Figma AI (Make Design, Make Prototype, Visual Search, Replace Content, Rename Layers) → Figma Slides → Dev Mode updates (Ready for Dev View, Focus View, More Statuses) → Code Connect is out of beta (!!) → Auto Layout improvements → Responsive Prototyping Viewer → FigJam Pages

Figma

997,260 views • 2 years ago

Releasing a few quality of life Figma Draw updates today → New brush & texture updates (gradients, eyedropper, and noise controls) → Dedicated text on a path tool (or drag on an empty canvas to create text on a circle) → Separate text and vector into independent layers Plus, we pulled a few features over from Design to make it easier to access → New layers panel icons → Auto layout directly in Draw
0:43

Releasing a few quality of life Figma Draw updates today → New brush & texture updates (gradients, eyedropper, and noise controls) → Dedicated text on a path tool (or drag on an empty canvas to create text on a circle) → Separate text and vector into independent layers Plus, we pulled a few features over from Design to make it easier to access → New layers panel icons → Auto layout directly in Draw

Figma

62,844 views • 1 month ago

Introducing Motion Tokens. Data-driven animation. Every property controlled at runtime. Update text, colors, gradients and transforms — all from code.
0:47

Introducing Motion Tokens. Data-driven animation. Every property controlled at runtime. Update text, colors, gradients and transforms — all from code.

LottieFiles

60,365 views • 3 months ago

Auto layout just got more powerful with Grid → Format in a gallery, card or bento layout → Items can span multiple cells #Config2025
0:39

Auto layout just got more powerful with Grid → Format in a gallery, card or bento layout → Items can span multiple cells #Config2025

Figma

160,965 views • 1 year ago

Figma Slides, now out of beta and with new features (!!!) → Import/Export .pptx → Object Animations → Slide numbers → Components → Video improvements
2:18

Figma Slides, now out of beta and with new features (!!!) → Import/Export .pptx → Object Animations → Slide numbers → Components → Video improvements

Figma

114,343 views • 1 year ago

Some updates to variables! You can now bind variables to: - Individual corner radius - Effects - Layer opacity - Layout grid - Nested instances - Stroke weight Join our Q&A next week (Dec 13) to learn more →
0:36

Some updates to variables! You can now bind variables to: - Individual corner radius - Effects - Layer opacity - Layout grid - Nested instances - Stroke weight Join our Q&A next week (Dec 13) to learn more →

Figma

318,646 views • 2 years ago

New in Dev Mode: → Editable text in measurements: describe design details with more than just numbers
0:23

New in Dev Mode: → Editable text in measurements: describe design details with more than just numbers

Figma

62,841 views • 1 year ago

This is the first time I've seen this used in production - really neat technique! The new Stripe dev site uses a single grid layout of 24 columns and then uses subgrid nested 5-6 levels deep for all its layout.
1:18

This is the first time I've seen this used in production - really neat technique! The new Stripe dev site uses a single grid layout of 24 columns and then uses subgrid nested 5-6 levels deep for all its layout.

Wes Bos

117,795 views • 1 year ago

The Dev Mode MCP Server is now available in beta. Access Dev Mode data directly in your agentic coding workflow → VS Code with Copilot → Cursor → Windsurf → Claude Code
0:29

The Dev Mode MCP Server is now available in beta. Access Dev Mode data directly in your agentic coding workflow → VS Code with Copilot → Cursor → Windsurf → Claude Code

Figma

252,822 views • 1 year ago

Developing components for shadcn/ui is still largely a manual process. Every week, I manually go through 5,000+ components and examples checking spacing, animation, light/dark mode, typography, icons, and more.
0:25

Developing components for shadcn/ui is still largely a manual process. Every week, I manually go through 5,000+ components and examples checking spacing, animation, light/dark mode, typography, icons, and more.

shadcn

131,705 views • 4 months ago

Customize Dev Mode to how you work. Five plugins to try: Design 🤝 Dev → Atlassian Jira Code Generation → Bernardo Ferrari Figma to Code → Anima Design Systems → Tokens Studio → Figma Code Snippet Editor More in the thread.
0:20

Customize Dev Mode to how you work. Five plugins to try: Design 🤝 Dev → Atlassian Jira Code Generation → Bernardo Ferrari Figma to Code → Anima Design Systems → Tokens Studio → Figma Code Snippet Editor More in the thread.

Figma

47,489 views • 2 years ago

Spring animations now on LottieFiles with presets like: → Gentle → Quick → Bouncy → or customize your own springs
1:00

Spring animations now on LottieFiles with presets like: → Gentle → Quick → Bouncy → or customize your own springs

Figma

36,064 views • 1 year ago