Paste component overrides

Now that auto layout improvements and Variants have landed, my pages have more and more nested components. One common friction point I run into is the following:

  • Pull a component out the library
  • Set up overrides on a nested component, e.g. a button’s label or icon
  • Decide I don’t want that button to go there, or I want to use a different component
  • Set up the same overrides on a different button.

What I’d like to have is some kind of “paste overrides” functionality, or maybe a “replace with component from clipboard.” Basically, I’d like to be able to:

  • Copy my button instance with all its overrides
  • Select another button or maybe some random nested component instance
  • Hit Paste and watch the button and its overrides replace the selected layer

It would really just be a shortcut for selecting a nested instance, using the swap menu to choose Button, and re-filling out the overrides. But saving time and cognitive load in those little repetitive actions would make the design/prototyping experience feel more direct, IMO.

Anyone have any other ideas, workarounds, plugins to help make this little process more painless?

1 Like

This little plugin I made will solve this issue you mentioned :wink:

3 Likes

Thanks, that plugin is helpful! Still a bit of a pain to work with, would love to see Figma provide the capability to have proper local overrides without having to detach all the time.

Plugin is super helpful but totally agree that this should be native functionality now. With the way Figma is pushing design system, we are all nesting components like crazy. A common use case for me: I mockup a 10-column data grid using a data grid component that has about 4 layers of nested components (table>data row>cell>etc). I might put representative data into the top 4 rows of the table, but for the rest, I just want to copy the last row.

1 Like