Загрузка видео...

Не удалось загрузить видео

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

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 просмотров • 2 лет назад •via X (Twitter)

Наука и технологии Образование

Anya Rossi• Live Now

Private livecam show

Комментарии: 5

Фото профиля LottieFiles

LottieFiles2 лет назад

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

Фото профиля LottieFiles

LottieFiles2 лет назад

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

Фото профиля LottieFiles

LottieFiles2 лет назад

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

Фото профиля LottieFiles

LottieFiles2 лет назад

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

ReallyBeingCreative2 лет назад

@figma Awesome! will check it out

Похожие видео

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 просмотров • 1 год назад

#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,183 просмотров • 3 лет назад

#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,335 просмотров • 3 лет назад

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 просмотров • 2 лет назад

🦀 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 просмотров • 6 месяцев назад

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

11,488 просмотров • 1 месяц назад

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 просмотров • 6 месяцев назад

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 просмотров • 1 год назад

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,348 просмотров • 3 месяцев назад

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,133 просмотров • 1 месяц назад

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 просмотров • 6 месяцев назад

✨ 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 просмотров • 2 лет назад

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 просмотров • 3 месяцев назад

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,712 просмотров • 2 месяцев назад

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 просмотров • 2 лет назад

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 просмотров • 2 лет назад

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 просмотров • 6 месяцев назад

🔥THE HANDBAG OF THE GODS🔥 ✅PRESENTS THE 10 AUTOGRAPHS THAT ARE GOING IN THE COLLECTION IS UP TO YOU TO FIND THEM✅ ✅CRISTIANO RONALDO AUTO 1/7 ✅LIONEL MESSI AUTO 1/1 ✅JORDAN LOVE AUTO 47/75 ✅EDWARDS EDWARDS ROOKIE AUTO ✅GUNNAR HENDERSON ROOKIE AUTO 06/20 ✅SHAQUILLE O’NEAL ROOKIE AUTO ✅LAMINE YAMAL ROOKIE AUTO 47/99 ✅JACKSON HOLIDAY ROOKIE AUTO 247/299 ✅STEPHEN CURRY AUTO ✅LIONEL MESSI AUTO 4/15 Follow us on social media for exclusive updates and be part of this groundbreaking journey! 🌐 #messi #stephencurry #jacksonrookie #lamineyamal #shaquille #cristianoronaldo #edwards #handbagofgods #vaultd #vaultd5

🔥THE HANDBAG OF THE GODS🔥 ✅PRESENTS THE 10 AUTOGRAPHS THAT ARE GOING IN THE COLLECTION IS UP TO YOU TO FIND THEM✅ ✅CRISTIANO RONALDO AUTO 1/7 ✅LIONEL MESSI AUTO 1/1 ✅JORDAN LOVE AUTO 47/75 ✅EDWARDS EDWARDS ROOKIE AUTO ✅GUNNAR HENDERSON ROOKIE AUTO 06/20 ✅SHAQUILLE O’NEAL ROOKIE AUTO ✅LAMINE YAMAL ROOKIE AUTO 47/99 ✅JACKSON HOLIDAY ROOKIE AUTO 247/299 ✅STEPHEN CURRY AUTO ✅LIONEL MESSI AUTO 4/15 Follow us on social media for exclusive updates and be part of this groundbreaking journey! 🌐 #messi #stephencurry #jacksonrookie #lamineyamal #shaquille #cristianoronaldo #edwards #handbagofgods #vaultd #vaultd5

Vaultd5

13,292 просмотров • 1 год назад