We use a lot the trick with the shadow to add borders, but that only works when it’s top or bottom. What if I need to add one border vertically to only the right side for example? It would be nice to have this Thanks!
Personally I don’t like using that trick (causes me too many other problems), but if you do you want to create left or right borders you can do so with the X value in the drop shadow; see the screenshot below for a right hand only border.
An X value of -1 will place the border on the left side.
it doesn’t work with Auto layout (((
it’s true
apply the shadow to the frame, and you must select a background/fill color, otherwise, it’s the items that get the shadow.
Yes, it does work in an autolayout?
If you’re thinking the internal spacing/alignment, then you can either use a dropshadow to put the border on the outside, or you can alter the autosuggest padding settings to compensate (ie. a bit of a hack on the hack)
EDIT: @Sandi_Chen See the above file, you can force it by using a 1% opacity on the fill you can still get the effect. Personally I feel all of this is just too hacky, but YMMV
The problem with the shadow hack is that it sends the wrong info to devs who inspect Figma see how to code the design (one of Figma’s selling points.)
@anon21722796, how does this not exist yet?
A big part of CSS based UI design is border specification on container elements.
Since frames act like containers, it is natural to want to specify the frame attributes in similar ways as CSS.
Today, I cannot create divider lines based on frame positions, because I can’t access just one of the 4 borders as I can in CSS.
Proposed solution:
In the frames property panel for strokes, add a modal toggle to allow independent border width settings for each of the 4 borders (top, right, bottom, left) - you could use the same UI as you have for setting margins in the auto layout property editor.
If you allow to round corners separately, why not do the same for borders? Sounds like common sense feature to me.
And it doesn’t work if you have corner radii.
Nice! thanks!
Found this, should help us for now. Although you can’t change the weight or colour.
@anon21722796 still waiting for this basic feature
Waiting for this feature for almost 2 years at this point. Please consider bring the CSS border model into Figma.
This would make life so much easier! Figma is normally way easier than CSS, not harder - this is one of the exceptions.
My current workaround, next to the drop shadow method, is to take whatever frame I want to have a border around, and put it into an autolayout frame with a 1px rectangle on the side where I need a border. It sort of works.
Been waiting for this feature for years. Many other tools already have this functionality, would love to see this in Figma coz it’s a real pain now, especially when working with data tables, which some of us do a lot.
Agree, nesting lines or rectangles just to have this as a border ( not mentioning innner shadow) is painful. Would be lovely to see.
It’s very useful having borders like the screenshot given by @Joel_Vahl any lock on this, please?
Please do this already! I keep having to have conversations with developers about the hacky crap that I have to do in Figma to represent partial borders. I’ve wasted hours in these conversations. It’s a huge headache!