X and Y Coordinates

An X coordinate and a Y coordinate indicate the location of a point along the X-axis (horizontal) and Y-axis (vertical). X and Y coordinates are written in parenthesis: (9, 30). The first value is the X coordinate and the second value is the Y coordinate.

In design software, X and Y coordinates represent a layer’s location on the canvas. If a layer is inside a frame, the coordinates represent its position within the frame.

When a layer is moved around on the canvas, its coordinates automatically update to reflect its position. Alternatively, new coordinate values can be entered, shifting the layer to a new location on the canvas.

In design software, the origin, or point where the X-axis and Y-axis intersect, is at the top-left corner of the canvas or frame. Thus, a layer at the top-left corner of a frame has the coordinates (0,0). As the layer is moved right, the value of its X coordinate increases. As the layer is moved down, the value of its Y coordinate increases.

Gif of a Figma design file. An image of Codecademy’s mascot Codey is located at the top left of a frame, with the starting coordinates (0, 0). As Codey is moved to the right, the value of the X coordinate increases. As Codey is moved down, the Y coordinate value increases.

X and Y coordinates represent the location of a single point, but a layer is generally much larger than a point. Therefore, design software assigns a reference point, which is the exact point on the layer that correlates to its coordinates. The reference point is typically located at the top-left corner of the layer’s bounds. However, in some software, it’s possible to shift the reference point.

Screenshot of a Figma design file. On the left, there’s a rectangle in a frame. The rectangle’s reference point, which is located at the top-left corner, is highlighted. On the right, the X and Y coordinates of the rectangle are displayed.

Because design software assigns X and Y coordinates for every layer, designers can precisely position all layers in the design.

For example, if a button should appear in the same position across multiple website pages, a designer can check the X and Y coordinates of the button to ensure that they are the same on every frame.

Figma, a prototyping tool and graphics editor, has more information on X and Y coordinations including alignment, rotation, and postiion.

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn UI and UX Design on Codecademy