Swapping variants between Desktop and Mobile using variables

Hi, I have a component with 2 sizes (variants): Desktop and Mobile. They were built before variables came out so everything within the component is manually done up. Right now non-designer users find it annoying that whenever they drag a instance from the library to their desktop/mobile frame, they have to manually switch the variant between the two sizes.

I’ve watched this youtube video that does what I need but it seems weird that the binding of variable is done on an instance and not on the component itself. This makes it useless if the end user has to do all these steps like creating variables, binding the instance, just to swap between sizes automatically. I also do not want to create the components from scratch because we have too many,

Is there a way to bind the variant names to the frame names?