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
Please address this other bug. It is absolutely a showstopper. It makes components completely unusable. Fixing the bounding box with shadows still isn't going to make components usable if you the bounding box does not resize to changes in content size within the component:
Thanks Sherif, much appreciated. Will the fix also include clipping the elements inside a component?
Please note that the issue is not just about the drop shadows. This even happens when different kinds of stroke positionings are used. If a stroke is positioned inside, the box will show the correct size, when turned into a component. However, any of the other two stroke positions ( center or outside ) change the sizing of the component. I've attached photos to explain this issue better.
Yes, drop shadows are handled badly in components. There should NOT be a huge amount of extra padding around an object simply because it casts a shadow. Another example of a poorly conceived feature rolling without adequate thought or testing. If Adobe had kept symbols alongside components, users could at least have selected which to use. Instead, everything with a shadow got broke when converted to a component.
This bug is hugely problematic. All the symbols that we created in previous documents are components now, and as a result, all the spacings are messed up. Therefore, editing previously created designs is a nightmare.
Symbols were powerful elements that we would use in our design process all the time. But, with this bug, we can't use this feature anymore for god knows how long, which has a substantial negative impact on our productivity.
We were thrilled when we learned the new component feature was introduced, but this has turned out to become very disappointing.
Stephen S commented
Master component and Component Instances must both, at the very least, maintain flexible/editable bounding boxes.
It is of no use to attempt to edit a component to expand its style/aesthetics with backdrop effects or fundamentally resize its children primitives if the original bounding rect cannot either automatically update to accommodate them, or be modifiable to incorporate the changes manually.
Equally as debilitating is the inability to edit these bounding boxes on a per-instance basis. If I need to change a component instance's width, because its text label is unique for every instance, I need to be able to manually edit the individual elements within that component instance, and have the bounding rect match those modifications.
There is no practical use-case scenario I can think of where modifying the entire component instance by its bounding box is a sufficient solution, particularly when the author has no control or understanding of how the software 'responsively' handles placement and sizing of its individual elements.
Yeah, this is incredibly annoying. This is not how components should behave in my opinion.
Swapnil Shrivastava commented
Will it be possible to share this file(or part of it which shows issues) with us. I am not sure why these components are getting clipped for you. Ideally they will work very similar to symbols. The only difference you should see is capability of resizing components.
Vertika Gupta commented
We have already bug logged for this scenario.
peter palenik commented
this is big update :D
Martin Klausen commented
I discovered it when opening the May release. My existing file with symbols on canvas and in assets panel suddenly couldn’t be altered without this bug.
I think also newly created symbols has this problem. Could also be related to linked symbols.
As you can see the performance is also affected.
Menghui Li commented
Agreed, this unchangeable and unalignable component boundary makes my life like hell.
I have the exact issue. For example, when I create an material design FAB button which is 56 x 56, it adds padding with no discernible element that I can remove or resize with in the component group with out is scaling my original assets. An asset that is originally 56 x 56 is now 74 x 74. One key consideration, it seems to affect elements with drop shadows.
Axle James Pascual commented
Just wanted to share a workaround until this bug is fixed.
Make the component without the shadows, each time you are going to add that component, draw a rectangle over it and add the shadow, then move it back, then group it together.
It's still a pain, but you can now align your components.
Petr Bílek commented
Yes, please do something with that, it's painfull :-(
Ajay Sanaga commented
This is a very serious and important issue. This behavior is not desirable. Do not consider shadows in the size of the component.
Vertika Gupta commented
Can you please give reproducible step, Please let me know are you creating the component using drop shadow and where you are facing issue in source file or in consumer file.
I have a component which is a card with some text. This card has shadow and when selected, the frame surrounding the component is wrapping also the shadow. This behaviour is somewhat disturbing because I'm not able to measure the exact distance between this component (card) and other elements of the layout.
More sins for you to reflect upon.
Perhaps there is a place for both, but Adobe's decision to replace Symbols with fundamentally incompatible Components beggars understanding. Look at these screenshots.
Please roll back the version and implement Components in a sensible manner. As a new feature, not a replacement that breaks what it replaces.