开发网站时如何将Figma中的px比例转换为实际屏幕尺寸

问题描述

我有一个使用 figma 设计的网站。现在我想使用基于 figma 设计的 Elementor 插件wordpress 中开发一个网站。使用 Elementor 进行设计是可以的。

但是,该设计基于 1920 宽的宽屏幕,我正在较小的桌面(比如 1440 宽)上开发网站。

现在,我开发的屏幕上的一切看起来都很大(图标、填充、宽度、高度等...),因为我遵循 figma 设计的 px 比例。

有没有一种方法可以转换为 figma 中的等价物。我想向了解此问题的有经验的开发者寻求帮助。

谢谢

解决方法

虽然您的 Figma 框架的宽度可以为 1920 像素,但建议您将实际内容设置为 1366 像素。其余的可以留白。

就是这样,您无需担心像素比。是的 Figma 不会像 HTML/CSS 那样 100%,但宽度/高度 px 值是相同的。

所以开始收紧所有东西以适应 1366 像素的宽度,然后你就准备好了。