How can I clear out all of a component's settings for a variant?

Wondering if there’s a way to reset a screen size based variant? I am not entirely sure that deleting it from the screen deletes its previous customization. Thank you.

Hey Davide, to clear all styles (note that this is across your project, not only for a specific component) I believe you can delete the existing breakpoint and create a new one. See attached video.

Thank you @tiago. I’m not planning on deleting an existing breakpoint, since I would lose the customization of tens of components for that specific screen size variant. I’m referring specifically to the customization of one component for that screen variant. Does this clarify my question?

Oh, I see. In that case I’m sorry but I believe we don’t currently have a shortcut to clear all styles for all elements in a component. Deleting the variant from screen will not remove any customization. I think the easiest way to clear all the styles would be to clear one by one by clicking in the red dots in the tree in the left sidebar (see attached video).

@tiago Thank you. Follow up question: after a global variant has been customized when editing a page, is there a way to delete it as a page variant if the customization is removed? I can’t seem to be able to delete a global variant from the canvas after I’ve added it to a page. Thank you.

Hey @easy_jellyfish, the screen sizes on canvas are not synced with responsive breakpoints (aka screen variants). For example, you can have several screen sizes (corresponding to the resolution of different devices) even without using screen variants. So if you delete a breakpoint, no artboard will be removed from canvas automatically. If you deleted the variant, though, all the customization that the page had is deleted with it.

@tiago Okay, my follow up question is not related to screen sizes. Just global variants. Basically I can’t find a way to delete a global variant from a page after I have selected to customize it. It seems to be there forever. Maybe I’m not seeing where to click to delete it?

Oh, I see! Sorry, I misunderstood it. Just click in the “Responsive breakpoints” section in the left sidebar. There is a Trash button for each breakpoint (which correspond to a screen variant).

@tiago Hmm. I’m wondering how to remove a generic global variant (not a screen breakpoint) after it’s made it on a page. To reproduce: 1) Create a new project. 2) Create a global variant. 3) Customize the global variant on a page. 2) Remove the global variant customization. Where do I click to remove the global variant from appearing on the page without any customization at this point? The global variant needs to be used on other pages, but removed from pages where it’s not used. Thx!

I’m sorry, @easy_jellyfish. I read “screen variant” when you wrote “global variant” :grimacing: You should be able to do that by right-clicking the artboard in the canvas and “Delete artboard” (the shortcut is Ctrl-Del). However, I just found a bug while trying that. It’s deleting not only the artboard I want, but others with the same screen size. I’ll file that to fix it as soon as possible. (attached is a video with the solution and the bug)

@tiago Thank you. Removing these unused/junk elements would be appreciated as it would reduce the time to render content on the screen.