無花果原型：有用的模型的快速，逐步指南

Figma原型設計：將靜態模型轉化為動態交互式體驗

核心要點:

• Figma原型設計將靜態模型轉化為動態、交互式原型，幫助開發者理解設計的用戶流程、功能和感受。
• 創建Figma原型的步驟包括：創建水平滾動框架、創建畫板過渡、創建返回上一畫板的功能以及創建複雜的定時動畫。每一步都涉及特定的設置和交互，以確保平滑的過渡和動畫效果。
• Figma原型具有交互性，可以與他人共享以進行預覽和收集反饋。此功能增強了協作性，並允許根據收到的反饋進行改進。 Figma還通過LottieFiles等插件支持更複雜的動畫。

原型設計是將靜態模型轉化為交互式和動態模型（更廣為人知的是原型）的過程。將靜態模型變為現實無疑是設計工作流程中最激動人心（如果不是最激動人心）的步驟之一。

對於開發者而言，理解設計的用戶流程、感受和功能至關重要。還有什麼比使用Figma（根據2020年設計工具調查，它是世界上最好的設計工具）更好的方法呢？

一旦掌握了Figma原型設計的方法，就會發現它簡單易用且令人愉快。首先複製此靜態模型（點擊“一系列交互”，然後點擊“複製到我的草稿”），然後在整個教程中，我們將添加越來越多的功能保真度。您的本地副本應如下所示：

注意：我假設您至少對現代UI設計工具（如Figma或Sketch）有一定的了解。

步驟1：創建水平滾動框架

讓我們從畫板1開始，使超出視口的卡片選擇能夠水平滾動。這是使我們的模型動態化的一種方法，無需創建Figma所謂的“連接”。連接將我們引導到新的畫板，但這並非我們在步驟1中要做的。

首先從圖層面板（左側邊欄）中選擇“卡片”，然後從設計面板（這次是右側邊欄）中使用下拉菜單將“組”選項更改為“框架”。

我不會深入探討這一點，但是組和框架的主要區別在於，組緊密地包裹其子元素，而框架可以是任何大小。這意味著：

• 組的子元素會隨組一起縮放，而框架的子元素則比較頑固（這是一個特性，而不是錯誤）
• 框架的子元素相對於其框架對齊，而組的子元素仍然相對於其畫闆對齊
• 框架可以包含可以水平或垂直滾動的溢出內容（這就是我們要嘗試的）

等等，這是否意味著畫板實際上是框架？ 的確：其他UI設計工具稱之為畫板，Figma稱之為框架。這可能是因為在Figma中，框架可以嵌套在其他框架中，這與Sketch、Adobe XD等其他工具中的畫板略有不同。

切換到原型模式（⌥ 9），現在可以使用“溢出行為”設置，然後將下拉選項從“無滾動”更改為“水平滾動”。

現在，您會注意到陰影被新轉換的框架奇怪地切斷了，但這實際上是溢出內容的標準行為，它可以相對容易地修復。

由於陰影的模糊變量為30，並且框架可以是任何大小，因此我們需要調整框架大小，以便在其邊緣周圍留出額外的30個間距。調整大小（shift ⌘ ↑↓←→）和微調（shift ↑↓←→）對象應該很容易。

順便說一句，您可能會注意到（如果您點擊框架），卡片及其間距可以很容易地重新排列。這與本教程本身無關，但仍然很棒。

步驟2：創建畫板過渡

對於下一步，讓我們嘗試一個將一個畫板連接到另一個畫板的交互，也稱為“連接”。

選擇“卡片”框架（是的，整個框架，因為現在哪個卡片被點擊並不重要）。然後，假設您仍然處於原型模式，將連接器（即懸停時顯示 的帶邊框的圓圈）拖動到畫板2。這些畫板現在已連接。

將連接器放到畫板2上後，“連接”設置（現在應該顯示出來）應如下所示：

• 交互細節
  • “點擊時”（交互將由點擊觸發）
  • “導航到” / “畫板2”（點擊將導致用戶導航到畫板2）
• 動畫
  • “推動” / “←”（“畫板2”將從右側推動到屏幕上）
  • “緩出” / “300毫秒”（在300毫秒內，動畫將快速開始，然後逐漸減慢）
  • 選中“智能動畫匹配圖層”複選框（如果保持不變，則後退按鈕和導航等常用元素將不會動畫）

想看看我們到目前為止所做的工作嗎？點擊右上角的“演示”按鈕（即播放圖標）。如果您在網絡瀏覽器中使用Figma，這將打開一個新標籤頁。

提示：按R重新加載原型。

步驟3：後退！

在我們繼續並深入研究更複雜的連接之前，讓我們確保我們可以返回到畫板1（或我們來自的任何畫板）。創建另一個連接，這次從後退按鈕開始，設置如下：

• 交互細節
  • “點擊時”
  • “後退”

這次將無法使用動畫設置，因為選項是固定的。具體來說，過渡將反向動畫。例如，如果我們使用“推動←”過渡到畫板，那麼我們將使用“推動→”過渡回來。

步驟4：創建（相對）複雜的定時動畫

在接下來的最後一步中，我們將創建一個跨越多個畫板並分別為多個對象而不是整個畫板製作動畫的單個動畫。具體來說，我們將點擊按鈕後將展開的卡片向左旋轉，然後設置計時器使其向右旋轉，然後再返回其原始狀態。

本質上，這是一個擺動動畫。

選擇畫板2上的“按鈕”對象，並建立一個連接到畫板3的連接器。使用以下設置：

• 交互細節
  • “點擊時”
  • “導航到” / “畫板3”
• 動畫
  • “智能動畫”
  • “緩出” / “300毫秒”

注意：由於我們選擇了“智能動畫”作為動畫類型，因此同時存在於兩個畫板中但視覺上不同的圖層將平滑過渡，但前提是相關的圖層結構和圖層名稱保持一致。如果它們不保持一致，Figma將無法理解這些圖層是同一個圖層，它們將無法正確動畫。

在“設計”面板中，您應該看到我已經將按鈕的背景設置為#FF0000並將卡片向左旋轉。

但是，如何在300毫秒的“向左旋轉動畫”運行完畢後將其向右旋轉呢？好吧，這就是需要定時動畫的地方。重複上述步驟，這次將畫板3連接到畫板4，“延遲後” / “300毫秒”是唯一的區別。要完成交互，請再次重複將畫板4連接到畫板5。

這就是我們連續運行動畫的方式。在我們的例子中，初始點擊交互激活了“向左旋轉動畫”，然後後續動畫會自動按計時器進行。

Figma原型設計很有趣，對吧？

我們現在已經完成了本教程。 Figma文件實際上看起來沒有什麼不同（除了在使用原型模式時有一些可見的連接器）。但是，它在演示模式下的功能將大相徑庭。如果您沒有按照教程進行操作，請查看“動態”版本，您可以在其中測試最終結果。

很酷，對吧？

雖然我們當然可以設想更複雜的動畫風格和交互類型，但我們在這裡看到的應該涵蓋了您需要知道的約99％的內容。在交互方面，簡單總是更好！

對於需要更多複雜性的動畫，有一個名為LottieFiles的簡潔Figma插件絕對值得一試。

有關Figma的更多信息，您還可以閱讀有關使用Figma進行線框圖設計的內容。

關於Figma原型的常見問題

什麼是Figma原型？ Figma原型是使用Figma（一種協作設計工具）創建的設計的交互式表示。它允許設計師展示和測試其設計的功效，提供更動態和以用戶為中心體驗。

如何在Figma中創建原型？要在Figma中創建原型，請設計屏幕或框架，然後使用“原型”模式將這些框架鏈接在一起，定義交互、過渡和動畫以模擬用戶體驗。

在共享之前，我可以預覽我的Figma原型嗎？是的，Figma允許您直接在Figma編輯器中預覽您的原型。只需進入原型模式並點擊“演示”按鈕即可體驗您的設計交互。

如何與他人共享我的Figma原型？您可以通過生成可共享鏈接來共享您的Figma原型。轉到“共享”菜單，調整共享設置，然後復制鏈接。任何擁有該鏈接的人都可以查看和交互您的原型。

有沒有辦法收集有關我的Figma原型的反饋？是的，Figma支持對設計和原型進行評論。共享您的原型鏈接，查看者可以直接在設計的特定元素或區域上留下評論，從而促進協作和反饋收集。

以上是無花果原型：有用的模型的快速，逐步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！