Back to videos

Figma

How Figma made copy + paste faster

Platform
YouTube
Length
2:00
Spoken language
English
Views
4.5K
Median cut
3.92s
Face on screen
66%
Dark frames
58%
Figma How Figma made copy + paste faster at 0:00corner inset
FigmaHow Figma made copy + paste faster
0:00
Figma How Figma made copy + paste faster at 0:06wide presenter
FigmaHow Figma made copy + paste faster
0:06
Figma How Figma made copy + paste faster at 0:08medium presenter
FigmaHow Figma made copy + paste faster
0:08
Figma How Figma made copy + paste faster at 0:12wide presenter
FigmaHow Figma made copy + paste faster
0:12
Figma How Figma made copy + paste faster at 0:17
FigmaHow Figma made copy + paste faster
0:17
Figma How Figma made copy + paste faster at 0:18
FigmaHow Figma made copy + paste faster
0:18
Figma How Figma made copy + paste faster at 0:19
FigmaHow Figma made copy + paste faster
0:19
Figma How Figma made copy + paste faster at 0:20
FigmaHow Figma made copy + paste faster
0:20
Figma How Figma made copy + paste faster at 0:21medium presenter
FigmaHow Figma made copy + paste faster
0:21
Figma How Figma made copy + paste faster at 0:24medium presenter
FigmaHow Figma made copy + paste faster
0:24
Figma How Figma made copy + paste faster at 0:28
FigmaHow Figma made copy + paste faster
0:28
Figma How Figma made copy + paste faster at 0:28
FigmaHow Figma made copy + paste faster
0:28
Figma How Figma made copy + paste faster at 0:29
FigmaHow Figma made copy + paste faster
0:29
Figma How Figma made copy + paste faster at 0:30
FigmaHow Figma made copy + paste faster
0:30
Figma How Figma made copy + paste faster at 0:32close presenter
FigmaHow Figma made copy + paste faster
0:32
Figma How Figma made copy + paste faster at 0:35wide presenter
FigmaHow Figma made copy + paste faster
0:35
Figma How Figma made copy + paste faster at 0:43
FigmaHow Figma made copy + paste faster
0:43
Figma How Figma made copy + paste faster at 0:45
FigmaHow Figma made copy + paste faster
0:45
Figma How Figma made copy + paste faster at 0:49
FigmaHow Figma made copy + paste faster
0:49
Figma How Figma made copy + paste faster at 0:51medium presenter
FigmaHow Figma made copy + paste faster
0:51
Figma How Figma made copy + paste faster at 0:56wide presenter
FigmaHow Figma made copy + paste faster
0:56
Figma How Figma made copy + paste faster at 0:59
FigmaHow Figma made copy + paste faster
0:59
Figma How Figma made copy + paste faster at 1:01
FigmaHow Figma made copy + paste faster
1:01
Figma How Figma made copy + paste faster at 1:03medium presenter
FigmaHow Figma made copy + paste faster
1:03
Figma How Figma made copy + paste faster at 1:08
FigmaHow Figma made copy + paste faster
1:08
Figma How Figma made copy + paste faster at 1:15wide presenter
FigmaHow Figma made copy + paste faster
1:15
Figma How Figma made copy + paste faster at 1:16
FigmaHow Figma made copy + paste faster
1:16
Figma How Figma made copy + paste faster at 1:19
FigmaHow Figma made copy + paste faster
1:19
Figma How Figma made copy + paste faster at 1:20medium presenter
FigmaHow Figma made copy + paste faster
1:20
Figma How Figma made copy + paste faster at 1:21medium presenter
FigmaHow Figma made copy + paste faster
1:21
Figma How Figma made copy + paste faster at 1:28close presenter
FigmaHow Figma made copy + paste faster
1:28
Figma How Figma made copy + paste faster at 1:31
FigmaHow Figma made copy + paste faster
1:31
Figma How Figma made copy + paste faster at 1:34wide presenter
FigmaHow Figma made copy + paste faster
1:34
Figma How Figma made copy + paste faster at 1:35
FigmaHow Figma made copy + paste faster
1:35
Figma How Figma made copy + paste faster at 1:36medium presenter
FigmaHow Figma made copy + paste faster
1:36
Figma How Figma made copy + paste faster at 1:40
FigmaHow Figma made copy + paste faster
1:40
Figma How Figma made copy + paste faster at 1:43
FigmaHow Figma made copy + paste faster
1:43
Figma How Figma made copy + paste faster at 1:43wide presenter
FigmaHow Figma made copy + paste faster
1:43
Figma How Figma made copy + paste faster at 1:48
FigmaHow Figma made copy + paste faster
1:48
Figma How Figma made copy + paste faster at 1:49
FigmaHow Figma made copy + paste faster
1:49
Figma How Figma made copy + paste faster at 1:52
FigmaHow Figma made copy + paste faster
1:52
Figma How Figma made copy + paste faster at 1:53
FigmaHow Figma made copy + paste faster
1:53
Figma How Figma made copy + paste faster at 1:58
FigmaHow Figma made copy + paste faster
1:58

Transcript of How Figma made copy + paste faster

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:00Pasting one variable component shouldn't make Figma drag the whole component along,
  2. 0:03but that's how it can feel today.
  3. 0:05We fixed that and a bunch of other things on the copy-paste path.
  4. 0:09Hi, I'm Diane, an engineer at Figma focused on performance.
  5. 0:12Copy and paste sounds like a solved problem until you're working in a real production use case.
  6. 0:17A component can have hundreds of states and a frame can be full of nested instances.
  7. 0:21We've heard that in some cases copy and paste can take up to seconds.
  8. 0:24So we put in some work and here are three changes I want to highlight.
  9. 0:27The biggest one is state group rehydration.
  10. 0:30State groups are how a component carries all of its variants, every size, theme, and breakpoint.
  11. 0:35The problem is when you copy one used variant, Figma used to copy all of them.
  12. 0:39Now, copy writes only the variants you actually use, and paste fills in the rest in the background from the files published to copy in S3.
  13. 0:46On a component with over 1,000 states, paste went from 2 seconds to 400 milliseconds.
  14. 0:50Copy went from 700 plus milliseconds to about 50, 15 times faster.
  15. 0:55the work you feel is fast, and we handled the details behind the scenes.
  16. 0:59Second, we stripped expensive observers off the copy path.
  17. 1:03Every node you copy used to drag along a chain of subscriptions and dependency walks that copy didn't actually need.
  18. 1:08We cleaned those up so even if you're not working in giant components,
  19. 1:11the long-tailed copies that used to make Figma feel like it was dragging should be noticeably lighter.
  20. 1:16Third, we made paste feel faster, not just be faster.
  21. 1:20We made two changes.
  22. 1:21We deferred the heavy bookkeeping that runs after paste, so the pasted content appears
  23. 1:25on your canvas sooner, even when total paste time is the same.
  24. 1:29The moment of arrival is earlier, and on heavy paste, the loading spinner now shows up faster,
  25. 1:33so you know the Figma heard you.
  26. 1:35We built these changes for the real-life headaches you've been working with, the complex files
  27. 1:39with components with hundreds of variants, the one with all of your product screens.
  28. 1:44That's all for today, but there's more coming.
  29. 1:46Let us know in the comments what you'd like to see next.
29 lines · 382 words