I could really use it every time I design in Figma since that’s a normal feature to use what I do when I’m coding. It makes sense to have it as Figma is essentially a web design tool, and it would be great if some simple features from the CSS can follow that.
I would expect something “simple” like this. Use the box-sizing model to keep the borders from expanding outside of their box. That way they wouldn’t affect the auto-layout function.
It would be really nice to see the border support more in line with the css border. Maybe a combination of the two would be nicest. So have a quick option to fill in, but also the possibility to extend the screen and have more options.
This is something that looks also promising. Some concerns were placed earlier on Figma Slack regarding the CSS ono-on-one translation to Figma. I would love to hear more from Figma team.
You can use inner shadow, but it’s a hack… I do it, but it’s not a true border. Figma has bridged the gap between browser and design tool with auto layout, so this feature could be something we could use a lot.
At the moment if you want to have a stroke on 1,2 or 3 sides of a shape - something incredibly common in CSS - you’re out of luck (as far as I can tell) meaning you have to resort to something like shadows or delicate positioning to hack it.
Adding something close to the behaviour of CSS would be ideal - which would be controlling the weight, colour and stroke style of each side. But failing that - just being able to turn off top, right, bottom or left strokes would do the job.
I would love this feature so much. The current process of effect styles or unique rectangles for borders can be a friction point for devs reviewing designs. Not to mention when we use themer to switch over to a dark environment, effect styles aren’t updated (and we have to create a separate set of effect styles for this)….It’s a pain.
To my mind, it’s not so simple because we are working with vector shapes and not only boxes for example what will happen if you try to put a right border on a star?
As an old designer who have always work with this hack in Illustrator, Fireworks, Sketch… I understand why it can’t be done. It won’t be surprising me if Figma only allow this features on frames.
It’s not because figma is browser compatible that it use a render engine compatible with CSS display
Then it should only be allowed on frames and not any shape, just like other features. Same exact thing is true on the web. You can’t add a border to a complex SVG shape, it will just add the border to the svg element rectangle itself. That is fine.
I think one of Figma’s core issues is that it doesn’t use HTML and CSS as a renderer and therefore will painfully lag behind and have to tediously recreate all these fairly basic features from the web.
If I recall correctly this was requested on the old Spectrum forum like years ago. Can this really be so hard to implement? I come across the lack of this feature almost daily, and like mentioned above, it’s incredibly common in CSS. Shadows aren’t borders and shouldn’t have to be used as such…
I totally agree here, and I still can’t believe this was not there from the start. I would simply do it the same way that border-radius is… All at the same time by default, with the option to split in 4 different settings. I will also bring out that stroke space/length requires improvement imo. Very unintuitive right now.
But I hate that it’s still a hack – and a tedious one at that!
@Figma, I get that vector networks (as you call them) make it more difficult to allow for CSS style borders on objects. But we don’t need CSS borders on those objects (keep what you’ve got on free vector forms because it’s powerful – and more akin to SVG).
But anything that is a rectangular box at its core (namely any Figma frame whether rotated or rounded!), it is completely analogous to any regular HTML DOM element that can take border properties. So please let us use independent, per-side stroke properties specifically on frames (much like we can for corner radii). Vector networks already do something different than frames anyway, so we don’t need it there and you can keep things working exactly the same for those.
