Skip to main content

Hello, would like to share my common use case with strokes on Figma. In every design system I made I create doubled contrast borders for my elements like this example.


CleanShot 2023-07-31 at 14.32.01


Goal


creating this on Figma is a lot frustrating because we can’t handle the stroke position for each stroke. This would be done easily by allowing to set the drawing position for each stroke, instead to set all strokes inside, center o outside.


The Problems


…with solution 1


The current stroke management in Figma is forcing us to create multiple layers just to add borders or change border positions. Is weird to replicate “outer-border” and “inner-border” layers in every component. Plus, for a design system consumer is hard to keep consistency since they have to copy/paste those layers in their design.


…with solution 2


Another solution could be to add a single stroke to the layer, and a shadow effect to replicate the visual effect. This brings the problem that a layer can have ONLY ONE effect applied. So, if the current layer has a shadow already applied, we have to duplicate the layer again just to add the fake inner border.


Both solutions are very limiting and still not always applicable. In the same way, we can’t create shared styles with multiple strokes to provide an easy way to share the effect easily across the design system.

One thing to keep in mind if you are designing for web implementation (and depending on tech some native app frameworks as well) is that the web only allows for one border on a frame. That border can have different weights and colors and styles for Top, Bottom, Left, Right but only one border in each direction. Additionally web borders can’t be set to Outside or Center, they are always Inside.


Because of this web devs also use multiple positioned layers, multiple box-shadows, outlines (similar to border but not identical and doesn’t exist in Figma), and other tricks to emulate multiple borders.


That’s not true. Is the CSS box-sizing property that define where to draw the border (inside or outside, but not center)


Anyway, what we can do on web should not define how Figma add features. With CSS we have so many way to achieve same results. And we can combine multiple shadows as well lol


That’s not true. Is the CSS box-sizing property that define where to draw the border (inside or outside, but not center)



Technically true, but 99% of websites these days use box-sizing: border-box so practically you will almost always have your borders inside.


I wish Figma just used web rendering, we would have so many missing features instantly and would help handoff between design and development so much.

Reply


Terms & ConditionsCookie settings