The Magnet feature helps you align elements more precisely when designing in Abyssale. It automatically “snaps” layers to nearby edges, guides, or other layers, making layout adjustments fast and accurate. Snapping works while you move a layer and while you resize it, and you can also measure the distance between layers.
By default, this feature is enabled in the editor.
However, some designers prefer full manual control over positioning. In that case, you can easily disable it.
Where to find the Magnet option
Edit one of your designs from a project.
Locate the Zoom button at the top-right corner of your canvas in the design editor (it displays the current zoom level, e.g., 40%).
Click the zoom percentage to open a dropdown menu.
In this menu, you’ll see several toggles, including Display rulers, Enable magnets and Enable safe zones.
Toggle Enable magnets on or off depending on your preference.
DRAFT NOTE: The zoom menu screenshot above is the original one. Optionally refresh it with screens/zoom-menu-enable-magnets.png if the menu look changed.
How it works
When enabled, your layers will snap automatically to nearby edges, centers, guides, or other layers as you move or resize them.
When disabled, layers will move freely without snapping, allowing for manual, pixel-perfect adjustments.
Snap indicators are drawn in orange: an orange line shows the alignment, and a small marker shows the point where your layer snapped.
Snapping while resizing
Snapping also applies when you drag a resize handle. For example, if you drag the right-middle handle of a layer toward another layer, its edge snaps exactly to the edge of the other layer, and a small marker shows the snap point.
This gives you flexibility to choose the best workflow for your project, whether you need quick alignment or precise positioning.
Pro tip: If you’re creating designs with multiple aligned elements (like text blocks or buttons), keep magnets enabled to maintain consistent spacing.
For intricate or overlapping layouts, disabling magnets can help avoid unwanted snapping while you fine-tune placement.
Snap to equal spacing
When you move a layer between two other layers, it snaps to the position where the gap on both sides is the same. The distance is displayed on both sides, for example 110px | 110px, and an orange line shows the alignment.
Place two layers on your canvas with some space between them.
Drag a third layer between them.
When both gaps are equal, the layer snaps and the two distances are shown.
Note: Snapping needs Enable magnets to be turned on.
Measure distances with Alt (Option on Mac)
You can check the exact space between two layers at any time:
Select a layer.
Hold
Alt(Optionon Mac).Hover another layer.
An orange line and an orange label show the distance in pixels between the two layers, for example 110px for two layers side by side.
If the hovered layer is placed diagonally from the selected one, both the horizontal and the vertical distance are displayed (for example 440px horizontally and 200px vertically), with orange guides showing each measurement.
