Working with Shadows in "New Components" vs. "Old Symbols" (XD19, April/May 2019 Release)

[smuxit]

With the new April/May release from yesterday, I run into some issues with Adobe XD 19 when using shadows. With the previous versions of Adobe XD, the shadow of symbols wasn't considered into the size of "Symbols", whereas, the new "Component" architecture with "Master Components", Adobe XD 19 adds the shadow space measurement into the component (see screenshot below). Is this a bug which needs to be fixed, or, is it a feature to accept? In case it is a feature, is there any tutorial out there which explains how to use shadows inside the new component architecture that exceeds inner borders? Please notice: this issue also affects alignment issues, because usually, I don't want to align other elements on the artboard to the shadow of a component.

Thank you for your help,

Sebastian

[radekj]

+1 here. Additionally, if you remove the shadow, the dimensions stay the same. The one on the right had the same properties, but I simply removed the shadow completely after creating the component. The box stays the same, even though I'm editing the master.

[smuxit]

@radekj ... Yep, experienced that, too.

A possible solution: It would be great if a flag (maybe a checkbox) could be placed somewhere which provides two options: "Yes" and "No" for "Consider shadow in layout". But at first, let's see what Adobe XD staff thinks about it. Maybe that change is somewhat intentional, or, there is a work-around for it  ... e.g. shown in a tutorial somewhere. Thanks

[radekj]

An "Include shadows in dimensions" checkbox, set to off by default, would be useful. But to be honest I don't see the reason why the objects with shadows are treated differently in the first place?

[smuxit]

For the moment, I have to stop working on my current Design System, because, even the Master Component doesn't resize the way I expected it from Symbols previously. Probably also, I have to revert back to Adobe XD 18. Shouldn't have saved the XD file with Adobe XD 19 ... damn. Unfortunatelly, this update took me a day from being productive. Hopefully, some explainations or bugfixes will be available soon

[Preran]

Sharing the response I received from the team, "This is deliberate behavior because component bounds are now explicit. Anything outside the bounds will be clipped, similar to artboard clipping."

[zigmas]

If this is a deliberate thing, I need to understand how is that going to work out guys... I've like a million components now that need to be updated, NOT just the shadow, but the actual size of the background in it.

I cannot use the general component transform for that, as the rest of the components inside of it need to maintain their positions, is just the background that needs to change. So If I modify the actual background, it just gets clipped, I need to unmerge that component and recreate it as a new master for it to get a new size. Same as with the shadows. Is there a workaround this? Like, why doesn't the master updates his size every time it gets changed? why does it has to be forcedly maintained?

[benh70208189]

I do not understand why that 'deliberate' decision was made. I truly think that you should not clip overflowing elements. There are many cases you can use this function. One quick example I can think of is backdrop of a modal. Please reconsider this decision.

[Kenneth Kawamoto]

Similarly, if you want to add shadow to a component, you can't, because the bounding box will clip the shadow

[radekj]

You just beat me to it

The steps to replicate the issue:

1. Create a box,

2. Convert it to a component,

3. Double click to edit the box

4. Add shadow to it

5. Deselect the whole component

The shadow DOES NOT show up at all because it's clipped by the component outline.

[joshuaw61167812]

Same problem here. I will not be able to use components for site headers if the shadows are clipped from my components. An option to show shadows outside of the bounds would be very useful. I have also had to delete components because of the sizing issues when you delete a shadow and the sizing does not adjust.

[Preran · Accepted solution]

Thank you, everyone for your feedback. Please post your suggestion on Adobe XD Feedback : Feature Requests & Bugs

Meanwhile, the team is investigating changes to this feature similar to the suggestions here.

Thanks,

Preran

[smuxit]

Dear Preran, could you please provide a quick (video) tutorial (from one of your XD Evangelists) which covers the differences between symbols and components? This is a huge change in regards to layout alignments and XD handling. Even the editing of Master Components behave strange, because with former Symbols, everything was simply some sort of a "Master Component", and in addition, I was able to edit it inside of nested symbols (in my case: up to three to 5 levels deep). Now, when I'm trying to edit Master Components, strangely, they pop up somewhere outside lost in space. As mentioned, I shouldn't have saved my current Design System with Adobe XD 19 as I can't go back to XD 18 ... which is frustrating. So I'm kind of blocked to continue working on my current Design System with XD 19, and, I am forced to write posts into this Adobe Forum, which shouldn't be part of my business.

[riaanst]

I agree. This is horrible when aligning my navigation bar components that use shadows.

It would be great if you could find away to still show the shadow outside the bounding box while the dimensions still stay the same as it was before the April Release.

This is causing havoc with the large amounts of components/designs that I need to update and/or create.

[radekj]

One more note on the topic.

When you export via "Share for development" option, you can select the actual object (and that's good) but still get a bogus group where the shadow is/was:

[smuxit]

Dear Radekj, thank you for your addition. In this current company, we are not allowed to use any cloud functionalities, so, I can't verify your steps, but I bet, this wouldn't solve anything for the moment. So for now, I have to solve the issues in my current Design System that have been caused by the Adobe XD 19 update. What a funny fun!

[Arlo Software]

This just make the component basically unusable, I have absolutely no idea at all how to change the size of the "master" component as I intend.

And when using a component with shadow, I have to measure the margin every time and some times still cannot align them correctly.

Can someone give an explanation about the benefit of having “explicit bounds”? because honestly, I see none at all.

[joshuaw61167812]

So the current build now seems to include shadows in the size of the component. Please give us an option to ignore shadow sizes while still being able to see them. This is how objects work in html. Why would this be any different?

None of my components snap to the grid or guides properly now. This is unusable.

Solution: Just give us a option that says "Ignore shadows" when I select a component with a shadow. Done!

[smuxit]

I wonder why this issue was marked as "answered", because, no real solution was provided so far. Did anyone find a workaround tutorial on this matter out there?

[Kenneth Kawamoto]

FYI, XD product team is now working on this to fix the component shadow issue

[David_Utt1]

Good to hear, Really need it for our team. Is their a timeline on this fix?

[elainecc]

We can’t share a timeline for this, but it’s actively being looked at.

[David_Utt1]

Totally understand, great to know the team is looking into it. Hope to see the update Soon!

[ryans90969593]

I think this is a valid component problem, and maybe give it an option to exclude shadow from component bounding should do it. A few days ago, saw the others are also complaining about this exact same situation on twitter. In my case, i cannot go any further with my design components. Reasons are basically the same with others here, I Hope this will be updated soon.

[HARSHIKA_VERMA]

Hi there,

Thank you for your feedback. I have seen a similar request has been raised here: Shadows should not be clipped by components – Adobe XD Feedback : Feature Requests & Bugs​ I would request you to please submit your feedback and upvote this feature request to add your voice.

Thanks,

Harshika