You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Figma px转Android dp的正确转换方法及响应式布局适配问题

Figma px转Android dp的正确转换方法及响应式布局适配问题

嗨,我之前也踩过这个Figma转Android单位的坑,太懂你看到toolbar尺寸不对时的困惑了!咱们一步步来解决:

为什么直接设157dp会看起来不对?

核心原因是:Figma里的“px”和Android的“dp”不是直接划等号的,两者的对应关系完全取决于你的Figma设计稿是基于哪个基准密度做的。

大部分设计师现在会用「等效于Android mdpi(160dpi)」的画布来做设计——也就是Figma画布宽度设为360px,这时候Figma的1px才等于Android的1dp。但如果你的设计师用的是更高密度的画布(比如720px宽度对应xhdpi、1080px对应xxhdpi),直接把Figma的px值当成dp填就会完全错配:比如设计稿是1080px宽度(xxhdpi,480dpi),那Figma里的3px才等于Android的1dp,你填157dp的话,实际在手机上会被放大3倍,尺寸自然和设计稿差很多。

正确的转换公式和步骤

不管设计师用的是什么画布,你都可以用这个通用公式计算:

Android dp值 = (Figma px值 * 160) / 设计稿的DPI值

这里的160是Android的基准密度(mdpi的DPI),而设计稿的DPI和画布宽度的对应关系是:

  • 画布宽度360px → mdpi(160dpi)→ dp = Figma px值
  • 画布宽度720px → xhdpi(320dpi)→ dp = Figma px值 / 2
  • 画布宽度1080px → xxhdpi(480dpi)→ dp = Figma px值 / 3
  • 画布宽度1440px → xxxhdpi(640dpi)→ dp = Figma px值 / 4

举个例子,你的157px toolbar:

  • 如果设计稿是360px宽度 → 直接用157dp
  • 如果是1080px宽度 → 157/3≈52.3dp(可以取52dp或者53dp,根据视觉微调)

小技巧:直接问设计师“你的设计稿是基于哪个Android密度做的?”,或者看Figma画布宽度除以360的倍数,就是你要除以的系数(比如720/360=2,就除以2)。

怎么让布局在所有设备上都保持一致?

解决了单位转换,还要做好响应式适配,给你几个实用的方法:

  • 优先用dp作为单位:dp本身就是Android为适配不同屏幕密度设计的单位,只要转换正确,密度适配就不用你额外操心了。
  • 用ConstraintLayout做响应式布局:别给toolbar设固定宽度,用match_parent或者通过Guideline(参考线)来约束位置。比如设置左右Guideline分别为屏幕宽度的5%,让toolbar在中间区域自适应宽度,这样不管是手机还是平板,比例都一致。
  • 用最小宽度限定符适配不同屏幕尺寸:在res目录下创建values-sw360dpvalues-sw412dpvalues-sw600dp等文件夹,里面的dimens.xml定义对应屏幕的尺寸值。比如在sw360dp里设toolbar_height为157dp,在sw600dp里设为200dp,这样平板上的toolbar会更符合视觉比例。
  • 避免固定死所有尺寸:能用到wrap_contentmatch_parent的地方就别用固定dp,让布局自己适应内容和屏幕。

如果你的项目用的是Jetpack Compose,那更简单——直接用dp单位,配合Modifier.fillMaxWidth()weight参数或者BoxWithConstraints来做自适应布局,Compose的自适应能力比传统XML强很多。

内容来源于stack exchange

火山引擎 最新活动