APP設計軟件中 Figma 是雲瑞設計比較推崇的一個軟件，而今天分享的是，5個方法讓你入門
Figma APP 瞭解動作製作，這絕對是這個軟件的高階運用之一，肯定值得您去了解，enjoy！我喜歡Figma，它是其中的一種工具，從我第一次嘗試起，我就知道這裡有一些新奇有趣的東西，因為從那以後每次更新它都會變得更好。
作為設計師/開發人員，我總是在設計方面和開發方面都在尋找新工具，我們顯然在這兩個方面都處在新工具的黃金時代。
自從我第一次嘗試以來，Figma已經走了很長一段路。它已經發展成為最有影響力的設計工具之一，它周圍還具有插件生態系統和一些新技巧。
不知何故，我看到很多人都在關注其動畫功能對Adobe XD，Protopie，UXPin或Principle的關注，所以我決定寫這篇文章，讓您知道在Figma中這幾天有什麼可能。
隨著我們工具的不斷髮展，我相信Figma將獲得越來越多的功能，並且本文可能在幾個月後變得古怪，但這只是當今可能的快照。
在本文中，我將介紹從Figa到複雜的各種向Figma中完成的設計中添加動畫的方法，從最簡單到最複雜，隨心所欲，這是我的命令：
- 方法1：添加GIF
- 方法2：塑身
- 方法3：在Figma中進行簡單原型製作
- 方法4：Figma的智能動畫
- 方法5：對動畫進行編碼
我和Noa Shpinat搖擺了Google的TLV校園
本文是我們上個月在Google For StartupsTLV校園中進行的一次研討會的結果，當我們進入動畫部分時看到人們的臉上的反應真是令人鼓舞。
此處顯示的所有示例均與Peanuts Studio的Noa Shpinat和Figma的當地社區負責人Ido Zaifman合作完成，非常感謝雙方。
方法 #1: 添加 GIF
GIF是在Figma中添加動畫的最簡單方法，您可以像其他任何圖像文件一樣拖放GIF，當您進入Present模式時它將自動播放。
將動畫GIF拖動到Figma中，Eadweard Muybridge製作的GIF內容
Figma可以在框架本身上顯示GIF的任何部分。如果要在編輯設計時更改Figma呈現的靜止幀，可以在“設計”選項卡的“填充”設置中更改它，只需單擊GIF並拖動迷你時間線即可。
您可以在互聯網上找到GIF，可以通過單擊圖像選項卡並按類型過濾結果，然後選擇GIF（或動畫GIF，具體取決於搜索引擎）來在Google和DuckDuckGo中專門搜索動畫GIF。
還有一些專業網站提供大量常用的GIF，例如Giphy，Tenor，Gifbin等。這些網站通常在用戶社區中工作，這些用戶上傳了他們的視頻以將其轉換為社交媒體的GIF，但是雙向其結果是您可以為您的項目找到完美的GIF。
找不到完美的GIF？自己做！有關更多詳細信息，請參見方法2。
方法 #2: 塑身
GIF可以使用多種工具製作。最值得注意的是Adobe Photoshop，但這是Figma，所以讓我們用Figmotion製作一個GIF，它是Figma的插件，可讓您製作基於關鍵幀的動畫（類似於After Effects的迷你版）。
Figmotion有點棘手，因為它是一個外部插件，有時會帶來一些錯誤和意外後果。這是增加設計動感並將這些設計呈現為視頻或GIF以便與團隊中其他人共享的好方法。
如何在Figma中安裝插件？
首先，如果您尚未安裝插件，請轉到您的Figma應用程序，然後在“插件”菜單下轉到“管理插件”，在這裡您將看到一些精選插件。如果沒有Figmotion，請轉到瀏覽所有插件，然後會列出所有可用插件，您可以轉到右上角的搜索框，然後輸入Figmotion。
現在我們已經安裝了插件，讓我們開始深入研究，打開Figmotion轉到Plugins，然後選擇Figmotion，打開Figmotion，該插件將在其他所有內容的新窗口中打開。
如果要為元素設置動畫，則必須將該元素插入框架中，這樣您就可以使用畫布來處理插件。
Figma的框架（白色畫布）和一個元素（藍色正方形），這是Figmotion的最小設置
插件可能會提示您選擇要處理的框架。它指的是Figma的框架，例如其他應用程序中的畫板或畫布，而不是動畫框架，這是其他內容。
TIPS！
如果您選擇Figma框架然後打開Figmotion，它將自動選擇選定的框架作為您要處理的框架。
現在，您應該能夠在Figmotion圖層中看到您的元素，並且可以根據需要對其進行動畫處理。您還可以通過從插件窗口右上角的列表中選擇特定元素來直接轉到該特定元素。
現在假設您要對元素的旋轉進行動畫處理，首先在可設置動畫的屬性列表中找到旋轉線，然後單擊關鍵幀按鈕（看起來像菱形，就像在After Effects中一樣）。
在Figmotion中添加關鍵幀
我們可以清理時間軸，也可以只使用0ms，100ms，200ms鏈接（是的，這些標籤是可單擊的鏈接），然後通過單擊與上述屏幕截圖相同的關鍵幀按鈕來創建另一個關鍵幀。
創建關鍵幀後，我們可以單擊它，然後手動更改此值，或者在Figma中更改元素旋轉，然後單擊關鍵幀以對其進行編輯，然後單擊畫筆圖標以獲取Figma的當前狀態，該工作流程在下面的屏幕截圖。
Figmotion Brush按鈕可從Figma的框架中捕獲元素的狀態
製作完動畫後，通過單擊“渲染”按鈕然後選擇適當的格式，Figmotion可以將其渲染為視頻或GIF。
Figmotion的渲染為循環GIF
該插件還可以通過單擊“導出”按鈕將動畫導出為代碼，您必須在CSS和JSON文件之間進行選擇，一個很好的經驗法則是為Web導出CSS和為移動應用導出JSON，即使有時您系統會要求您打破此規則，只需詢問您的開發人員或將兩者導出即可。
它導出的代碼相對乾淨而且易於閱讀，儘管有時它保存的信息超出了所需，而且某些參數（例如圓弧）在CSS中無法實現。
我在Figmotion中製作的GIF動畫，以宣傳Figma Deep Dive Workshop
方法 #3: Figma中的簡單原型
原型製作是連接不同的屏幕（或Figma中的框架）以構建應用或產品的交互式仿真的簡單操作。在此方法中，我們將深入探討Figma必須提供的原型選項，但“智能動畫”功能除外，我們將在下一個方法（方法＃4）中介紹該功能。
如果您要從“原型”選項卡切換到原型模式（在屏幕右側，則有3個選項卡：“設計”，“原型和代碼”），您會注意到選擇的每個對象（包括Figma的框架）上都有一個小白點右邊。
這些點使您可以將框架或對象相互連接，如果單擊這些點，則可以將箭頭從一幀拖到下一幀，這樣就可以進行流程了。
箭頭表示框架（或對象）之間的流動
連接屏幕後，您將在所選交互的“原型”選項卡選項上看到。如果看不到標題為“交互和動畫”的選項，則需要單擊以下藍色箭頭之一。
選擇箭頭後，標題為“交互”的選項可在其中選擇此交互的觸發和行為類型。動畫部分是您選擇動畫樣式和持續時間的地方。
我不會介紹所有觸發器，但一些重要的觸發器是：
- 單擊時：表示當用戶單擊您選擇的對象時將發生交互。如果交互位於框架上，則用戶將能夠單擊此框架上的任何位置以觸發交互。
- 懸停時：當用戶懸停在選定的對象或框架上時，交互將開始，並且當用戶完成懸停時，它將返回其初始狀態。
- 鼠標進入/鼠標離開：當鼠標進入或離開所選元素（或框架）時，交互將開始，與“懸停時”非常相似，但是當懸停結束時，交互不會自動反彈，使用鼠標進入和離開都可以假裝感覺差不多的互動。當您希望在鼠標進入時發生某些事情而在懸停完成後不會自動返回時，最好使用此方法。例如，考慮菜單和子菜單。
- 延遲後：互動會在指定時間結束後自動發生，如果您的延遲為200毫秒，則互動將從用戶到達此幀開始的200毫秒後開始。這種交互類型僅限於框架，例如，在製作原型按鈕時，您不能選擇這種交互。
既然選擇了觸發器，就可以看到此交互行為的不同選項。最常見的是“導航至”，它使您可以選擇在交互結束後用戶將到達的另一幀。
您還可以使用“打開覆蓋”來交換框架上的對象而無需完全更改整個框架，這種交互作用還可以添加半透明的背景，以及在單擊對象外部，想到彈出窗口或警報時可以關閉覆蓋的選項。
製作中的Figma原型動畫，全部設置為“緩入緩出”和300ms持續時間
您的互動即將完成，我們所要做的就是從菜單中選擇所需的動畫。選擇一個後，您會在[原型]標籤的動畫菜單中看到帶有假A和B屏幕（如上面的GIF）的小預覽中的外觀。
可以使用3個參數設置Figma中的動畫，動畫類型，時間和持續時間。
動畫類型：Figma為您提供了一些動畫預設供您選擇：即時意味著您的流程將立即改變，根本沒有動畫。溶解是2幀之間的淡入淡出，“移入/移出”，“推入和滑入/移出”都是常見的UI原型選項，您可能從此時僅使用移動應用程序就可以知道它們。
時間：這意味著放寬，可以將Figma中的每個動畫設置為“緩入”，“緩出”或“緩入和緩出”。緩動是指動畫中動作的緩慢度。緩入表示您的動畫將開始緩慢播放並隨其加速而加速，反之則相反，您的動畫將開始快速播放並緩慢消失。緩入緩出表示動畫將開始緩慢，加速並最後緩慢消失。
根據Chrome開發者工具的實施，緩入，緩入和緩入和緩入
持續時間：在Figma中，任何動畫的持續時間都以毫秒為單位設置（這就是ms所代表的意思），這意味著您在1秒鐘內擁有1000毫秒，因此，如果您希望某些動畫花費500毫秒的半秒即可。通常，在UI動畫中，花費不超過500ms的時間，大多數動畫甚至應該在200ms-300ms的時間內變得更加生動。
完成原型製作後，您可以單擊Present按鈕以查看其實際效果（該按鈕看起來像一個播放按鈕，位於右上角的Share按鈕旁邊）。
在“原型”選項卡中，當文檔中未選擇任何內容時，您可以更改“開始幀”，即單擊“呈現”時將成為原型的第一幀，至少在未選擇其他任何幀的情況下，也可以選擇“設備”您的原型將安裝在其中。Android和iPhone的行為略有不同，因此請忠於所選擇的平臺。
TIPS！
您也可以通過將藍色播放圖標拖動到所需的幀來選擇起始幀，而無需在菜單中進行挖掘。
生成的原型具有很多“導航到”和“移入”功能，顯示在iPhone 8中
我確定您在“原型”選項中看到了一個名為Smart Animate的小選項，並想知道該怎麼做，現在是時候進入Figma最有趣的動畫工具了。
方法#4: Figma的智能動畫
Smart Animate是一種連接兩個相似框架並在它們之間獲得流暢動畫的方法，就好像您自己對其進行了動畫處理一樣。 Figma正在為幀插值，以傳達您可能一直想要的運動。
您可以將Figma的幀視為動畫關鍵幀，而不是畫板，這樣一來，您可以更直觀地理解A，B狀態（關鍵幀），而Figma可以為您創建中間幀。
讓我們舉一個簡單的例子，您在下面看到的這個旋轉正方形是由兩個框架（框架A和框架B）構建的，單擊它們時Figma在它們之間翻轉，您可以在左側看到兩個框架，並在其上看到生成的原型正確的。
Figma的Smart Animate功能，由左側的兩個框架組成
Smart Animate交互與Figma中的其他任何原型製作一樣完成（更多信息請參見方法＃3），您只需選擇要連接的框架或對象（我們的框架A），並確保您處於原型中標籤，然後從選定對象或框架右側的白點拖動即可。
之後，請確保從“動畫”子菜單中選擇“智能動畫”，然後選擇您喜歡的時間（緩入，緩出等）和持續時間（以毫秒為單位），僅此而已，Figma將負責其餘的工作。
Figma並不一定總是正確，您需要具有完全相同的圖層才能正常工作。如果任一幀中缺少某些圖層，則可能無法匹配圖層。如果Figma在每個幀中都有不同的名稱，或者與其他圖層的排列順序不同，則無法可靠地選擇要動畫的對象。
此外，您甚至無法編輯動畫中對象的實際矢量，甚至不能編輯角半徑。可以將Smart Animate視為在對象之上進行的變換，可以更改對象的位置，旋轉和縮放比例，但不能更改太多，這也是Web瀏覽器中動畫的正確方法，因此Figma確實為您做好了準備將來學習CSS（方法5）。
TIPS！
保持簡單並保持圖層井井有條，不要在動畫製作過程中更改圖層的順序，也不要更改幀大小或對象矢量。
環視動畫，完全使用Figma中的Smart Animate完成
一個很好的例子是，這個可愛的角色看著您的鼠標光標（見上文），全部由Smart Animate和不可見的矩形完成，它們會在鼠標懸停時改變幀。
您還可以混合和匹配那些動畫方法，按鈕懸停效果是使用方法3中看到的“打開覆蓋”創建的，即使其餘的操作是通過Smart Animate完成的，也可以將GIF放入混合物中，如我們所見在方法1中。
Figma的幀創建上述動畫，請注意最後的按鈕覆蓋
方法#5: 對動畫進行編碼
我將在這裡分享的最後一種方法是使用CSS編碼，如果您完全不熟悉CSS和/或不希望學習它就可以了，只是知道這是擴展技能的一種好方法。
話雖如此，我認為所有以數字為先的設計師都應該學習如何在自己喜歡的平臺上進行編碼，我認為面向產品設計師或UX設計師的CSS是最低要求，因為最終它確實會影響像素級別和低估的設計。運作方式可以為您提供技術知識，以做出更適合的設計。
Figma是一個很好的設計工具，但是到目前為止我們所討論的動畫工具（方法1-4）還是有點不足，例如，我無法通過自定義緩動來觀看我的動畫，而不僅僅是輕鬆或輕鬆出來
一個足夠簡單的方法是將幀導出為SVG文件。 SVG很棒，它們將所有矢量和所有對象分隔開，它也可以僅用幾行代碼就可以成為動畫SVG。
為了對您從Figma導出的SVG文件進行更改，請使用Visual Studio Code，Brackets，Atom，Sublime Text等代碼編輯器或其他突出顯示您的代碼的文件來打開它。
Figma導出SVG，左：在我的代碼編輯器中顯示，右：在Chrome中打開
首先，在我們兩次打開SVG文件之後（一次在您的瀏覽器中，一次在您的代碼編輯器中），我們需要找出要移動的文件，最簡單的方法是在瀏覽器中，將鼠標懸停在要設置動畫的對象（在我的情況下是學生），右鍵單擊它並選擇“檢查”。
現在它應該自動突出顯示代碼中此元素所在的行，您可以在代碼編輯器中搜索此行，一旦找到該行，您需要在該元素中添加一個id，因此在我的情況下為以下行：
它變成了這樣：
id=”myCircle” cx=”180" cy=”155" r=”19" fill=”#363F41"/>
之後，您需要轉到代碼的頂部，並在打開svg標籤結束之後立即添加樣式標籤，以便您的代碼看起來與此非常相似（至少在結構上）：
If you know CSS then you’re probably already typing away inside those style tags, but just to check if it’s all working, please add your object inside those tags with a test fill or stroke, like so:
如果出現問題，這應該給您一個提示。如果您保存代碼並刷新瀏覽器，則選擇的元素現在應塗成紅色，如果對象沒有填充，則可以嘗試使用以下方法：紅色;如果未進行任何更改，請代替填充，請確保您給元素提供的ID與上面的代碼匹配。在CSS中，您需要在任何ID之前插入＃號，因此在我上面的示例中，ID為myCircle。最後請確保您同時獲得了開括號和閉括號，我通常最後忘了}。
添加代碼前後的SVG文件
完成這項結構工作後，就該為元素設置動畫了，因此回到CSS部分（樣式標籤），我們需要添加一些動畫屬性和一些關鍵幀。
在下面的示例中，#myCircle內的所有屬性均為動畫屬性（您可以從以前刪除fill：red;），@ keyframes myAnim內的所有屬性均為關鍵幀：
#myCircle{
animation-name: myAnim;
animation-duration: 1500ms;
animation-timing-function: cubic-bezier(.21,-0.44,.79,1.45);
animation-iteration-count: infinite;
}
@keyframes myAnim{
0%{transform: translate(0,0);}
20%{transform: translate(0,0);}
30%{transform: translate(-10px,-5px);}
50%{transform: translate(-10px,-5px);}
60%{transform: translate(8px,2px);}
90%{transform: translate(8px,2px);}
100%{transform: translate(0,0);}
}
這就是CSS動畫的工作方式，您在對象中添加了諸如動畫持續時間之類的屬性，在這種情況下為1500ms（一個半秒），您添加了動畫的名稱，這就是我們製作的，類似於您的元素ID，但它是動畫關鍵幀的ID。
然後添加關鍵幀，並將其放置在長度為1500ms的預定義時間軸上，因為這是我們添加到元素中的動畫的持續時間，因此現在添加的關鍵幀將引用此時間軸，因此50％表示關鍵幀從起點開始將在750毫秒內。
一些更重要的屬性是animation-iteration-count，它為您提供了循環播放動畫的方式，無限意味著它會永遠循環播放，而3這樣的數字表示它將循環播放3次，然後動畫將停止播放。
另一個功能是動畫定時功能，可讓您自定義定時（緩動），您可以指定緩入，緩入，緩入，線性等功能，但真正的樂趣是立方貝塞爾曲線選項，您不需要手動計算數字，您可以使用cubic-bezier工具進行繁重的工作，只需將其複製並粘貼到您自己的代碼中即可。
我們製作的動畫SVG，您的行駛里程可能會有所不同
這種對SVG進行動畫處理的方法非常適合圖標，徽標或表情符號之類的東西，但對於大多數事情，開發人員將使用HTML + CSS（而不是SVG）構建整個屏幕，但這仍然為您提供了更豐富的快速添加動畫的方法，不要僅僅停留在進退兩難之間，並且可能會用HTML重新創建動畫的開發人員仍然對動畫有很好的指導原則，因為HTML和SVG可以為此使用相同的CSS代碼。
如果要使用“真實” HTML代碼製作原型，可以先複製並粘貼Figma在“代碼”選項卡（“原型”選項卡旁邊）中提供的內容，這將向您顯示當前所選對象的所有樣式，以及您可以從中學到很多。
在先前方法中看到的Figma設計的HTML + CSS代碼示例
也歡迎您使用HTML + CSS來為該項目製作的動畫進行動畫處理，以使該字符的按鈕和閃爍動起來，您可以隨意編輯代碼，該代碼可在此鏈接中公開獲得。
總結
Figma提供的動畫添加方法比大多數人想象的要多，您可以添加GIF，使用Figmotion，Prototype，Smart Animate添加動畫，如果還不夠，則可以始終將其導出到SVG，然後進行代碼調整以對其進行動畫處理。
一旦像Figma這樣的工具使設計師能夠將其技能擴展到動畫和編碼上，這可能不僅會在文章和教程中而且在工作說明中也將開始出現，因此我們也可能會早日到達。
我知道帶有代碼的方法＃5對於不具備實際編碼技能的設計背景的人們來說有點令人生畏，但即使只是知道這是一個選擇，也可以讓您比用更少的封閉性來考慮動畫。 Figma給你。
設計師代碼是一個寬泛的術語，需要整篇文章，如果您對有關此主題的另一篇更側重代碼的文章感興趣，我們可以深入瞭解Figma如何顯示代碼，如何導出和修改代碼以適合您自己的需求。 ，請在評論中讓我知道。
如果您喜歡這篇文章，那麼我會對按鈕差異化有一個很好的瞭解，對於設計系統中的運動設計也有一個很好的瞭解，當然也非常高興。
原文：UXdeisgn
翻譯：雲瑞設計
