所有物品都固定在 figma 设计中

All items are fixed in the figma design

我正在尝试将 figma 设计转换为 html 和 css,但在设计中所有项目的位置都是绝对的。

导航项的样式之一:

position: absolute;
width: 79px;
height: 16px;
right: 395px;
top: 13px;

网格项目的样式:

position: absolute;
height: 200px;
left: 0px;
right: 0px;
top: 0px;

我是 figma 的新手,这是我第一次看到这样的东西。我不知道这是否符合惯例。他们希望我也能使设计具有响应性。但是因为它们都是固定的,所以我不能使用 flexbox 和 grid 系统。这样做的常规方法是什么?

figma添加的位置你不要关注。这些位置值来自画板上的位置本身。您的网站永远不会有这些确切的尺寸。

我的建议是只使用 figma 中与元素外观相关的样式。像 background-color、font-size 等等。你应该自己定位。

事实上,Figma 提供的 CSS 位置不是您可以在网络 HTML/CSS 中使用的东西。它主要用于 mobile/desktop GUI,在这些 GUI 中,您通常会像 Figma 那样绝对定位元素,并且本身并不是响应式的。

至于1366px的宽度,这是网站在做网页设计时的标准宽度。当您的桌面显示器大于 1366 像素时,您可以在中间设置一个固定宽度,或者您可以将其设置为液体并让它从左到右横跨。

如果你说它在大屏幕上看起来不好看,最简单的解决方法是让它固定并居中,它在 1366px 屏幕上看起来不错,而在大屏幕上它只是更空space 两侧。

还有 Desech Studio,它将导入您的 figma 元素并将它们相对放置在网格中,正如您在 HTML/CSS 中所期望的那样。然后可以进一步自定义,添加响应式布局规则,导出为react等