2

我正在尝试将 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 和网格系统。这样做的传统方法是什么？

4

2 回答 2

3

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

我的建议是只使用 figma 中与元素外观相关的样式。像背景颜色，字体大小等。你应该自己做定位。

于 2020-10-07T17:53:43.457 回答
0

事实上，Figma 提供的 CSS 位置并不是您可以在 Web 的 HTML/CSS 中使用的东西。它主要用于移动/桌面 GUI，您通常在其中绝对定位元素，就像 Figma 所做的那样，并且本质上不是响应式的。

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

如果你说它在大屏幕上看起来不太好，最简单的解决方法是让它固定并居中，它在 1366px 的屏幕上看起来不错，而在更大的屏幕上，它只是在侧面有更多的空白空间。

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

于 2021-05-14T14:50:06.787 回答