Skip to main content

We have a button component that relies on a color mask for the disabled state. This mask grays out the assigned icon when the disabled state is selected. We use a mask because our icons can be of many different colors and this was the only way we could set the icons to be a single greyed out color while maintaining the original colors when reenabling. The component also allows the user to resize the icon from a nested component. We had this component working as expected last month.

However, today I loaded up a file with several disabled icons and noticed all of them were broken. I dug into the file history and noticed the problem appeared at 10:34 AM on July 31st. This seems to be inline with a recent update that Figma released on that day. I’m guessing something in that update must have broken the component we made. 

Below are screenshots showing the issue. The issue is occuring in a side toolbar (on the right hand side of our mockup)

 

What the mockup looked like BEFORE July 31st at 10:43 AM
What the mockup looked like AFTER July 31st at 10:43 AM (today). All the masks are broken. The icons just look like gray rectangles.
When I attempt to copy the icons from a previous working version and paste it into today’s version, all of the components are detached and icons are missing. It is just empty frames.
Original component layers (today)
Component in default state (today)
Component in disabled state (today)

Additionally, resizing the nested icon no longer works. It’s difficult to show the history of this working, but this was a problem I worked on solving before and made sure resizing was working. You can see in the last two screenshots we have a nested component where you can select the icon size. 

This is greatly disruptive to our work as we use these states during prototypes to indicate to users when something is enabled/disabled. It appears as though this is a bug with the recent update since we did not modify the component after the update occurred. 

Hey Lauren - my first immediate thought is that our Technical Quality team will want to review your file fully, since this is a more complex situation.  Are you able to share edit access to the file involving the screenshots above?


If so, can you share that edit access to support-share@figma.com? This is our official file support email. You won’t be charged for doing this. However, I do understand that may not be possible for you.

In either case, please fill out this form, and let me know when you’ve done so: https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001744374

 

Thank you!


I filled out the form and mentioned this post in the description. Support has been invited to the mockup file & our component file. 


Thank you! I found your ticket, and escalated it on my end. You should be receiving outreach from someone soon 😁


Reply