Originally published on my personal blog.

最初發布在我的 個人博客上 。

Most designers will spend many hours perfecting every pixel of their static UI designs but will barely spend any time perfecting the transitions between these pages.

大多數設計人員將花費大量時間來完善其靜態UI設計的每個像素，但幾乎不會花費任何時間來完善這些頁面之間的過渡。

When you design a mobile menu you design both states, the opened menu, and the closed menu. But if a user clicks to open the menu, does it just suddenly appear? Does it slide in? From what side? How fast? Is the animation linear or does it ease in and/or out?

在設計移動菜單時，您同時設計了兩個狀態：打開的菜單和關閉的菜單。 但是，如果用戶單擊打開菜單，它是否突然出現？ 它滑進去了嗎？ 從哪一邊？ 多快？ 動畫是線性的還是入場和/或出場輕松？

There are many ambiguities if you just supply the developer implementing the design with two static screens. Adding a one-line note to it that says “it slides in” is not nearly detailed enough.

如果您僅提供給開發人員兩個靜態屏幕來實現設計，就會有很多歧義。 在上面添加單行注釋說“它會滑入”還不夠詳細。

Motion plays an important role in your designs and can help the user understand what’s happening when they interact with and navigate around your app.

Motion在您的設計中起著重要的作用，可以幫助用戶了解與應用程序進行交互和瀏覽時發生的情況。

We’ll cover some of the most common animations found in apps and websites today and how to implement each one into your designs using Figma.

我們將介紹當今在應用程序和網站中發現的一些最常見的動畫，以及如何使用Figma將每個動畫實現到您的設計中。

基礎 (The Basics)

Feel free to skip this section if you are familiar with the basics of animation in Figma and want to go straight to the examples.

如果您熟悉Figma中的動畫基礎并且想直接看示例，請隨意跳過本節。

First, let’s start with the basics of how animation in Figma works.

首先，讓我們從Figma中動畫工作原理的基礎開始。

To add a transition from one screen to another in Figma you’ll need to create a connection between two frames, a trigger that starts the transition and an animation type to shape what the transition between the frames will look like.

要在Figma中從一個屏幕過渡到另一個屏幕，您需要在兩個框架之間創建一個連接，一個觸發器開始過渡，并使用動畫類型來塑造框架之間過渡的外觀。

Figma has a variety of animations and interactions to choose from and we’ll take a look at which ones you can use to replicate the most common animations on the web and in mobile apps.

Figma有多種動畫和交互方式可供選擇，我們將研究可用于復制網絡和移動應用程序中最常見動畫的動畫。

智能動畫 (Smart Animate)

Figma also has a ‘special’ animation type called Smart Animate which tries to automatically figure out how to best transition between two states using layer names and hierarchy.

FIGMA也有稱為“特殊的”動畫類型智能動畫它會嘗試自動找出如何使用圖層名稱和層次兩個狀態之間最好過渡。

Layer names play an important role in Figma’s Smart Animate to determine which layers change and how they change. Make sure the layers in both compositions match exactly so Figma can keep track of them correctly.

圖層名稱在Figma的Smart Animate中起著重要的作用，它可以確定哪些圖層發生更改以及如何更改。 確保兩個合成中的圖層完全匹配，以便Figma可以正確跟蹤它們。

You can rename one or multiple layers by pressing using the keyboard shortcuts:

您可以通過使用鍵盤快捷鍵按來重命名一層或多層 ：

• Mac: Command ? + R
  Mac：Command?+ R
• Windows: Ctrl + R
  Windows：Ctrl + R

To check if Figma can correctly track a layer across compositions, open the prototype tab in the sidebar and Figma will automatically highlight the layers in other frames that will be matched by Smart Animate by adding a purple border.

要檢查Figma是否可以正確跟蹤整個合成中的圖層，請打開側欄中的原型選項卡，然后Figma將通過添加紫色邊框自動突出顯示其他幀中的圖層，這些幀將與Smart Animate匹配。

You can also choose to apply another animation type and enable Smart Animate for only the matching layers. Figma will then apply your animation only to the layers that should be updated.

您還可以選擇應用其他動畫類型，并僅對匹配的圖層啟用“智能動畫”。 然后，Figma將僅將動畫應用于應更新的圖層。

If you do not check this option, the animation will be applied to the entire composition including layers that do not change. This will result in also applying the animation to common elements like the iOS or Android status bar which should not animate when navigating to a different page.

如果不選中此選項，則動畫將應用于包括不改變圖層的整個合成。 這還將導致將動畫應用于iOS或Android狀態欄等常見元素，當導航到其他頁面時不應動畫。

Important: All of these examples are available in Figma so you can test and experiment with each demo yourself.

重要提示： Figma中提供了所有這些示例，因此您可以自己測試和試驗每個演示。

＃1漢堡菜單 (#1 Hamburger Menu)

Almost every (mobile) website and app has one, the infamous hamburger menu. Luckily this one is super easy to create in Figma using the Smart Animate feature.

幾乎每個(移動)網站和應用程序都有一個臭名昭著的漢堡包菜單。 幸運的是，使用Smart Animate功能可以在Figma中輕松創建此圖形。

How To Create This Animation

如何制作動畫

All we have to do is to create two versions of it like we normally would when designing a hamburger menu. One with the menu in a closed state and one with the menu in an opened state.

我們要做的就是像平常設計漢堡菜單時一樣創建兩個版本。 一種是菜單處于關閉狀態，另一種是菜單處于打開狀態。

We’ll then add the connection, trigger and animation as explained in the basics.

然后，我們將按照基礎知識中的說明添加連接，觸發器和動畫。

1. Select the hamburger icon in the first frame and open the prototype tab in the right sidebar. Select On Tap as the interaction to set the animation trigger.

   在第一幀中選擇漢堡包圖標，然后在右側欄中打開原型標簽。 選擇“點擊時”作為交互設置動畫觸發器。

2. Set the interaction to Navigate To and select the other frame with the mobile menu in an opened state or click on the node and drag it to the next frame.

   將交互設置為“ 導航至”，然后在移動菜單處于打開狀態的情況下選擇其他框架，或者單擊該節點并將其拖動到下一個框架。

3. In the Animation section, select Smart Animate from the Transition Field.

   在“ 動畫”部分中，從“ 過渡”字段中選擇“ 智能動畫 ”。

4. (optional) Apply Easing or change the Duration of the transition.

   (可選)應用緩動或更改過渡的持續時間 。

You can now open the menu but we haven’t set the trigger to be able to close the menu again.

您現在可以打開菜單，但我們尚未將觸發器設置為能夠再次關閉菜單。

Repeat the previous steps on the second frame but set Navigate To back to the frame with the menu in the closed state.

在第二個框架上重復前面的步驟，但是在菜單處于關閉狀態的情況下將“ 導航到”設置回該框架。

That’s it! You can then go to test the animation by clicking the play icon in the top right of Figma to open presentation view. You can now open and close the hamburger menu and see the transition between the two states.

而已！ 然后，您可以通過單擊Figma右上方的播放圖標來測試動畫，以打開演示視圖。 現在，您可以打開和關閉漢堡菜單，并查看兩個狀態之間的轉換。

＃2滑片 (#2 Sliding Tabs)

Tabs are a very common design pattern, especially in mobile apps. Having no animation when switching tabs makes the transition feel very sudden. By positioning the new tab content relative to the action that opens it we can show continuity in the transition between the tabs. This helps the user make sense of where the information comes from.

選項卡是一種非常常見的設計模式，尤其是在移動應用程序中。 切換選項卡時沒有動畫會使過渡感覺非常突然。 通過相對于打開操作的位置來定位新標簽頁內容，我們可以在標簽頁之間的過渡中顯示連續性。 這可以幫助用戶了解信息的來源。

How To Create This Animation

如何制作動畫

To create this animation we’ll first make the two static UI screens with tabs that we can navigate between.

要創建此動畫，我們首先要制作兩個靜態UI屏幕，并在其中進行導航。

The user needs to be able to transition between the tabs in two ways, by clicking the tab title and by swiping between pages, so we’ll add two animation triggers.

用戶需要能夠通過兩種方式在選項卡之間進行轉換，方法是單擊選項卡標題并在頁面之間滑動，因此我們將添加兩個動畫觸發器。

One for tapping the tab title and one for swiping between the different tabs.

一種用于點擊標簽頁標題，另一種用于在不同標簽頁之間滑動。

Let’s start with the first trigger; clicking on the tab title.

讓我們從第一個觸發器開始； 單擊選項卡標題。

1. Select the tab title layer and open the Prototype tab again in the sidebar. Select On Tap as the interaction to set the animation trigger.

   選擇選項卡標題層，然后再次在側欄中打開“原型”選項卡。 選擇“點擊時”作為交互設置動畫觸發器。

2. Set the interaction to Navigate To and select the screen with the other tab.

   將交互設置為“ 導航至”，然后使用其他選項卡選擇屏幕。

3. In the Animation section, select Push from the Transition Field and select the Left arrow. As the new tab is position on the right of our current tab, we want it to push from right to left.

   在“ 動畫”部分中，從“ 過渡字段”中選擇“ 推入”，然后選擇“ 向左箭頭” 。 由于新選項卡位于當前選項卡的右側，因此我們希望它從右向左推動。

4. Make sure Smart Animate matching layers is checked. That way Figma doesn’t apply the transition to the elements that both frames have in common, such as the background of the tab or the phone status bar.

   確保已選中“ 智能動畫”匹配層 。 這樣，Figma不會將過渡應用于兩個框架共有的元素，例如選項卡的背景或電話狀態欄。

For this transition to work, however, it’s very important that the actual tab content isn’t smart matched by Figma as Smart Animate will otherwise override our push animation with a fade animation because of the matching of layers.

但是，為了使過渡生效，非常重要的一點是，Figma不能智能地匹配實際的選項卡內容，因為由于圖層的匹配，智能動畫會以淡入淡出的動畫覆蓋我們的推送動畫。

To prevent this from happening we need to make sure the layer names for these do not match. You don’t have to rename each individual layer but instead, you can simply group them and rename the group (e.g. homepage content and popular content).

為了防止這種情況的發生，我們需要確保這些圖層的名稱不匹配。 您不必重命名每個單獨的圖層，而是可以簡單地將它們分組并重命名組(例如，主頁內容和受歡迎的內容)。

Now that we’ve set up the first trigger we can move on to adding the ability to swipe between tabs.

現在我們已經設置了第一個觸發器，我們可以繼續添加在選項卡之間滑動的功能。

1. For this, we’ll select the entire group that makes up the tab content and add the On Drag trigger.

   為此，我們將選擇組成選項卡內容的整個組，并添加“ 拖動時”觸發器。

2. Set the interaction to Navigate To and select the screen with the other tab.

   將交互設置為“ 導航至”，然后使用其他選項卡選擇屏幕。

3. We can use the same animation settings as the first trigger. In the Animation section, select Push from the Transition Field but this time we’ll select the Right Arrow. As the tab we want to navigate to is now on our left.

   我們可以使用與第一個觸發器相同的動畫設置。 在“ 動畫”部分中，從“ 過渡字段”中選擇“ 推入”，但這一次，我們將選擇“ 向右箭頭” 。 作為我們要導航至的選項卡現在位于我們的左側。

Both swiping and tapping on the tab title will now work for the first tab but we can’t yet navigate back to the homepage so we’ll need to add the same triggers for the Popular tab.

現在，在第一個標簽上滑動和點擊標簽標題都可以使用，但我們仍無法導航回首頁，因此我們需要為“流行”標簽添加相同的觸發器。

All of the settings for these triggers are the same except we’ll reverse the direction in the animation settings as the direction is now reversed.

這些觸發器的所有設置都相同，除了我們將在動畫設置中反轉方向，因為現在反轉了方向。

＃3載入畫面 (#3 Loading screens)

Apps and websites need to load content and this might take some time, especially for users on slow connections or when loading big files.

應用和網站需要加載內容，這可能需要一些時間，特別是對于連接速度較慢或加載大文件的用戶而言。

To improve the user experience, a lot of apps and websites display a skeleton loading screen while the data is being downloaded. This helps to make the loading feel faster to the user and show them the status of the interface.

為了改善用戶體驗，許多應用程序和網站在下載數據時顯示骨架加載屏幕。 這有助于使加載感覺更快，并向用戶顯示界面狀態。

Loading states are often forgotten by designers but a thoughtfully designed loading state can greatly improve the user experience.

設計人員通常會忘記加載狀態，但是精心設計的加載狀態可以極大地改善用戶體驗。

We’ll recreate our previous sliding tabs animation but this time we’ll simulate a loading state by showing a skeleton screen before showing the actual page content.

我們將重新創建之前的滑動選項卡動畫，但是這次我們將通過在顯示實際頁面內容之前顯示框架屏幕來模擬加載狀態。

How To Create This Animation

如何制作動畫

First, let’s copy the design used in our previous sliding tab animation. We’ll then add an extra frame in between that contains our loading state design.

首先，讓我們復制之前的滑動標簽動畫中使用的設計。 然后，我們將在兩者之間添加一個額外的框架，其中包含我們的加載狀態設計。

1. Now we can add the same triggers and animations as before, but instead of going straight to the ‘Popular’ tab. Set it to Navigate To and select the frame with the loading state.

   現在，我們可以添加與以前相同的觸發器和動畫，而不必直接進入“熱門”標簽。 將其設置為“ 導航至”，然后選擇具有加載狀態的框架。

2. On the frame with our loading state. Select the After Delay trigger and set it to Navigate To the next frame in the sequence. In this case it’s the Popular tab. You can set the delay to as long as you want, in our animation it will wait 800ms before it’s ‘finished’ loading and the content is visible.

   在我們加載狀態的框架上。 選擇“ 延遲后”觸發器，并將其設置為“ 導航到序列中的下一幀”。 在這種情況下，它是“流行”選項卡。 您可以將延遲設置為所需的時間，在我們的動畫中，它將等待800毫秒 ，直到“完成”加載，并且內容可見。

3. Set the Animation to Smart Animate so the skeleton screen is replaced by the actual content with a smooth fade transition.

   將“ 動畫”設置為“ 智能動畫”，以便用平滑的淡入淡出過渡將骨架屏幕替換為實際內容。

The same After Delay transition can be applied to a variety of situations where a user might encounter a loading or processing state.

相同的“ 延遲后”過渡可以應用于用戶可能遇到加載或處理狀態的多種情況。

A splash screen when you open an app, when a credit card purchase is being processed or when a user is uploading files or after submitting a form.

當您打開應用程序，正在處理信用卡購買時，或者用戶正在上傳文件時或提交表單后，將顯示初始屏幕。

＃4頁面轉換 (#4 Page Transitions)

Over the years, apps have become a lot more complex in flow and hierarchy than just loading a new page on every link. We regularly ‘layer’ content on top of other content, especially in single-page apps (SPA’s). That means we don’t do full page loads but instead move content in and out in different directions and want to model that in our designs.

多年來，應用程序的流程和層次結構變得比僅在每個鏈接上加載新頁面更加復雜。 我們會定期在其他內容之上“分層”內容，尤其是在單頁面應用程序(SPA)中。 這意味著我們不進行整頁加載，而是將內容沿不同方向移入和移出，并希望在設計中對其進行建模。

We’ll make an animation where the content moves in from the bottom which we can then swipe away like it’s an overlay.

我們將制作一個動畫，其中內容從底部移入，然后我們可以像疊加層一樣將其滑走。

How To Create This Animation

如何制作動畫

We’ll create an animal directory with a page for every animal. Important for making this transition is that the layer name of the page content matches so Figma can match these using Smart Animate.

我們將創建一個動物目錄，其中包含每個動物的頁面。 進行此過渡的重要條件是頁面內容的層名稱匹配，因此Figma可以使用Smart Animate匹配它們。

1. Select the one of the animal blocks, in this case the elephant, and set the trigger to On Tap and Navigate To the corresponding animal page.

   選擇其中一個動物塊(在本例中為大象)，然后將觸發器設置為“點擊”并導航到相應的動物頁面。

2. Set the transition type to Smart Animate. You can tweak the easing settings and speed but this is optional.

   將過渡類型設置為Smart Animate 。 您可以調整緩動設置和速度，但這是可選的。

If you made sure the layers are correctly matched than it will now slide in the new page from the bottom.

如果確定圖層正確匹配，則現在它將從底部滑入新頁面。

Swipe to close

滑動即可關閉

To then be able to swipe away the page we’ll need to add a trigger and transition for that to happen on the animal page.

為了能夠滑走頁面，我們需要添加一個觸發器并進行轉換，以使其在動物頁面上發生。

1. Select the page content, add the On Drag trigger and set it to Navigate To our animal directory page.

   選擇頁面內容，添加“ 拖動時”觸發器并將其設置為“ 導航到我們的動物目錄”頁面。

2. In the Animation tab, select the Slide Out transition and select the Right Arrow so we can swipe in the right direction to close it.

   在“ 動畫”選項卡中，選擇“ 滑出”過渡，然后選擇“ 向右箭頭”，以便我們可以向右滑動以將其關閉。

3. Leave the Smart Animate matching layers option unchecked as we want to swipe the entire page away instead of having a smooth transition between the two pages.

   取消選中“ 智能動畫匹配層”選項，因為我們要滑整個頁面，而不要在兩個頁面之間進行平滑過渡。

＃5拉動刷新 (#5 Pull to Refresh)

This one speaks for itself. A very common UI pattern when refreshing a page or fetching new content, especially in feeds for news, mail and social media.

這是不言而喻的。 刷新頁面或獲取新內容時的一種非常常見的UI模式，尤其是在新聞，郵件和社交媒體的提要中。

How To Create This Animation

如何制作動畫

At first it seems like a very complex animation to create in Figma but once you break it down in smaller steps, it’s much easier to understand what’s going on.

最初，在Figma中創建一個似乎非常復雜的動畫，但是一旦將其分解成較小的步驟，就可以更容易地了解發生了什么。

We’ll start out with a list of podcast episodes. To enable this animation we’ll need to turn this entire group of layers into a frame. By turning it into a frame instead of a group of layers we can make the content of this frame bigger than the dimensions of the frame to allow vertical scrolling.

我們將從播客片段列表開始。 要啟用此動畫，我們需要將整個圖層組變成一個框架。 通過將其變成框架而不是一組圖層，我們可以使該框架的內容大于框架的尺寸，以允許垂直滾動。

The “Checking for Updates” content is already in the first frame, although it’s not yet visible as it’s hidden behind the page title.

“檢查更新”內容已經在第一幀中，盡管它不可??見，因為它隱藏在頁面標題后面。

Frame 1 to frame 2

框架1至框架2

We’ll set the first frame in our sequence to On Drag and Navigate To the second page in our sequence ‘Pull to refresh 01’. In this second frame we’ll make a duplicate of the first frame but move the content down so the “Checking for Updates” group is now in view.

我們將序列中的第一幀設置為“拖動時”，然后導航到序列“拉動刷新01”中的第二頁。 在第二幀中，我們將復制第一幀，但是將內容向下移動，以便現在可以看到“檢查更新”組。

Frame 2 to frame 3

框架2到框架3

In the second frame of our sequence we’ll simulate a loading animation. This isn’t strictly necessary but makes the sequence of actions feel more like a finished product instead of static UI screens that are stitched together.

在序列的第二幀中，我們將模擬加載動畫。 這不是嚴格必要的，但是可以使操作序列看起來更像是成品，而不是縫合在一起的靜態UI屏幕。

We’ll duplicate the second frame for the third frame but in the 3rd frame we’ll set the rotation to the spinner to -165°

我們將第二幀復制為第三幀，但在第三幀中，將旋轉器的旋轉角度設置為-165°

For the transition between these two frames we’ll use After Delay and set it to navigate to the third frame in our sequence after 500ms. We’ll set the transition to Smart Animate and use Ease In as the type of transition with a delay of 500ms. The delay for loading the next frame and the transition are the same.

對于這兩個幀之間的過渡，我們將使用After Delay ，并將其設置為在500ms之后導航到序列中的第三幀。 我們將過渡設置為Smart Animate，并使用“ 緩入”作為過渡類型，延遲為500ms 。 加載下一幀和轉換的延遲是相同的。

Frame 3 to frame 4

框架3至框架4

In this frame we’ll create space for new content that will be loaded. This step makes the animation a lot smoother instead of the content just appearing out of nowhere. Don’t remove the “Checking for Updates” group completely but move it behind the page title like it was in the first frame and leave the exact amount of vertical space that is required for the new content.

在此框架中，我們將為將要加載的新內容創建空間。 這一步使動畫更加平滑，而不是內容無處不在。 不要完全刪除“檢查更新”組，而是將其移動到頁面標題后，就像在第一幀中一樣，并保留新內容所需的確切垂直空間。

To make it look like the data was fetched and is being loaded in we’ll set up another After Delay and Navigate To the next frame after a delay of 1000ms.

為了使數據看起來像已被提取并正在加載中，我們將設置另一個After Delay并在延遲1000ms之后導航到下一個幀。

For the Animation we’ll use the Dissolve transition so the “Checking for Updates” status disappears. We’ll use a shorter duration of 100ms for this animation so it disappears fast.

對于動畫，我們將使用“ 溶解”過渡，因此“檢查更新” 狀態消失。 我們將為該動畫使用100ms的較短持續時間，以使其快速消失。

Frame 4 to Frame 5

框架4至框架5

All that’s left is to show the newly loaded content in the space we created in our previous frame. Add the new content in the last frame and set up another After Delay with a very short 25ms delay before navigating to the last frame.

剩下的就是在上一幀中創建的空間中顯示新加載的內容。 在最后一幀中添加新內容，并在導航到最后一幀之前以非常短的25ms延遲設置另一個After Delay 。

Since the users swipes down the refresh it looks more natural if the content slides in from the top so we’ll set the Animation to Slide In and choose the Down Arrow so the new content slides down into view. We can add a 200ms duration for this transition.

由于用戶向下滑動刷新，如果內容從頂部滑入，則看起來更自然，因此我們將“ 動畫”設置為“ 滑入”，然后選擇“ 向下箭頭”，使新內容滑入視圖。 我們可以為此過渡添加200ms的持續時間。

＃6滑動動作 (#6 Swipe Actions)

Another common UI pattern we see in mobile apps is swiping items left or right to reveal more actions. For example in email apps this pattern is often applied to mark mails as read/unread, reply or delete them.

我們在移動應用中看到的另一種常見的UI模式是向左或向右滑動項目以顯示更多操作。 例如，在電子郵件應用程序中，此模式通常用于將郵件標記為已讀/未讀，回復或刪除。

How To Create This Animation

如何制作動畫

To prototype this in Figma we’ll create two designs. One in the ‘normal’ state and one where the actions are visible. For the latter, it’s very important that the action does not overlap but ‘pushes’ the old content because, just like with the pull to refresh animation, we need to have the content exceed the frame size to enable scrolling.

為了在Figma中進行原型制作，我們將創建兩個設計。 一種處于“正常”狀態，另一種處于可見狀態。 對于后者，動作不重疊而是“推”舊內容非常重要，因為就像拉動刷新動畫一樣，我們需要使內容超過幀大小才能啟用滾動。

1. Select the element you want to enable the action on and select the On Drag trigger, then set it to Navigate To the second view where the actions are visible.

   選擇要啟用操作的元素，然后選擇“ 拖動時”觸發器，然后將其設置為“ 導航到可見操作的第二個視圖”。

2. For the Animation, select Smart Animate and Figma will automatically know how to transition between these two states.

   對于“ 動畫” ，選擇“ 智能動畫”，并且Figma將自動知道如何在這兩種狀態之間轉換。

Once the actions are visible we need to give the user two options, to cancel the action or to perform the action. We’ll create a trigger for each one, clicking on the podcast episode cancels the action. Clicking on the delete button will navigate to the next frame in the sequence.

可見操作后，我們需要為用戶提供兩個選項，以取消操作或執行操作。 我們將為每個觸發器創建一個觸發器，單擊播客情節可取消操作。 單擊刪除按鈕將導航到序列中的下一幀。

For cancelling the action: Select the entire item excluding the delete button. Set the trigger to On Tap and simply select Back in the actions dropdown to go back to the previous frame.

要取消操作：選擇除刪除按鈕以外的整個項目。 將觸發器設置為“點擊”，然后只需在操作下拉菜單中選擇“ 后退”即可返回上一幀。

To delete the element: Select the delete button, select the On Tap trigger, set it to Navigate To and select the next frame in the sequence. The animation type is Slide In and select the Left Arrow, the same direction as our swipe to reveal the delete button. Note that you can simply navigate to the next frame where the item is gone but to make this transition look better I’ll first make the entire row red to show which item was deleted.

刪除元素：選擇刪除按鈕，選擇“ 點擊”觸發器，將其設置為“ 導航至”，然后選擇序列中的下一幀。 動畫類型為“ 滑入”，然后選擇“ 向左箭頭” ，與我們滑動以顯示刪除按鈕的方向相同。 請注意，您可以簡單地導航到項目消失的下一幀，但是為了使過渡效果更好，我首先將整個行設為紅色，以顯示已刪除的項目。

For the last frame we simply add the After Delay trigger again and set it to Navigate To the last frame where the item is deleted after a delay of 100ms.

對于最后一幀，我們只需再次添加After Delay觸發器，并將其設置為Navigate To Navigate To the last frame，在此延遲100ms后將刪除該項目。

We can use Smart Animate again to transition between these two frames.

我們可以再次使用Smart Animate在這兩個幀之間進行過渡。

Now the sequence is complete and you can preview the animation in prototype mode!

現在序列已完成，您可以在原型模式下預覽動畫！

＃7模態 (#7 Modal)

Modals are widely used in apps and websites for everything from offering discounts to paywalls to confirmation dialogs. Learning how to add these to your prototypes will come in handy in a lot of design projects.

從提供折扣到付費專區再到確認對話框，模態在應用程序和網站中廣泛使用。 在許多設計項目中，學習如何將這些添加到原型中非常方便。

How To Create This Animation

如何制作動畫

Unlike what I see most designers doing when they create modals, you don’t have to duplicate the complete design multiple times to add a modal to each one.

與我看到的大多數設計師在創建模態時所做的工作不同，您不必多次重復完整的設計即可向每個模型添加模態。

You can create a separate frame that contains the modal design and add it using Figma’s prototyping tools. This saves a lot of clutter in your design files, especially when you are working with modals that have multiple steps.

您可以創建一個包含模態設計的單獨框架，并使用Figma的原型工具將其添加。 這樣可以在設計文件中節省很多混亂，尤其是在使用具有多個步驟的模態時。

1. Select the button or link that you want to use to trigger the modal opening. Select the On Tap trigger and use Open Overlay to link it to the frame that contains your modal.

   選擇要用于觸發模式打開的按鈕或鏈接。 選擇“ 點擊”觸發器，然后使用“ 打開疊加層”將其鏈接到包含模態的框架。

2. In the Overlay section, you can choose the settings for your modal. In this case we’ll go with the Centered position and check the Close when clicking outside option.

   在“ 覆蓋”部分，您可以選擇模態的設置。 在這種情況下，我們將選擇居中位置并選中“單擊外部時關閉”選項。

3. Next, make sure the Add background behind overlay option is checked. We’ll set the background to black (#000) and use 40% opacity. This helps the modal stand out and show the user the rest of the page is not accessible while the modal is opened.

   接下來，確保選中了 在疊加后添加背景選項。 我們將背景設置為黑色(＃000)，并使用40％的不透明度。 這有助于模式突出，并向用戶顯示打開模式時無法訪問頁面的其余部分。

4. For the Animation we’ll select Move In in the downward direction by selecting the Down Arrow. This will move the modal in from the top.

   對于動畫 ，我們將通過選擇向下箭頭選擇移動在向下的方向。 這將從頂部移入模態。

When the user clicks to confirm they will get a confirmation dialog so we need to add an extra step to our modal. Select the Confirm button and use On Tap to set that as the trigger. Next, select Swap With and select the next step in our modal. Set this animation to Instant.

當用戶單擊以確認時，他們將獲得一個確認對話框，因此我們需要在模態中添加一個額外的步驟。 選擇“確認”按鈕，然后使用“點擊時”將其設置為觸發器。 接下來，選擇“ 交換為 ”，然后選擇模態中的下一步。 將此動畫設置為Instant 。

All that’s left to do for the user is to close the modal. Select the ‘Close’ text link and use the On Tap trigger for the Close Overlay action. You can also apply this option to the ‘Cancel’ button in the previous step of our modal.

剩下要做的就是關閉模式。 選擇“關閉”文本鏈接，并將“點擊觸發”用于“ 關閉疊加”操作。 您也可以在模態的上一步中將此選項應用于“取消”按鈕。

Now that you know how you can create these animations in Figma, I hope you’ll spend more time thinking about them in your next project and make it easier for developers to translate your designs into working products.

現在，您知道如何在Figma中創建這些動畫，我希望您在下一個項目中花更多的時間考慮它們，并使開發人員更輕松地將您的設計轉換為可用的產品。

Although we can create a lot of the most common animations in Figma using the techniques described above, some more complex animations can’t yet be created or require many frames to get right which will clutter up your design files.

盡管我們可以使用上述技術在Figma中創建許多最常見的動畫，但仍無法創建一些更復雜的動畫，或者需要很多幀才能正確處理，這會使您的設計文件混亂。

The built-in animation features of Figma cover most of the basics but fall short when you try to create more complex animations and transitions. There are some more advanced alternatives like Figmotion (Figma plugin) or Principle (external software) for these type of animations but for a lot of designers, these basics should be enough for their projects.

Figma的內置動畫功能涵蓋了大多數基礎知識，但是當您嘗試創建更復雜的動畫和過渡效果時，這些功能就不夠了。 對于這些類型的動畫，有一些更高級的替代方法，例如Figmotion (Figma插件)或Principle (外部軟件)，但是對于許多設計師而言，這些基礎知識對于他們的項目應該足夠了。

如果您需要下一個項目的幫助，請給我發送電子郵件： hello@jurn.io (If you’d like help with your next project, shoot me an email: hello@jurn.io)