所有项目都固定在 figma 设计中

Posted 2023-02-22

【中文标题】所有项目都固定在 figma 设计中

【英文标题】：All items are fixed in the figma design

【发布时间】：2021-01-22 16:54:41

【问题描述】：

我正在尝试将 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 和网格系统。执行此操作的常规方法是什么？

【参考方案1】：

你不应该注意figma添加的位置。这些位置值来自画板本身的位置。您的网站永远不会有这些精确的尺寸。

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

【讨论】：

好的，我明白了，但我还有一个问题。设计宽度为 1366 像素，他们希望我让这个网站响应。当我将容器的宽度设置为 1366 像素时，页面看起来很糟糕。还有更大的屏幕尺寸，但他们没有提到这一点。所以我应该忽略这个 1366px 或者我怎么能做到这一点？ @rowan-van-zijl

您确实应该将容器设置为 1366 像素。为什么执行此操作时页面看起来很糟糕？

因为在更宽的屏幕上看起来很糟糕。所以我应该从 1366px 开始，对更大和更小的屏幕做出响应，对吗？ @Rowan van Zijl

您网站的容器的最大宽度为 1366px。所以它不应该变得更大，大多数情况下你会在那个容器中添加你网站的所有正常内容，但是你可以有一些全角元素，比如标题。您的容器应具有以下属性以使其在移动设备上扩展： max-width: 1366px;宽度：100%；

【参考方案2】：

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

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

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

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