Skip to main content

Hey!


In our design system we are using an outline + outline offset for keyboard focus. I tried to create this in figma (also with several hacks) but it’s just not possible to get to the desired result.


some more details:


fyi: what i have tried:

using a double shadow with different spreads - visually this works if the first shadow has the same colour as the background - but here you already understand: our components can be placed on various background so this is not an option + if development inspects our code - they will also apply the same mechanism


I also tried to create create nested frames in the component to create the desired result with a stroke - this is possible but then as soon as you start switching the component variants - the components starts to jump a pixel (which is the gap between the outline and the background) which makes sense because thew frame becomes bigger in the variant…


The ideal solution is to have the same properties as in css for outline and be able to apply that on a various type of objects (frames / shapes etc)


related: Stroke offset for auto-layout frames


Screenshot 2023-03-09 at 16.53.13


In order for a nested frame or rectangle to not affect the size of the bounding box, you need to set the absolute position for this frame/rectangle and set the necessary constraints.

thanks @tank666 was not aware of this function but that works perfect!

Hi, I’m currently troubleshooting same problem as you did in Figma about Focus state and slowly getting into understanding of tokens (Tokens Studio/Figma Tokens). I was also experimenting with double shadow or combining shadow and border etc… but as you are saying it won’t be transparent for various backgrounds.


Our developer stated that ideal code solution is to use Outline + outline-offset (CSS properties) which aren’t available in Figma.


So my questions are:



  1. Is there a way to use Outline and outline-offset in Figma?

  2. Are there any other design solutions that can help me achieve the desired look (same as the Bart’s one) in Figma without adding another frame or div into the component as was described above?

  3. What a solution did your team end-up? @bart13


Additional context: We use Supernova.io as a bridge between Figma design and code repository. We make design changes in Figma and they are propagated thought Tokens Studio plugin to the Supernova to the code repository. Devs just approve this pushes.


@bart13 @tank666

the way @tank666 explained works fine in figma but if you look at an end-te-end design to development hand-over this is not how i would build in with html/css. Just have some communication with your dev because they will still use an outline property in css.


your token should be applied on an absolute positioned layer and needs to



  1. contain a border width and border colour token - and then your frame should apply these token properties

  2. apply autolayout properties to it scales according to your button width or whatever component you want to apply it for.

Hi @bart13 — would you be willing to share your layers panel so I can see how you achieved this? I had the same issue and wasn’t quite sure how to set it to absolute position while also have it grow according to the text label.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings