Figma 畫 Border 其實還挺難的
4 邊框
可以用 build-in 的 Stroke 實現
注: border 是在內部的, 和 HTML 一直
Border Top, Right, Bottom, Left
如果只想要其中 1 的話, Stroke 就不足夠用了, 需要用 Effect 來做
Stroke on only one side discussion
Border Top
inner shadow 配上 Y = 1
Border Bottom
Y = -1
Border Left
X = 1
Border Right
X = -1
effect 常用來做影子, 影子通常在外面, 所以是用 drow shadow, border 通常在里面, 所以是用 inner shadow.
當然如果你想畫外面也是 ok 的, 只是上面的 x,y,1,-1 要對調一下就可以了. 它也有點像 CSS ::after content '' 這種划線方式.
注: frame 的 fill 要有顏色才能有 effect. 起碼要 set white color.
當 Border 遇上 radius
利用 shadow 做的 border bottom 遇上 radium 時就不太美觀了
參考 Stroke on only one side discussion, ironboard42 的回答
運用了 Stroke + linear 技巧. 這個方案的缺點是 Frame 如果換 dimension 那需要重新調過
步驟 1
做一個 stroke -> 選 Linear -> 把白色換成黑色
步驟 2
把線往下拉 > 把點往下拉 > 做多一個白點 -> 白點往下拉
