Round to Pixel command
XD could really use a Round to Pixel command. Yes, I'm pulling this straight from Sketch, but it's awfully useful. The command simply rounds every anchor point to the nearest whole-pixel value, eliminating fractional pixels.
This feature has been added in our November update (version 0.6.2): choose Object > Align to Pixel Grid to tweak the X/Y/W/H so the object(s) are crisply aligned with the pixel grid. You can use this command with a multiple selection or with groups selected to align multiple objects at once.
Note: aligning to pixel grid does not always mean the X/Y/W/H won’t have fractions. For center-stroked shapes (lines and Pen tool, mostly), sometimes the X/Y need to end in .5 to keep the stroke crisply aligned on-pixel.
I see some people in the discussion thread here are asking for snap to pixel “by default.” Adobe XD should already do that, with very few exceptions (see https://adobexd.uservoice.com/forums/353010/suggestions/16962847-resizing-multiple-selection-or-group-loses-pixel-alignment). If you’re encountering other situations where objects you created in XD are not pixel aligned by default, please file a new bug here in UserVoice.
Thanks everyone for all your feedback and votes on this feature!
-
Landen commented
In case anyone comes across this thread in the future, it is possible to add a keyboard shortcut to the Object > Align to Pixel Grid menu item on macOS without needing a third party extension.
Go to System Preferences, Keyboard, App Shortcuts, and hit the plus button. Select Adobe XD as the application (you may need to select "other" first, then find it in your Applications folder), set "Menu Title" to Align to Pixel Grid (with that capitalization), and set the keyboard shortcut to whatever you want (I chose ⌘⇧ X)
-
Hugo F. commented
Hello everyone,
Just like the majority of you, I find the pixel-fractions super annoying when designing. Even though we have the option to align to the Pixel Grid, there is no shortcut for it.
Since I rely heavily on shortcuts (that save a lot of design time) and so far there's no way of adding it to the "Align to Pixel Grid" option, I've spent a couple of hours creating a simple and lightweight plugin that adds the shortcut to that command, saving a lot of time.
You can download the plugin here: https://github.com/hugompfigueira/align2pixel-xd-plugin
You will find all the documentation, how to add it to Adobe XD, and how to use it.
This may be just a quick fix until Adobe adds that option to edit/create shortcuts.
Thanks!
-
Martin commented
Is there a way to get a shape point snapped to the pixel grid, please?
-
Aaron commented
Why is it that all line lengths are aligning to half-pixels? It's really cumbersome to keep removing that .5 pixel to get it aligned to the pixel grid. I understand if you have an odd numbered width, but that should not affect the length of the line from snapping to a whole pixel.
-
Daniel Amante commented
@ Peter.... Wouldn't it make sense to put the button where the coordinates are? instead of searching through the nav menu.... Basic UX/UI, no?
-
Peter Scott commented
You create an element at 56x56px, but then you move it around and the spacing between elements then has decimals. When all you just want it to snap to grid.
-
Michael Tardi commented
Hello,
XD on Windows doesn't have the top level menu, so I can't choose the option "Object>Align to Pixel Grid"...Is there a keyboard shortcut ?
Thx,
Mike -
Anonymous commented
Snap to pixel by default would be way better. Never in my puff have i specified a box to be 212.5 x 214.3px with a margin of 22.5px all around. :/
If you're building an app for Web/App UI it should be restricted as such.
PS Blend modes please
-
Waleed commented
I don't understand why we need subpixels!!! they are so annoying.
-
Cubelodyte commented
Thank you.
-
Tony commented
I get decimal values constantly. They are rarely perfect .5 values either. I find myself wandering through my prototypes looking for them and removing them manually.
-
Armando Scuro commented
Yeah, If we can we have a keyboard shortcut for that, that will be epic
-
Andrew commented
RE: "Note: aligning to pixel grid does not always mean the X/Y/W/H won’t have fractions. For center-stroked shapes (lines and Pen tool, mostly), sometimes the X/Y need to end in .5 to keep the stroke crisply aligned on-pixel."
Can someone please explain to me why this happens? I find the .5 values to be a nuisance when aligning and measuring distances between elements.
I'm assuming this has something to do with the line being centered over the pixel, but I'm not sure I fully understand. If I were to create a 1px tall rectangle instead, I feel that it behaves more like how the line SHOULD behave. Am I missing something?
-
James commented
Snap to pixel by default not by command please Tom.
-
Joel Cory commented
This is a constant irritation. Please snap to pixels by default when resizing objects. The measure feature doesn't work when objects don't snap to pixels.
example: A box is 100 x 100px on the 100x 100y. Drag another box to position it but the second box is 100.53x 100.52y these items will not "align" properly.
-
Isaac Powell commented
In addition, resizing things like boxes breaks objects from the current rounding into fractional pixels at times.
-
Isaac Powell commented
Yes, make align to pixel the default for all, with object-level override available.
-
James commented
I agree with the comments below. Snap to pixel should be default and other pixel options can be tweaked as and when desired. Glad to see this started.
-
Louis commented
Having to mess with fractional positioning in the input field when resizing or positioning when there could be an option to be all be aligned to pixel grid would be great.
-
Note: XD should keep most of your content automatically snapped to the pixel grid by default. The main case it doesn't is when creating paths with the Pen tool.
If you're seeing other examples where content you created in XD is not crisply aligned to pixels, please let us know by creating a bug report at https://adobexd.uservoice.com/forums/353010-adobe-xd-bugs.