Easily resize/snap Artboard edges to match content bounds
Working on a landscape prototype version of a site, and to simulate the scrollable pages I bring the assets in, place them, and then adjust the height of the Artboard to match — but it would be really nice if there were Smart Guides when doing so, so the Artboard snaps to the height of the assets on the page.
Size of artboard should fit content exactly.
J Fox commented
I'm prototyping functionality in a web page design that expands or collapses a section of content under the header. I'm using a component state for the collapsed and then the expanded content section. It works great, except that my webpage artboard doesn't automatically resize to extend down to allow for the expanded section. So I basically have to start out with the collapsed sections with a really unecessarily long artboard/webpage, just so that when stakeholders try out the expand button, they will continue to see all of the content on the page.
Vlad Iepure commented
Please include the functionality to fit an artboard to the size of the content by double-clicking on the resize corners (similar to what we have for text).
As in the title.
It would also be good with the artboards if I could adjust the height of the artboard from the top. Currently the top of the artboard is fixed so if you increase the height from the top, the content just comes along for the ride. Instead it would be good if acted just like the bottom of the artboard and it created new artboard space.
Christoph Maeder commented
Everything is snapping on everything except the artboard – why??
it would be a nice feature if you could define the footer element and the height of the artboard adapt automatically to the footer. Or at least make the artboard bottom magnetic to elements..
XD already has a 'fit bounds to content' function for components, so it'd be handy if this could be an option on artboards too. I'm constantly going through my boards adjusting the bottom edge to get rid of excess white space
Trim the height of the artboard by double clicking on the bottom handle (similar to the way we can now trim text area boxes to the height of the content by double clicking the bottom handle)
Edward Parsons commented
Similar to the recent update 'Shortcut for resizing area text to fit content'.
Double-click the bottom of an artboard resize handle to automatically adjust the height of the artboard to snap to the last element on the page
Nathaniel Thompson commented
Just like Mark said. Its VERY ANNOYING to have to readjust my artboard every time the length of my page increases a little bit.
"I want my footers to remain consistent and I want to work quickly. I want the art board / screen height adjustment to snap to the bottom of the content/art/shape so I don't have to zoom in to make sure the bottom of the art board is matched up perfectly or have to calculate every distance."
Ben Tupper commented
The plugin that will do this is called Trimmit. Free. Works.
I did a search inside XD's plugins panel (click the little + to open search) after selecting plugins (bottom left - looks like a lego piece) in XD's ui. I searched for "snap" (no quotes of course). It found something called Trimmit. I installed it to give it a try. It's free and installs in the XD plugins panel instantly. I went to the artboard in question which is 1280 x 800 (default Web 1280 XD artboard size). I clicked on it to select the artboard. I clicked the Trimmit button in the plugins panel. It instantly increased the length (from the top downward) to match the artwork (1280 x 3309) on the artboard.
Does exactly what I need as I take lengthy screenshots from a web app and import them into XD. I would imagine it Trimmit will make artboards snap to artwork for multiple artboards at a time, but I only tried it with one and it just worked.
Looks like this was created by someone from Adobe... here's the link to his GitHub page: https://adobe.com/go/xd_plugins_discover_plugin?pluginId=3a010606
This would be so helpful. Specifically snapping thing to the bottom of content. Then I'd be able to quickly add my 24 px or whatever padding to the height without a bunch of zooming and fiddling and anxiety >_<
I've designed the screen but add a new element to the design. Now I have to adjust my screen size.
I want my footers to remain consistent and I want to work quickly. I want the art board / screen height adjustment to snap to the bottom of the content/art/shape so I don't have to zoom in to make sure the bottom of the art board is matched up perfectly or have to calculate every distance.
They got a plugin that does this. Make it a core feature.
Serkan Zararsız commented
Such a small important detail which saves a lot of time in zooming in and out!
This is a feature that I got added to Sketch. Super useful to place your footer and then drag the bottom of the artboard upwards and then it "snaps" to the bottom of the footer element.
Thomas Hale commented
I agree! Illustrator has the feature to resize artboard to fit around selection. It is often not possible to see the height/width of objects selected if they are not grouped adding extra work to get it done. Having a feature to more easily snap to boundaries is needed greatly.
+1 for this idea. Is this in the backlog?
Damian Nagrabski commented
It would be great to have that option that InDesign has which if 'fit frame to content'.