Screen adaptation

Special note on exterior parameters: Screen adaptation

Entrance：Parameter Setting Area>>>Exterior>>>Screen adaptation

👉Recommended Reading: Creation Tips - Adaptation Adaptation Issues

📒Adaptation Rules: Calculating Layer XY Coordinates

As shown in the diagram, the origin point (0,0) is located at the top-left corner of the canvas.

The coordinates of each layer in the canvas are calculated based on the top-left corner of the layer. For example, a finger layer with coordinates (100,100) indicates that the left upper corner of the finger layer is located 100 pixels from the origin.

📒Default Adaptation Scheme

Layers are based on the center point of the canvas, maintaining their relative coordinates to this center.

When assets/layers are added to a project, their screen adaptation method is set to “center horizontally & center vertically” by default. This means the asset will always appear in the center of the screen regardless of size

💡By default, there is no need to adjust the Screen adaptation. The layout and positions you edit in the canvas will automatically adapt proportionally across different devices. Occasionally, you may want to adjust certain layer adaptations for optimal visual effects, such as setting product information to "bottom centered."

Recommended Reading: 📒Adaptation Tips

📒Demonstrating Different Adaptation Methods

If you adjust the edge adaptation, layers will anchor to the four edges of the canvas, keeping the distance from the respective edges consistent across screen sizes.

For example, if a layer is set to anchor to the top-left corner, with its coordinates (100,100) on a 750x1334 canvas, it will maintain those coordinates when viewed on screens of other sizes.

Number	Adaptation method	Screen adaptation button	iPhone6【750*1334（default）】	iPhone X【828*1972】	ipad【768*1024】
1	Center Fit (Default adaptation method)
2	Top adaptation
3	Bottom adaptation
4	Left adaptation
5	Right adaptation
6	Upper left corner adaptation
7	Upper right corner adaptation
8	Lower left corner adaptation
9	Lower right corner adaptation

📒Suggestions for adaptation adjustments

💡Due to the variety of materials, you can adjust the screen adaptation methods of layers as needed. Note that the Screen adaptation is set to separate configurations for landscape and portrait modes by default, so you will need to adjust them individually. If the adaptation methods are the same for both orientations, you can uncheck the option.

💡After setting the Screen adaptation, it is recommended to preview promptly and switch between different devices and orientations to confirm the final effect.