Hello, I’m working on mobile app interface for 3 years as a product designer, it’s quite big project.

I now have to make desktop webapp version of this interface but before starting I’m asking the community how to sync screens of both versions.

I’ll will try to be clear :

Currently, if I duplicate all screens to change them in desktop size, both versions won’t be connected. In other words, if I change background color of an element on mobile homepage version, background color won’t change on desktop homepage version while it should be the same.

I want to know the best way to sync mobile and desktop version of every screen? I don’t want to modify both versions everytime I will modify an element, it will be a big waste of time and mistakes for sure.

Should I convert every single screen in component? Which is not a big problem actually, but I ask the question anyway because I’m not sure that components were made for this.

And to me, both should coexist, I would like to switch from mobile version to desktop version easily, for presentation for instance. So maybe have both synchronized version in 2 seperate pages.

Thank you for your help.