如何在 Figma 中製作可滾動資源
要使您的內容在 Figma 中可滾動，需要導航側邊選項卡。不幸的是，它不會自動出現在主用戶界面上。當您想要在設計框架內呈現大量信息時，可滾動內容非常有用。一些示例包括登陸頁面、應用程序界面或彈出窗口。
本文將解釋如何使 Figma 設計可滾動。
在形狀內安裝可滾動文本
讓我們首先在一個簡單的形狀內製作一個可滾動的文本。這是可滾動文本的最常見示例，您可以隨後添加其他屬性，例如顏色、字體和輪廓。
其操作方法如下：
- 創建一個基本形狀。對於此示例，我們建議製作一個垂直矩形。您可以通過選擇左側邊欄上的矩形工具或使用“R”命令來執行此操作。按住左鍵，單擊畫佈點，然後繪製形狀。
- 在右側邊欄的“設計”選項卡下，選中“剪輯內容”選項旁邊的複選框。
- 選擇文本工具創建文本框並將其放置在可滾動框架內。輸入或複制粘貼您正在使用的任何內容。
- 選擇框架並轉到界面右側的原型選項卡。然後，選擇“溢出滾動”選項和您喜歡的樣式。這裡我們將選擇“垂直滾動”。
一旦您單擊原型選項卡上的溢出滾動選項，就會有多種樣式。我們選擇垂直矩形，因為我們使用垂直矩形作為示例。這使您可以從上到下閱讀文本。其他一些風格包括：
- 水平滾動 – 在某些示例中，用戶可以使文本從左向右滾動。如果您要以景觀美化格式創建設計，則此選項更可取。
- 無滾動 – 如果您想將內容鎖定到位，請選擇無滾動選項。
- 雙向 – 創建包含大量內容的設計並垂直和水平滾動。
您應該在設計中使用可滾動功能，以最大限度地減少讀者在與內容交互時所花費的精力（點擊）。他們可以滑動或使用鼠標滾輪，而不是單擊或點擊大量文本。
如何設計可滾動組件
根據您的產品，您需要設計內容框架和內容本身。該過程涉及向整體設計添加顏色、字體和可能的其他組件。改變這些元素很容易，但選擇正確的美學需要仔細考慮。
如何更改可滾動設計的字體
您需要做的第一件事是更改可滾動設計的字體。Figma 提供多種款式供您選擇。這是最簡單的方法：
- 選擇可滾動框架中要更改的內容。
- 導航到位於左上角的下拉菜單並選擇它。
- 滾動瀏覽字體，直到找到您想要使用的字體。
如果您正在設計的品牌具有特定的排版，您可能會選擇相同的排版，以便與品牌形象保持一致。如果您有更多的迴旋餘地，則應該在選擇正確的示例之前嘗試不同的示例。
一些考慮因素包括：
- 設計意圖——選擇排版應該符合您的設計意圖。如果您想清楚地傳達大量信息，請選擇裝飾性較少但優雅的字體。
- 其他組件 – 您的字體是一個視覺元素，就像您設計中的任何其他元素一樣。它應該與您包含的框架和其他組件相匹配。
- 整體審美和品牌——品牌的總體感覺也會影響您選擇的字體。例如，鮮花遞送服務不會採用與 SAAS 登陸頁面相同的字體。
雖然選擇正確的字體可能需要一些實驗，但一些具體的字體示例是最可靠的選擇：
- Roboto – 如果您想安全起見，請使用 Roboto。它被認為是一種具有多種應用的多功能和中性字體。由於它非常容易理解，許多人選擇使用 Roboto 來獲取說明和登陸頁面。
- Poppins – 想要營造友好而又現代、乾淨的氛圍，請選擇 Poppins。這種字體更加圓潤，使文本更具吸引力且易於閱讀。
- Raleway – 為精緻的奢侈品牌設計時，您可能需要考慮 Raleway。它通常很薄，但具有不同的重量變化和整體優雅的外觀。
- Lato – 友好、可靠、嚴肅是描述這種字體的正確詞語。設計人員可以將 Lato 用於標題和段落文本，其中可讀性和清晰度是首要考慮因素。
您還需要考慮您選擇的字體大小和文本樣式。一般來說，粗體用於標題或強調部分，而斜體用於引述。
更改框架形狀的顏色
除了更改字體之外，您還需要更改框架形狀的顏色。再次強調，確切的色調將取決於您所設計的品牌或您的審美觀。幸運的是，Figma 的界面使選擇顏色變得容易。
以下是更改框架顏色的方法：
- 選擇您要編輯的框架。
- 該圖層將出現在右側邊欄上。導航到“填充”部分。
- 選擇“+”添加填充。
- 將打開一個顏色選擇器窗口。選擇填充顏色和漸變。如果您知道確切的色調，您也可以輸入十六進制代碼。
與其他設計元素一樣，您可能需要嘗試不同的顏色以及它們與您選擇的字體的外觀。
常見問題解答
Figma 中有可滾動文本命令嗎？
不幸的是，Figma 中沒有使文本可滾動的命令。但是，您可以使用上述方法只需單擊幾下即可完成該過程。
我如何決定我想要哪個溢出選項？
這取決於您使用的文本類型、整體設計及其功能。垂直樣式通常適合瀏覽大文本。
哪些設備界面通常需要可滾動的文本設計？
一個很好的例子是應用程序的設計模型。用戶可以創建手機作為通用框架，而可滾動文本可以作為應用程序的界面。
Figma 是製作可滾動設計的最佳選擇嗎？
Figma 是製作各種表單（包括可滾動設計）的最佳工具之一。更好的是，Figma 是免費的。但是，您可能有某些個人偏好。嘗試使用一些平台（例如 Adobe Illustrator）進行試驗，直到找到最適合您的工具。
使您的設計可滾動且用戶友好
在 Figma 中製作框架內的任何文本都很容易。只需選擇幀，然後移至剪輯內容選項。完成後，您可以選擇溢出滾動選項。同樣，您不應忽視其他重要的設計元素，例如框架顏色和形狀以及文本字體。讓您的設計可滾動是登陸頁面、應用程序界面和彈出窗口的絕佳選擇。它使文本更容易瀏覽而不是點擊，最終提高用戶體驗。
您是否發現在 Figma 中使內容可滾動很容易？選擇正確的字體怎麼樣？請在下面的評論部分告訴我們。
發佈留言