Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:15Length:2.5 hours
Code friendly design with adobe xd 400x277
  • Overview
  • Transcript

2.7 Check for Half Pixels and Prevent Misalignment

Another common problem that can come up and cause designs to be not quite code friendly is misalignment.

Objects that, to the eye, look as if they’re aligned can actually be a few pixels out, leaving the coder to wonder if they ought to position things exactly as they are in the design or make adjustments and corrections. Another type of misalignment that can occur is half-pixel positioning—for example, if a vector shape has a width of 100.5px instead of 100px.

In this lesson we’ll look more closely at the type of alignment issues you should be aware of and how to resolve them.

We’ll also cover a couple of workarounds that will allow us to get our spacing consistent, regardless of the fact that Adobe XD doesn’t yet have rulers or guides.