How to make an interface for different sizes (IOS)?

Question

User interface

My task was to make a mobile interface for IOS. At first I made it for Iphone 6. Now I have a problem, I don't know how to make the interface for other sizes without starting from the very beginning.
How is this problem usually solved?

Answer 1

There are several basic rules and techniques that will help get rid of such problems.

• Design in vector. This allows our interfaces, icons and other graphics to scale to any desired size. Developers take vector graphics and easily scale them to @2x and @3x.
  
• Design in 1x. Scaling a 2x graphic to 150% to generate a 3x version causes blurry edges. Layouts for standard iPhone 6 sizes should be 375x667, not 750x1334.
  
• Sometimes devices lie. They pretend that their pixel-to-point conversion factor is 1, for example, 3x, but in reality it is 2.61x, and the source itself is scaled by 3x just for convenience. Design for iPhone Plus as if it were actually 3x. The phone itself will scale it to 87%.
  
• If you're using Sketch, you can install Fluid , a plugin that helps you change your designs on the fly to fit different screen widths.