根據幀大小調整布局

Question

我正在嘗試為 web 頁面設計原型。 這個 web 頁面可以顯示在任何東西上，從台式電腦的全屏到小型手機。 因此，框架寬度可以從 20 英寸到 3 英寸不等。

Figma 中有沒有辦法讓它移動控件，以便在廣泛的框架上它將具有：

First name: [_____________________________]

在手機尺寸上，它將調整為：

First name: 
[________________]

在一個完美的世界中，如果編輯框比屏幕寬，它會將編輯框移動到下一行並將編輯框縮小到屏幕的寬度。

我想讓它處理更大的案例。 比如寬屏：

First name: [_____________________________]  Last name: [_____________________________]

中屏：

Last name: [_____________________________]
First name: [_____________________________]

和小屏幕：

First name: 
[_____________________________]
Last name: 
[_____________________________]

Answer 1

根據父容器的寬度調整一個表單域的大小：

這在 Figma 中使用Constraints或Auto Layout功能是可能的。

表單字段元素的動態包裝，取決於父容器的寬度：

您正在嘗試在 Figma 上模擬響應式設計和/或彈性網格布局，就好像它已經是在瀏覽器中查看的完全實現的 web 頁面一樣。 根據頁面/瀏覽器的寬度，表單字段元素將換行或彼此相鄰顯示。

Figma 還不支持這個。 您必須說明這兩種布局，然后指示開發人員將布局實現為同一頁面的響應式設計模式。

作為一種解決方法，您可以創建一個 Smart Animation 表單域隨着頁面寬度的變化而環繞/展開。 它不是交互式原型，但它傳達了將響應式設計布局應用於表單字段的想法。