Figma 学习笔记 – Border

Figma 画 Border 其实还挺难的

4 边框

可以用 build-in 的 Stroke 实现

注: border 是在内部的, 和 HTML 一直

Border Top, Right, Bottom, Left

如果只想要其中 1 的话, Stroke 就不足够用了, 需要用 Effect 来做

Vote this feature

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

把线往下拉 > 把点往下拉 > 做多一个白点 -> 白点往下拉