Skip to main content

I recently switched to using Variables in my design system and now applying new variables to components is a tedious process, especially when it comes to specifying the border (stroke) widths using variables. The variables icon appears only if one selects a custom set of strokes for an element and only after applying the same variable to each stroke position (top, left, right, bottom) the main stroke width input magically supports variables.

Screenshot 2024-05-09 at 15.47.59

Hi @Mateusz_Przytula, Thank you for pointing that out! I completely understand how helpful it would be to be able to apply a variable to all sides of a stroke simultaneously.


Could you please try right-clicking on that field and selecting “apply variable…”?

Screenshot 2024-05-13 at 11.01.09


I initially had the same thoughts as you when I saw your post, but then I found this: Variables for stroke width? Feel free to check out the last two comments of this post 😉


I hope this helps. Please let us if there’s anything I’ve misunderstood.


Thanks,

Tricky! Didn’t notice that, thanks for sharing. It solved the issue for me but I would like to see it as a minor update to Figma’s UI to increase the width of the stroke width input to accommodate for new variable icon. Thanks again! 😍

That happened to me too! Thanks for the hack to apply the variable for now.

Thankssss helped a lot 🥰

image

I think the UX can be improved by putting the icon on the hover variable like other inputs on the page.

Thanks for the feedback! It’s definitely easy to understand. We’ll share it internally.

Reply


Terms & ConditionsCookie settings