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

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?