Figma 学习笔记 – Border

Figma 画 Border 其实还挺难的

4 边框

可以用 build-in 的 Stroke 实现

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

当 Border 遇上 radius

利用 shadow 做的 border bottom 遇上 radium 时就不太美观了

参考 Stroke on only one side discussion, ironboard42 的回答

运用了 Stroke + linear 技巧. 这个方案的缺点是 Frame 如果换 dimension 那需要重新调过

步骤 1

做一个 stroke -> 选 Linear -> 把白色换成黑色

步骤 2

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