Making something a component ruins drop shadows and pixel to pixel alignment
COMPONENTS! Loving the idea...
...hating how it expands the component margins way beyond the actual shape or graphic. Making a duplicate of the master component turns the margin into a mask; THUS when you give the element a drop shadow... it gets clipped.
Dear XD Community,
Thanks for your feedback and for sharing with us the areas that we need to invest in and improve on.
We have introduced several enhancements to components in XD August release. Those enhancements address the following:
1) Drop shadows and blurs will be rendered outside the component bounding box while will help with layout and pixel alignment. For existing components with those issues, right-click the master component and select ‘Fit Bounds to Content’ to reset the bounds on the master component and all instances
2) Component bounds will automatically adjust (expand or shrink) to fit the content within the component while keeping all component instances in sync. For existing components with those issues, right-click the master component and select ‘Fit Bounds to Content’ to reset the bounds on the master component and all instances
3) No more Fractional Pixels with responsive resizing components
To learn more about those fixes, please check:
Please give try out those enhancements and share with us your feedback.
77 commentsComments are closed
this is the same bug as another more popular one. this thread should be merged.
impossible to align component "cards" with dropshadows... too bad, I was precisely designing a shadowed card masonry...
I can see why they would do it for exporting assets' sake but I mean seriously.
What if I make a component that has a drop shadow that's offset by 20 px in Y with whatever blur value? Guess what, the bounding box of the component is set from the top two pixels extended above the actual shape to the bottom out to where the drop shadow stops.
Pardon my french ADOBE, but why are you fkin' up like this? WTFAdobe!
You are being lazy beyond reprieve.
EVERYONE, please upvote this post, comment and share. Clearly, the people behind this program are lacking some obvious internal judicial oversight to make a product that actually lives up to the Adobe name and legacy.
Keep this system for when devs decide to download an asset from the shared file, but for the love of the design gods. Keep the bounding box to the shapes. Component is a great idea but the extending bounding boxes are fkin' with my alignments.
I describe every single step. I attach every single screen so you'll understand better.
- I create a simple rectangle
- I make it a component
- I add a shadow to the rectangle
- Then, I click out of the component. The shadow is gone!
So, the component box is cutting out all properties that are outside of the green box
Alexander L commented
If I want to align a second component within lets say a box with shadow, the alignment is counted towards the edge of the component (where the shadow ends) and not the box's borders.
So a square box of 32x32 with a dropshadow of x.0 y.1 b.2 becomes 38x38 and the box is no longer centered. Its offset with 2 pixels on the top and 4 pixels on the bottom. If you then place a second component within and try to centre it, the cyan align help guide will count towards the edge of the 38x38 component area and not the actual box.
If you try and move the second component into the same layer as the first component (the square box), it won't show up when dragging the combined component (existing of two components) from the asset panel
Also, if you add shadow to an object in a component AFTER creating the component, it's being clipped and doesn't show up at all.
Hey, I also wasted a lot of time informing myself on this bug/issue. I hope they fix it soon. It's really annoying to deal with it cause I always have to turn off the shadows and turn them on later or count the pixels to ensure pixelperfect alignment.
Benny Liebold commented
The current behavior makes pixel perfect alignment of elements within components using box shadow (e.g. a simple card component) a real pain - now I have to acutually count the pixel distances by moving elements from the edge inwards using the arrow keys.
- the outline doesn't get corrected once the shadow is removed,
- when shared for development, there's an additional, unwanted group around the object, including the one where the shadow has been removed.
I am seeing this too and it’s not expected behaviour at all. Drop shadows should be excluded from clipping bounds and not counted towards component sizing.
Bryce Flynn commented
Too much weirdness and random effects with "components." Adobe please roll it back until fully tested and users agree that these bright ideas are helpful.
Bryce Flynn commented
Components are busted symbols. Spacing is random and uncontrollable. For example. I use a text string grouped with an FA icon in its own box to create a checkbox component. When the original text label length is short, a longer new label may be masked or may not be the results appear to be random. If the longer string does stretch the text container - as it has done in the past, and should do - it no longer shortens when a shorter string is entered. Madness, and totally unacceptable. Adobe you have wrecked my productivity and blown my deadlines through this poorly tested and ill-considered "upgrade".
ROLL IT BACK NOW!
Seems like this only affects components with drop shadows. This a weird behaviour for positioning UI elements like cards with shadows...
Also noticed that removing that shadow still leaves the extra padding to the component. It doesn't seem to update.
Is this the intended behaviour?
I've just updated my XD. With the new component feature, the sizing of all my previous symbols that had shadows is off.
For example, a 30x30 box with a shadow, that was previously turned into a symbol, now is shown as a 31x31 component. As soon as I ungroup the component, it turns back to 30x30 px that it was before.
This creates a big problem in spacing calculations, especially since it doesn't always add a fixed number of 1px. Sometimes it is 2px.
Problem: Makes it harder to align items
After the update to v19 some of my symbols (now components) have padding added which makes the object bigger than it really is. Have looked for hidden elements that could make the bounding box bigger but there are none that I could find.
Since May release. With the introduction of components my symbols now include the background shadows. Their size is odd and alignements and distances are a pain.
In the era of material design and shadows this is really annoying. Previously the shadow was present but not part of the symbol or component sizes.