所有項目都固定在figma設計中

Question

我正在嘗試將 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 和網格系統。 這樣做的傳統方法是什么？

Answer 1

你不應該關注figma添加的位置。 這些位置值來自畫板上的位置。 您的網站永遠不會有這些精確的尺寸。

我的建議是只使用 figma 中與元素外觀相關的樣式。 像背景顏色，字體大小等。 你應該自己做定位。

Answer 2

事實上，Figma 提供的 CSS 位置並不是您可以在 Web 的 HTML/CSS 中使用的東西。 它主要用於移動/桌面 GUI，您通常像 Figma 那樣絕對定位元素，並且本身不是響應式的。

至於1366px的寬度，這是做網頁設計時網站的標准寬度。 當您的桌面顯示器大於 1366 像素時，您可以使用位於中心的固定寬度，或者您可以將其設置為液體並讓它從左到右跨越。

如果你說它在大屏幕上不好看，最簡單的解決方法是讓它固定並居中，它在 1366px 屏幕上看起來不錯，而在更大的屏幕上，它只是側面有更多的空白空間。

還有 Desech Studio，它將導入您的 figma 元素並將它們相對地放置在網格中，正如您在 HTML/CSS 中所期望的那樣。 然后可以進一步自定義，添加響應式布局規則，導出到react等。