Skip to content
← Adobe XD: Feature Requests (Read-Only)

Request details

Adobe XD: Feature Requests (Read-Only): 01 : Design mode

Categories

(thinking…)

Shadows should not be clipped by components

Currently components clip shadows of elements within. This is, in my opinion, not how it should be. I would at least like an option to turn this behaviour off and on

This behaviour has two downsides:
- increasing the shadow spread afterwards means you need to re-adjust the entire component, so that the shadow does not get clipped
- juding distances is way harder and you wont get help from smartguides when aligining components with other objects

Here's a video on the issue:
https://youtu.be/BjO6YM17H58

110 votes

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close

We’ll send you updates on this idea

Arvid shared this idea  ·   ·  Report…  ·  Admin →
bug-fixed  ·  AdminSherif Assaf (Product Manager, Adobe) responded  · 

Dear XD Community,

Thanks for your feedback and for sharing with us the areas that we need to invest in and improve on.

With the XD August release, we have introduced several enhancements to components. Those enhancements address the following:

1) Drop shadows and blurs will be rendered outside the component bounding box which 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:
theblog.adobe.com/xd-august-2019-update-aut..

Please give try out those enhancements and share with us your feedback.

-Sherif

Comments are closed An error occurred while saving the comment
  • Matt Prina commented  ·   ·  Report

    This has been fixed! Thank you Xd team!

  • Ryan Harte commented  ·   ·  Report

    Publish for Development is completely useless as developers do not get actual sizes/padding/margins

  • Ryan Harte commented  ·   ·  Report

    Makes components and design systems useless

  • Rob F commented  ·   ·  Report

    I basically don't use shadows in XD for this exact reason. I can't seem to adjust the bounding box in a way that populates to every other component, which would probably be a layout nightmare, anyways. So, I can't add a shadow after making something a component, so I almost never use shadows. Downer.

    I'll echo others that the shadows should be independent of the bounding box OR can be applied after making something a component. Illustrator can shadow grouped objects, like that.

  • Vova Kowalski (ndeerz) commented  ·   ·  Report

    Also, shadow should not be included in component's boundaries, cause this makes object alignment very difficult.
    Also, component's boundaries should not mask inner elements, otherwise it's easier to destroy component and create a new one to resize elements inside of the component. Because it requires to resize the whole component by "Responsive resize", which often do it's job incorrectly.

  • Michael Tardi commented  ·   ·  Report

    I'd like to add a drop shadow on a particular asset.

    For instance :
    I have just created an asset, which is in this case a Button, and I want to apply, in a particular use case, a drop shadow.
    I only can add the drop shadow to the underneat asset's layer but the shadow is cutted by the asset's edges.

    Beside the fact that it would be nice to add drop shadow as assets, now I can't custom one asset excepted from background-color and border styles.

    And if shadow is added before I turn an element as asset, it makes the edges of this element larger. And I can't align this element correctly from others.

    Thank Adobe XD team for your help :)

  • Hung Dam commented  ·   ·  Report

    If I want to change elements inside a component (resize elements, add shadow), my solution is resizing the component (click and drag the green rectangle). But the pain point is that I have to care about the attribute "Responsive resize" of each element inside component to make sure they can keep their width, height and position.

  • Alina Brender commented  ·   ·  Report

    Please fix it! I cant you use components of the whole website anymore because of shadows!!

  • patrick commented  ·   ·  Report

    @Luiza - right.. that's exactly what I'm talking about - using any kind of align and measurement is such a pain now

  • patrick commented  ·   ·  Report

    Components are a great idea and very useful - except for when you've got a shadow applied to the master component. It's makes alignment with a container a huge pain. You can't simply select a component (say, a button with a shadow applied to it) and a container and simply hit the vertical align tool..

    Possible for some kind of feature where the shadow isn't taken into account when aligning elements?

  • nati commented  ·   ·  Report

    Ah... and I forgot to mention... if i change the main component itself... increase the box shadow... then the clipping box doesn't increase... which is quite annoying too... Please, fix this behavior, coz I believe it is rather buggy, than a simple "feature request"....

  • nati commented  ·   ·  Report

    *without a shadow... a little typo before ^^

  • nati commented  ·   ·  Report

    Would really wish that shadows are not included into the clipping box of the component, cause it makes the alignment of the elements a lot complicated.... Example: 2 buttons that are vertically aligned, no shadow... I simulate "selected" button on the next screen and its shadow increases... soooo... what do i do now? i start to resize the component (beacause at this point, the shadow is cut)... and now its clipping box is all messed up, coz I'm guessing, where the shadow ends (vertically, horizontally, sides)... and now i have 2 components that have 2 different vertical sizes, coz 1 has shadow and one has not... buuuuuuuu....

  • Armando Scuro commented  ·   ·  Report

    surely this is an oversight from XD team as under no circumstance would a designer intend for this to happen.
    I hope this whole component mask clipping thing is removed soon, as it serves no purpose

  • Harun Alikadić commented  ·   ·  Report

    I do not get "why" of this behaviour. What problem is it solving for designers?

    In Illustrator it doesn't exist.
    In CSS, in mobile or any other GUI development environment that is known to me the shadow never adds to the width/height of the graphic object.