Voltar aos vídeos

Figma

How I build motion design plugins as a product designer | Show Your Work

Plataforma
YouTube
Duração
4:26
Idioma falado
inglês
Visualizações
4,5 mil
Corte mediano
7.64s
Rosto em cena
60%
Quadros escuros
3%
Figma How I build motion design plugins as a product designer | Show Your Work at 0:00medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:00
Figma How I build motion design plugins as a product designer | Show Your Work at 0:03medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:03
Figma How I build motion design plugins as a product designer | Show Your Work at 0:05medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:05
Figma How I build motion design plugins as a product designer | Show Your Work at 0:06medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:06
Figma How I build motion design plugins as a product designer | Show Your Work at 0:07
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:07
Figma How I build motion design plugins as a product designer | Show Your Work at 0:08
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:08
Figma How I build motion design plugins as a product designer | Show Your Work at 0:09
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:09
Figma How I build motion design plugins as a product designer | Show Your Work at 0:11
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:11
Figma How I build motion design plugins as a product designer | Show Your Work at 0:12wide presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:12
Figma How I build motion design plugins as a product designer | Show Your Work at 0:13medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:13
Figma How I build motion design plugins as a product designer | Show Your Work at 0:16
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:16
Figma How I build motion design plugins as a product designer | Show Your Work at 0:16
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:16
Figma How I build motion design plugins as a product designer | Show Your Work at 0:16
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:16
Figma How I build motion design plugins as a product designer | Show Your Work at 0:17
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:17
Figma How I build motion design plugins as a product designer | Show Your Work at 0:18
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:18
Figma How I build motion design plugins as a product designer | Show Your Work at 0:19
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:19
Figma How I build motion design plugins as a product designer | Show Your Work at 0:20wide presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:20
Figma How I build motion design plugins as a product designer | Show Your Work at 0:21medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:21
Figma How I build motion design plugins as a product designer | Show Your Work at 0:27medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:27
Figma How I build motion design plugins as a product designer | Show Your Work at 0:29medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:29
Figma How I build motion design plugins as a product designer | Show Your Work at 0:30medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:30
Figma How I build motion design plugins as a product designer | Show Your Work at 0:37
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:37
Figma How I build motion design plugins as a product designer | Show Your Work at 0:41
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:41
Figma How I build motion design plugins as a product designer | Show Your Work at 0:50
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:50
Figma How I build motion design plugins as a product designer | Show Your Work at 0:51
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:51
Figma How I build motion design plugins as a product designer | Show Your Work at 0:52
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:52
Figma How I build motion design plugins as a product designer | Show Your Work at 0:54
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:54
Figma How I build motion design plugins as a product designer | Show Your Work at 0:56
FigmaHow I build motion design plugins as a product designer | Show Your Work
0:56
Figma How I build motion design plugins as a product designer | Show Your Work at 1:01medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
1:01
Figma How I build motion design plugins as a product designer | Show Your Work at 1:02medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
1:02
Figma How I build motion design plugins as a product designer | Show Your Work at 1:05corner inset
FigmaHow I build motion design plugins as a product designer | Show Your Work
1:05
Figma How I build motion design plugins as a product designer | Show Your Work at 1:13
FigmaHow I build motion design plugins as a product designer | Show Your Work
1:13
Figma How I build motion design plugins as a product designer | Show Your Work at 1:18
FigmaHow I build motion design plugins as a product designer | Show Your Work
1:18
Figma How I build motion design plugins as a product designer | Show Your Work at 1:18corner inset
FigmaHow I build motion design plugins as a product designer | Show Your Work
1:18
Figma How I build motion design plugins as a product designer | Show Your Work at 1:22corner inset
FigmaHow I build motion design plugins as a product designer | Show Your Work
1:22
Figma How I build motion design plugins as a product designer | Show Your Work at 1:29corner inset
FigmaHow I build motion design plugins as a product designer | Show Your Work
1:29
Figma How I build motion design plugins as a product designer | Show Your Work at 1:38wide presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
1:38
Figma How I build motion design plugins as a product designer | Show Your Work at 1:42medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
1:42
Figma How I build motion design plugins as a product designer | Show Your Work at 1:46medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
1:46
Figma How I build motion design plugins as a product designer | Show Your Work at 1:46
FigmaHow I build motion design plugins as a product designer | Show Your Work
1:46
Figma How I build motion design plugins as a product designer | Show Your Work at 1:53medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
1:53
Figma How I build motion design plugins as a product designer | Show Your Work at 1:54medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
1:54
Figma How I build motion design plugins as a product designer | Show Your Work at 1:58medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
1:58
Figma How I build motion design plugins as a product designer | Show Your Work at 2:01corner inset
FigmaHow I build motion design plugins as a product designer | Show Your Work
2:01
Figma How I build motion design plugins as a product designer | Show Your Work at 2:23medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
2:23
Figma How I build motion design plugins as a product designer | Show Your Work at 2:29medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
2:29
Figma How I build motion design plugins as a product designer | Show Your Work at 2:35corner inset
FigmaHow I build motion design plugins as a product designer | Show Your Work
2:35
Figma How I build motion design plugins as a product designer | Show Your Work at 2:42corner inset
FigmaHow I build motion design plugins as a product designer | Show Your Work
2:42
Figma How I build motion design plugins as a product designer | Show Your Work at 2:51medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
2:51
Figma How I build motion design plugins as a product designer | Show Your Work at 2:54medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
2:54
Figma How I build motion design plugins as a product designer | Show Your Work at 2:58medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
2:58
Figma How I build motion design plugins as a product designer | Show Your Work at 2:59medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
2:59
Figma How I build motion design plugins as a product designer | Show Your Work at 3:10corner inset
FigmaHow I build motion design plugins as a product designer | Show Your Work
3:10
Figma How I build motion design plugins as a product designer | Show Your Work at 3:18corner inset
FigmaHow I build motion design plugins as a product designer | Show Your Work
3:18
Figma How I build motion design plugins as a product designer | Show Your Work at 3:27medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
3:27
Figma How I build motion design plugins as a product designer | Show Your Work at 3:34
FigmaHow I build motion design plugins as a product designer | Show Your Work
3:34
Figma How I build motion design plugins as a product designer | Show Your Work at 3:38
FigmaHow I build motion design plugins as a product designer | Show Your Work
3:38
Figma How I build motion design plugins as a product designer | Show Your Work at 3:56medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
3:56
Figma How I build motion design plugins as a product designer | Show Your Work at 4:10medium presenter
FigmaHow I build motion design plugins as a product designer | Show Your Work
4:10
Figma How I build motion design plugins as a product designer | Show Your Work at 4:12
FigmaHow I build motion design plugins as a product designer | Show Your Work
4:12
Figma How I build motion design plugins as a product designer | Show Your Work at 4:12
FigmaHow I build motion design plugins as a product designer | Show Your Work
4:12
Figma How I build motion design plugins as a product designer | Show Your Work at 4:14
FigmaHow I build motion design plugins as a product designer | Show Your Work
4:14
Figma How I build motion design plugins as a product designer | Show Your Work at 4:17
FigmaHow I build motion design plugins as a product designer | Show Your Work
4:17
Figma How I build motion design plugins as a product designer | Show Your Work at 4:22
FigmaHow I build motion design plugins as a product designer | Show Your Work
4:22
Figma How I build motion design plugins as a product designer | Show Your Work at 4:25
FigmaHow I build motion design plugins as a product designer | Show Your Work
4:25

Transcrição de How I build motion design plugins as a product designer | Show Your Work

Transcrito por um modelo de fala a partir do áudio do próprio vídeo, não escrito pela marca. Clique em qualquer linha para ir até aquele momento.

  1. 0:00In this video, I'll show you how I built this kinetic type plugin
  2. 0:03using Figma Agent and Motion, no hour long tutorial required.
  3. 0:12I'm always looking for ways to add delightful details to products.
  4. 0:16Think playful micro interactions and loading states.
  5. 0:19So I thought, what if I could get the Figma Agent to generate
  6. 0:23kinetic type sequences directly in my file?
  7. 0:26I set out to build a reusable tool that brings type to life instantly.
  8. 0:31But when I was getting started, I struggled to articulate the type of effect I wanted
  9. 0:35and the controls I was looking for.
  10. 0:37So this is my first tip.
  11. 0:39Use screenshots to show the agent what you want, not just tell it.
  12. 0:43Then work with the agent to craft the perfect prompt for your plugin.
  13. 0:46This works really well if you know the result you're going for
  14. 0:49and need help just getting it across to the agent.
  15. 0:52Agent also quickly identified what controls I'd need in my plugin
  16. 0:55in order to achieve the different visual treatments,
  17. 0:58movement, and styles I was going for.
  18. 1:01I noticed my plugin was generating a series of static frames
  19. 1:04on canvas instead of a single animated one
  20. 1:06using motion keyframes in the timeline.
  21. 1:09Later, I realized I'd never told the agent to set keyframes.
  22. 1:13When working with the agent, it helps if you reference
  23. 1:15the specific feature or tool you want your plugin to use.
  24. 1:18The moment I explicitly asked it to use motion,
  25. 1:21everything clicked and I could see real keyframes
  26. 1:23on the timeline.
  27. 1:24And I mean a lot of keyframes, as you can see.
  28. 1:29But since I had the controls already built,
  29. 1:31I could recreate and iterate on the animation
  30. 1:34from the plugin and didn't have to manually tweak anything
  31. 1:37in the timeline.
  32. 1:38Something incredibly useful I uncovered while building
  33. 1:41is that you can ask the agent to provide a live preview
  34. 1:44within your plugin.
  35. 1:46So I asked the agent to build a live preview directly
  36. 1:49into the plugin UI, and it completely changed how I worked.
  37. 1:53Instead of generating, waiting, more generating, waiting,
  38. 1:57I could just drag a slider and watch it update in real time.
  39. 2:01As you can see here, I have 12 rows, but let's say I want eight.
  40. 2:06And then I want to play with the frequency a little,
  41. 2:08make the frequency a bit higher.
  42. 2:11And let's also play with the X amplitude,
  43. 2:14so the movement gets a little bit more dramatic.
  44. 2:19And I also want to rotate the letters, so let's do that too.
  45. 2:23When I first began prompting, I started small with a couple 2D controls, then added more as I went.
  46. 2:29This worked really well for me because it let me see how the agent handled each phase before adding the next.
  47. 2:35If you start small and build your plugin up, the agent will tell you what it's building and show you as it goes.
  48. 2:42This is really helpful if it starts heading in a direction you don't intend, or if it isn't looking quite right,
  49. 2:48you can redirect it early instead of untangling it later.
  50. 2:51Seeing how quickly Agent was creating 2D presets inspired me to ask if it could wrap text around 3D objects.
  51. 2:59As I continued prompting, the Agent kept suggesting new controls along the way.
  52. 3:03Things like spread phase and 3D tilt.
  53. 3:06Details I hadn't even thought to ask for.
  54. 3:08And I'll show you a quick example.
  55. 3:10So here I have my globe preset where you can see the type is wrapping around a 3D globe.
  56. 3:18and if I wanted to I could start to tilt the 3D orientation of the globe and it
  57. 3:25updates in real time in my live preview. The two of us kept riffing and building
  58. 3:29on each other without having to plan out every detail upfront. Now here's a quick
  59. 3:34recap. One, use screenshots to help the agent build a plugin that can create what
  60. 3:39you're envisioning. Two, reference the specific Figma features or tools you want
  61. 3:44the agent to use.
  62. 3:453.
  63. 3:46Prompt for a live preview so you can see your controls work in real time.
  64. 3:50And number 4.
  65. 3:51Start with a few controls, then build it up with the agent's suggestions.
  66. 3:55I'm going to go get back to work exploring more ways to bring Figma Motion and generative
  67. 3:59plugins into micro-interactions, loaders, hero assets, all these small touches that bring
  68. 4:05a design to life.
  69. 4:06And please let us know in the comments how you're using Figma Motion and generative plugins
  70. 4:10and what you want to see next.
  71. 4:23We'll be right back.
71 linhas · 761 palavras

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 7.64s.

Redwood AI | Mobility80K views
1X
Redwood AI | Mobility
1:0126 frames7.6s cut23% face
Comet is now available to everyone in the world. In the last 84 days...Launch1.2M views
Perplexity
Comet is now available to everyone in the world. In the last 84 days...
0:4118 frames7.6s cut6% face
Build agent-ready sites with WebMCP49K views
OpenAI
Build agent-ready sites with WebMCP
2:17115 frames7.6s cut81% face
AI Foundations: Tokens & Pricing40K views
Cursor
AI Foundations: Tokens & Pricing
3:32136 frames7.7s cut81% face
OFFEO Tutorial | Basics 18: Branded Design templates (Updated!)1K views
OFFEO
OFFEO Tutorial | Basics 18: Branded Design templates (Updated!)
3:33135 frames7.7s cut1% face
Introducing the Communities on @orbwagmi 🪐 Communities where creator...Launch
Nilesh Rathore
Introducing the Communities on @orbwagmi 🪐 Communities where creator...
0:3718 frames7.5s cut0% face
jun - Today, we're launching Aside, the AI browser you’ve waited for. ⋅ Cr...Launch1.7M views
jun
jun - Today, we're launching Aside, the AI browser you’ve waited for. ⋅ Cr...
1:2833 frames7.5s cut0% face
Introducing MicroFactory A robot that automates repetitive manual wo...Launch723K views
Igor Kulakov (MicroFactory)
Introducing MicroFactory A robot that automates repetitive manual wo...
1:2440 frames7.8s cut28% face
Teaser: Infinity Maps x The Romance of Reality197 views
Infinity Maps
Teaser: Infinity Maps x The Romance of Reality
0:3416 frames7.4s cut88% face
Pinterest | Get a Taste299K views
Pinterest
Pinterest | Get a Taste
0:158 frames7.8s cut50% face
Introducing CommunitiesLaunch731 views
Opennote
Introducing Communities
1:4948 frames7.4s cut60% face
Learn how to create videos with D-ID V4 Expressive avatarsLaunch753 views
D-ID AI Video Platform
Learn how to create videos with D-ID V4 Expressive avatars
1:4036 frames8.0s cut75% 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.

He built 100 apps and made $0. Can he fix it in 30 days?17K views
Starter Story
He built 100 apps and made $0. Can he fix it in 30 days?
14:09153 frames2.0s cut58% face
GitHub Copilot app for beginners: using the diff, terminal, and browser5K views
GitHub
GitHub Copilot app for beginners: using the diff, terminal, and browser
2:55133 frames5.8s cut62% face
How Indeed Recruit Technologies helps job seekers feel understood with Gemini847 views
Google Workspace
How Indeed Recruit Technologies helps job seekers feel understood with Gemini
3:26171 frames2.8s cut60% face
How Holcim builds the future of sustainable construction with Google AI1K views
Google Workspace
How Holcim builds the future of sustainable construction with Google AI
2:24145 frames1.9s cut57% face
Introducing Phone (4a) ProLaunch1.1M views
Nothing
Introducing Phone (4a) Pro
12:06322 frames3.6s cut57% face
Introducing Canopy A program for the most obsessed builders in hardw...Launch14K views
Furqan Rydhan
Introducing Canopy A program for the most obsessed builders in hardw...
0:2232 frames0.4s cut59% face
launching the Amie x Attio integration today!Launch
dennis müller
launching the Amie x Attio integration today!
0:145 frames60% face
Your new powerful partner - Base44 Superagents9.0M views
Base44
Your new powerful partner - Base44 Superagents
1:1473 frames0.9s cut59% face
Automate recurring developer tasks with the GitHub Copilot app | Tutorial for beginners3K views
GitHub
Automate recurring developer tasks with the GitHub Copilot app | Tutorial for beginners
4:13143 frames6.5s cut57% face
Introducing Automations: always-on coding agentsLaunch39K views
Cursor
Introducing Automations: always-on coding agents
1:3555 frames4.2s cut58% face
This weekend we're doubling Composer 2 usage in our new interface. O...Launch232K views
Cursor
This weekend we're doubling Composer 2 usage in our new interface. O...
1:3054 frames3.8s cut63% face
Introducing Cursor 3Launch
Cursor
Introducing Cursor 3
1:3054 frames3.8s cut63% face

More social

Same category, other makers, most watched first.

Your ideas, your apps—Base44622M views
Base44
Your ideas, your apps—Base44
0:5651 frames1.1s cut6% face
Turn any idea into an app with Base44538M views
Base44
Turn any idea into an app with Base44
0:5538 frames2.2s cut50% face
Build Your Website with One Sentence | Base44154M views
Base44
Build Your Website with One Sentence | Base44
0:4835 frames0.9s cut31% face
Rip The Script | Nike Football81M views
Nike Football
Rip The Script | Nike Football
6:00310 frames1.1s cut60% face
PetSmart | "Pickup in...STORE!"75M views
PetSmart
PetSmart | "Pickup in...STORE!"
0:1511 frames1.4s cut64% face
NEO The Home Robot Order Today69M views
1X
NEO The Home Robot Order Today
9:53271 frames2.8s cut25% face
Apple Education: Ready for every learning opportunity69M views
Apple
Apple Education: Ready for every learning opportunity
1:4687 frames1.3s cut40% face
Phone calls suck. So, we bought a giant telephone car, raised $65,00...64M views
Bland
Phone calls suck. So, we bought a giant telephone car, raised $65,00...
1:4854 frames4.3s cut81% face
Getting Help is Simple, With Hims36M views
hims
Getting Help is Simple, With Hims
0:3023 frames2.0s cut70% face
Hello, MacBook Neo35M views
Apple
Hello, MacBook Neo
3:50291 frames67.5s cut1% face
Build it your way with Base44.34M views
Base44
Build it your way with Base44.
0:5133 frames1.9s cut0% face
Base44 Superagents - Your Personal AI Agent28M views
Base44
Base44 Superagents - Your Personal AI Agent
0:5937 frames0.2s cut0% face
Browse every frame in the library