Figma导出的CSS代码为什么和设计效果不一致?

瑞丽 阅读 12

我在Figma里做了一个按钮,导出成CSS后粘贴到项目里,颜色和间距都对不上,明明Figma里看着很完美。我试过检查单位、字体、盒模型,但还是有问题。

这是Figma自动生成的CSS代码:

.button {
  width: 120px;
  height: 40px;
  background: #4F46E5;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 20px;
  padding: 10px 16px;
}

实际渲染出来按钮比设计稿高了一截,而且文字位置也不居中,是不是哪里漏了什么默认样式没重置?

我来解答 赞 4 收藏
二维码
手机扫码查看
1 条解答
UI诺曦
UI诺曦 Lv1
Figma的padding是内边距,加上height会导致总高度变高。试试把height去掉,直接用padding控制高度:

.button {
width: 120px;
background: #4F46E5;
border-radius: 8px;
color: #FFFFFF;
font-size: 14px;
padding: 10px 16px;
}


另外检查下是不是继承了全局line-height,加个line-height: normal;应该能用。
点赞
2026-03-08 05:01