Change variant on resizing a component

Yes, it’s a single diagonal across the button. Below is an image. left coloumn is without strike, right is with strike. I have had to define the right column individually but was wondering if we could the diagonal one work like how button sizes would increase in an auto-laid out setup.

Place the line inside the box, give it absolute position and set constraints to “left and right”. It should now stick to the corners regardless of box’s size.

You don’t even need to create separate variant for crossed out box, just assign boolean property to the line’s visibility.

Thanks for your response. But the expectation is for the diagonal to change its length and orientation based on the container size. Having the lines in abs pos keeps them in the position but it will not reorient to look like a diagonal. Hence, had made a separate set of variants. Attaching an image for reference.

That’s because you are using two separate lines for that. My solution uses one. Text has white background to mask the diagonal underneath it.

Edit:
When using my solution don’t use “line” for the diagonal. Line becomes thinner or thicker when is stretched in Figma. Instead use rectangle with 1px width(or any other depending on your needs).

Thanks for the response. This helps. This was our version in the wireframes but it seemed slightly crude. It was a small detail in the UI which made us iterate with two lines. Wanted the ends to be rounded where the lines meet the letter. I know it makes no difference when viewing on a mobile screen, but designer complex took over. 🙃
But really appreciate your help. The advice on left and right constraint was vital.

Also, I chose to use pen tool as it is centrally aligned with the path.

Thanks and regards,

It may be crude, but it’s usually implemented that way using either vector bg, gradient or something similar. When designing I try to stay as close to the way it will be implemented as it’s possible.

Sure, you could implement it with separate diagonals, but similar to the design, it would be rather inflexible and would require more work from developers to make it work.

What @Bart_K showed is also how I would approach it both in Figma and in code. Making the tip rounded would be very difficult for a developer as well and probably not worth the extra effort.

Hi, is it possible to change variant inside a frame (header on a webpage) to change when I’m rezising the whole screen(frame)? I have applied dimensions to both the header(s) and the frame, and I would like the header to change variant from desktop to mobile (not just scale) when I change between token sets.

Thank you in advance 🙂

Hey @Jeanette_Hafnor, thank you for reaching out!

I am not quite sure here, I’m just checking this internally with the team. I’ll get back to you once I receive a reply.

Thank you for your patience!

Hey @Jeanette_Hafnor, the team has confirmed that this is a feature request. Feel free to create a new topic on our “Share an Idea” page here: Share an idea - Figma Community Forum.

This helps us roadmap future updates. Community members who would like to see your suggestion implemented can leave their feedback and vote on it.

Thank you,
Gayani