How to sync mobile version and desktop version of an app interface?

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, so it’s hundreds of screens to convert.

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.

Thank you

If you use auto-layout, it’s often just a few adjustments after increasing the screen size. The same as using flexbox and media queries in the code.

Some components however, need custom design. Maybe just figure out what components need custom design, and make a mobile version of them?

So basically:

  • Custom components could have mobile/desktop versions- the rest could just be adjusted with auto-layout (using same components). Change direction, spacing, fill-settings etc, but using the same component.

I don’t know if this was any helpful- there may be other solutions out there. I’m just sharing my thoughts on it.

Hello Benjamin, Sorry, it’s me, I wasn’t enough precise :

Actually, both versions must coexist at the same time, which means that I will duplicate the interface in another page and manage screens order and size (using autolayout as you suggest of course).

So, in that context, Screen A will have 2 copies in “Page 1 - Mobile” and “Page 2 - Desktop”, for hundreds of screens. So if I modify anything on Screen C, M and Z, I will have to do it twice for each screen.

In other words, what you suggest is to convert my screens in another size, but it doesn’t give the opportunity to switch from one version to antoher easily. I want to have both anytime and make them synchronized.

Hope I’m clear.

Anyone has a solution?