also! wanted to note that most component libraries probably don't need to have a focus state variant. but if you do, this is quite an efficient way to do it :)
Thank you so much!! This was really helpful!! I saw a design system that had a focus ring component nested within the button component, but when I tried recreating it myself, I was getting stuck with the button autolayout. This tutorial was exactly what I needed to figure it out
Thanks a lot for your very useful tutorial! I would greatly appreciate it if you could clarify the distinction between "secondary" and "subtle" in your naming. Are they not synonymous?
Thank you so much :) In this specific case, "subtle" could also be interpreted as "tertiary". You're absolutely right though -- in some design systems, the two can be equivalent.
Clever way to manage focus offset.. Thanks for sharing. With variables now applicable to effects, I wonder whether you see a reason not to use an effect (that mimics a border) to create focus ring - aside from the offset thing..?
Thank you, Masha! I think this is a great approach! I appreciate your time and sharing this with us!
thank you so much! :)
Super clever! Thank you. I just added a stroke manually, but this is much better :)
sweet! And yes, I used to manage focus states with strokes but it got so tedious quickly
Thanks for showing the trick about layer ordering for absolute position. Was going nuts with a text input I’ve made and this solved it.
amazing, happy this helped!
also! wanted to note that most component libraries probably don't need to have a focus state variant.
but if you do, this is quite an efficient way to do it :)
If you did have it, would you also consider adding it as a boolean prop, so the focus-ring could be shown on any state? 🤔
@@alexzlatkus7057 as a separate variant, because it shouldn’t be shown on every state (focus is its own separate state)
Thank you so much!! This was really helpful!! I saw a design system that had a focus ring component nested within the button component, but when I tried recreating it myself, I was getting stuck with the button autolayout. This tutorial was exactly what I needed to figure it out
So happy it was useful, thank you :)
Thanks a lot for your very useful tutorial! I would greatly appreciate it if you could clarify the distinction between "secondary" and "subtle" in your naming. Are they not synonymous?
Thank you so much :) In this specific case, "subtle" could also be interpreted as "tertiary".
You're absolutely right though -- in some design systems, the two can be equivalent.
Clever way to manage focus offset.. Thanks for sharing. With variables now applicable to effects, I wonder whether you see a reason not to use an effect (that mimics a border) to create focus ring - aside from the offset thing..?
thank you! and i haven't looked at the variables for effects yet, that also looks like a convenient solution 🙏
Very smart approach, thank masha for sharing, this is definitely the best practice for absolute positioning
thank you ☺️
Thanks!