Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

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

25,513 subscribers

12,902 görüntüleme • 2 yıl önce •via X (Twitter)

Bilim & Teknoloji Eğitim

Anya Rossi• Live Now

Private livecam show

5 Yorum

LottieFiles profil fotoğrafı

LottieFiles2 yıl önce

2. 🖼️ Use Group Rotations & Nested Frames for ease of workflow and better organization.

LottieFiles profil fotoğrafı

LottieFiles2 yıl önce

3. 🎨 Add a touch of linear & radial gradient for depth and realism.

LottieFiles profil fotoğrafı

LottieFiles2 yıl önce

4. 🌈 Or add a stroke gradient for a burst of color.

LottieFiles profil fotoğrafı

LottieFiles2 yıl önce

Now live on LottieFiles for Figma: ✨ We can’t wait to see the magic you create this festive season! 🎄 Share your creations and let’s celebrate together. We Lottie You! ❤️

ReallyBeingCreative profil fotoğrafı

ReallyBeingCreative2 yıl önce

@figma Awesome! will check it out

Benzer Videolar

Introducing Auto Arrange, a Figma plugin to automatically organize design elements in a grid, horizontal, or vertical layout. clean up your design with a single click. retweet and share 🙏

Introducing Auto Arrange, a Figma plugin to automatically organize design elements in a grid, horizontal, or vertical layout. clean up your design with a single click. retweet and share 🙏

dára sobaloju

43,200 görüntüleme • 1 yıl önce

#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.

#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,337,387 görüntüleme • 3 yıl önce

#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

#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,395 görüntüleme • 3 yıl önce

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 →

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

124,374 görüntüleme • 2 yıl önce

🦀 Crabwalk for OpenClaw🦞 v1.0.5 + v1.0.6 Release 🦀 Subagent Support and Follow Mode 🤖 Subagent Support — Track your agent as they spawn subagents in real-time. Hierarchical layout shows parent→child relationships, collapsible groups in the sidebar, and exec processes rendered as nodes with status-colored edges. 🎯 Follow Mode — Auto-pans the graph to track incoming nodes as your agent works. No more manually scrolling to find the action. Set and forget. Also: - Layout direction toggle (horizontal/vertical) - Async layout calc for large graphs - Spawn position caching to prevent jitter - Working Docker builds 🦀 A word from our sponsor at the end of the video.

🦀 Crabwalk for OpenClaw🦞 v1.0.5 + v1.0.6 Release 🦀 Subagent Support and Follow Mode 🤖 Subagent Support — Track your agent as they spawn subagents in real-time. Hierarchical layout shows parent→child relationships, collapsible groups in the sidebar, and exec processes rendered as nodes with status-colored edges. 🎯 Follow Mode — Auto-pans the graph to track incoming nodes as your agent works. No more manually scrolling to find the action. Set and forget. Also: - Layout direction toggle (horizontal/vertical) - Async layout calc for large graphs - Spawn position caching to prevent jitter - Working Docker builds 🦀 A word from our sponsor at the end of the video.

Luciano Castillo

59,009 görüntüleme • 6 ay önce

Figma to Lottie just got even better with the new Trim Path feature! 🎉 ✂️ Now you can animate stroke layers and create stunning motion designs effortlessly. Download LottieFiles for Figma now 👉

Figma to Lottie just got even better with the new Trim Path feature! 🎉 ✂️ Now you can animate stroke layers and create stunning motion designs effortlessly. Download LottieFiles for Figma now 👉

LottieFiles

17,024 görüntüleme • 3 yıl önce

Everyone's picking sides: Figma Motion or Lottie Creator? But designers actually need both. So we built copy-paste from Figma to Lottie Creator. Start in Figma. Bring it to Creator. Ship as Lottie. How do you actually ship motion in your workflow?

Everyone's picking sides: Figma Motion or Lottie Creator? But designers actually need both. So we built copy-paste from Figma to Lottie Creator. Start in Figma. Bring it to Creator. Ship as Lottie. How do you actually ship motion in your workflow?

LottieFiles

12,540 görüntüleme • 1 ay önce

Fewer steps between design and delivery. New updates in Lottie Creator.

Fewer steps between design and delivery. New updates in Lottie Creator.

LottieFiles

21,302 görüntüleme • 6 ay önce

The new Figma links so nice, couldn’t help animating it! 😍 Animated using LottieFiles for Figma: #figma #lottie #animation #motion #lottieanimation

The new Figma links so nice, couldn’t help animating it! 😍 Animated using LottieFiles for Figma: #figma #lottie #animation #motion #lottieanimation

LottieFiles

19,647 görüntüleme • 1 yıl önce

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

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

63,437 görüntüleme • 4 ay önce

Figma Motion doesn't export to Lottie. So we built it. Now live in the LottieFiles plugin. Click export, get an Lottie file you can ship anywhere. Should this be free? Tell us.

Figma Motion doesn't export to Lottie. So we built it. Now live in the LottieFiles plugin. Click export, get an Lottie file you can ship anywhere. Should this be free? Tell us.

LottieFiles

124,744 görüntüleme • 1 ay önce

LottieFiles goes beyond Lottie. Your images, design files, and motion assets — all in one place. Built into Figma, Adobe After Effects, and Canva.

LottieFiles goes beyond Lottie. Your images, design files, and motion assets — all in one place. Built into Figma, Adobe After Effects, and Canva.

LottieFiles

38,407 görüntüleme • 6 ay önce

✨ Introducing AI Prompt to Vector. Create design assets using AI & animate them using Lottie Creator. Motion design simplified at:

✨ Introducing AI Prompt to Vector. Create design assets using AI & animate them using Lottie Creator. Motion design simplified at:

LottieFiles

59,496 görüntüleme • 2 yıl önce

Three.js doesn't own the layout — CSS does. Opted-in [data-layout] elements are batched-read (init + resize) and mapped to world space. Children are inferred from parent boxes when possible. That same pass pulls computed styles and detects line breaks, so WebGL text wraps exactly the same. SDF keeps smaller text sharp at any scale. Headlines go further: opentype.js extracts glyphs — each letter becomes its own extruded mesh with independent depth. WebGL syncs to native scroll. DOM vs WebGL ↓

Three.js doesn't own the layout — CSS does. Opted-in [data-layout] elements are batched-read (init + resize) and mapped to world space. Children are inferred from parent boxes when possible. That same pass pulls computed styles and detects line breaks, so WebGL text wraps exactly the same. SDF keeps smaller text sharp at any scale. Headlines go further: opentype.js extracts glyphs — each letter becomes its own extruded mesh with independent depth. WebGL syncs to native scroll. DOM vs WebGL ↓

Johnny Slack

105,573 görüntüleme • 4 ay önce

Google just updated their design system & icons. We animated every single one in Lottie. Grab them in the comments 👇 Which brand's icons should we animate next?

LottieFiles

32,787 görüntüleme • 2 ay önce

I created 30 hero section wireframe kit from 20 dribbble artists! It IS the core of my senior design process They are paired with real design examples 💡 Free from auto-layout 😂 Comment "Inspire" and Like to get Figma link (dm needs to be following) ⏳ 24 hours go!

I created 30 hero section wireframe kit from 20 dribbble artists! It IS the core of my senior design process They are paired with real design examples 💡 Free from auto-layout 😂 Comment "Inspire" and Like to get Figma link (dm needs to be following) ⏳ 24 hours go!

John | Formfactor Design

47,350 görüntüleme • 2 yıl önce

CSS Trick ⭐️ You can create a resizable panel UI with CSS alone by leaning into resize and display:grid 👀 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Putting a resizable element into the first panel provides a way to resize the layout as we're using "auto 1fr". You could also do this with other layout techniques but grid was the first that came to me 😅 But, the issue with resize is you can't style the teeny tiny little handle the browser provides... 🤦‍♂️ So, a trick for that is to scale the resizable element up and then clip the part we don't need 😯 .resizer { height: 48px; transform-origin: 100% 100%; scale: 4; clip-path: inset(calc(100% - 12px) 0 0 calc(100% - 12px)); } And that gives you a slightly better hit spot for the resize handle plus the ability to move it around 🙌 It's not perfect by any means. It does raise the question of how hard would it be to implement support for styling the resize handle in the browser? CodePen.IO link below! 👇

CSS Trick ⭐️ You can create a resizable panel UI with CSS alone by leaning into resize and display:grid 👀 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Putting a resizable element into the first panel provides a way to resize the layout as we're using "auto 1fr". You could also do this with other layout techniques but grid was the first that came to me 😅 But, the issue with resize is you can't style the teeny tiny little handle the browser provides... 🤦‍♂️ So, a trick for that is to scale the resizable element up and then clip the part we don't need 😯 .resizer { height: 48px; transform-origin: 100% 100%; scale: 4; clip-path: inset(calc(100% - 12px) 0 0 calc(100% - 12px)); } And that gives you a slightly better hit spot for the resize handle plus the ability to move it around 🙌 It's not perfect by any means. It does raise the question of how hard would it be to implement support for styling the resize handle in the browser? CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

331,438 görüntüleme • 2 yıl önce

Here's how I animated this skating sequence! #SolarisSupercupSeries 1) Animate a cube in 3D space to figure out where the camera will be! 2) Parent rig to cube and do rough poses with 2D drawings on top! 3) MORE KEYFRAMES 4) Add grease pencil FX!

Here's how I animated this skating sequence! #SolarisSupercupSeries 1) Animate a cube in 3D space to figure out where the camera will be! 2) Parent rig to cube and do rough poses with 2D drawings on top! 3) MORE KEYFRAMES 4) Add grease pencil FX!

Raymond Luc

31,237 görüntüleme • 7 ay önce