Align and distribute layers

Distribute and align the homepage hero assets precisely: center the headline horizontally within the hero, space the CTA and secondary link with 16px gap, align the illustration baseline with the body copy, and ensure the three feature cards have equal horizontal spacing and identical top alignment. Lock their final positions and export an annotated screenshot for QA by Monday morning.

Before I share this with visual design and QA, make the alignment and distribution obvious: surface which layers are pinned to the baseline, show measured gaps between the headline, subhead, and CTAs, flag any card whose icon or label is off by more than 2px, and suggest one adjustment that would make the layout easier for engineers to implement pixel-perfect.

I used the distribute tool and the three feature cards look even, but Maya noticed the second card’s icon is a few pixels higher. I don’t know whether the icon artboard has extra transparent pixels or the card’s internal padding differs. What checks should I run to find whether it’s the asset or the frame, and what’s the fastest fix that won’t break the exported slices we already handed to front-end?

Every release review surfaces tiny alignment issues—icons off by 1–3px, inconsistent gaps—causing back-and-forth with QA. This costs credibility. What habit change or quick checklist will catch these before reviews, and what minimal tooling or file hygiene will make consistent alignment the path of least resistance for the whole team?