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
adding to the chorus here. I'm not using a drop shadow. Objects work fine individually, or when grouped, but as soon as I make them a component, padding is added and I can no longer align it to the grid.
so much for "frictionless"
As many others here have asked, I also would like to know if there is any ETA on this fix? Currently, we have to ungroup/unlink all our previously made symbols ( which are A LOT ), to be able to align elements in our designs ( which defeats the whole purpose of creating symbols in the first place). This is incredibly frustrating and time-consuming and makes using XD a real pain, to the extent that a few of my colleagues are already thinking about switching to Sketch.
Please let us know when we can expect to see a fix for this bug.
Max Ropohl commented
Ist there any ETA on the fix yet? This is currently really slowing down our workflows and pretty frustrating …
Rob Barry commented
Is this also addressing why the GREEN component bounds are way outside the objects in terms of aligning it with other objects or snapping to grid or other objects? I find that it slows me down having to keep incrementing the position so that the objects inside the bounds align even though XD attempts at snapping to the green component box bounds.
Are you f serious? You have updated Xd adding new features, but you didn't fixed core function.
Martin Klausen commented
Any ETA on this?
Is there an update on this fix being implemented? It's severely affected my team's projects. Every floating card component now has to be hand placed to the pixel to account for this bug and adjusted for resizing.
Igor Glushchenko commented
Guys, are you serious? At least give us an option to install the previous version of XD so we can continue to work with large ongoing projects with lots of symbols as we used to before symbols became components.
We can't use new components (not only drop shadows, but also stroke, text - I've attached the mess my button transformed to) and we can't use old symbols. If I wanted to crop something inside a component I'd apply a clipping mask to it's contents manually.
This bug is breaking whole components - one of the most important feature in adobe Xd yet u haven't fixed it. Congratz, it's truly "xD"
Anita Subedi commented
Thank you for reporting the issue.
For now this behavior is expected, after making an object a component, it left some spaces.
Component bounds will clip everything that is outside the bounds. As you are giving shadow to the object. Therefore, to show the shadows in the component, the bounds of the component must be expanded to include the shadow; otherwise, the shadow would get clipped.
But we are working on it, to make it more convenient for users.
Agree with the below, there are too many bugs in the latest release to make it sustainable to work with Xd right now. I can't use components at all on a lot of sections in my designs because of this drop shadow clipping and because of the inability to amend component sizes.
I might as well use sketch or invision. Please consider a rollback or update us on the timescales for a fix.
Igor Glushchenko commented
Hi Sherif Assaf,
The last time I had a problem with major bugs not fixed quick in Adobe software because of Windows 10 Fall Creators Update. It was their fault and they offered an option to roll back to the previous version (which I did immediately) and continue working without any bugs.
Now it's definitely by your fault and we don't have an option to roll back.
Please, resolve this issue asap.
When will this be fixed? There have been two updates since this was acknowledged as a bug with nothing yet -- it's a really huge issue and should be pretty high on the list, but I haven't seen or heard any estimate on when we should expect a fix.
Bryce Flynn commented
See attached screenshots for just a small example of what you did to me. There was no valid reason to replace symbols with components, you could have added them without automatically replacing all symbols, breaking many of mine and causing me dozens of hours of additional work.
What happened? You made a terrible decision, that's what happened.
Dustin Kummer commented
Since the introduction of components in the may release—nearly a month ago—this hasn't been fixed still.
Is there an ETA or any progress for a fix?
This makes working with components and shadows unbearable.
Alina Brender commented
Better to back the last version! It a huge pain guys!!!!
This is the same issue I just ran into and glad I wasn't the only one.
Great Work Guys.
Please take outline borders into consideration as well. These are also clipped.
I'm having this exact problem. Trying to align a component with padding, in this case to the layout grid.