自定義過渡和微交互 (Custom transitions and micro-interactions)

Yep, I know that there are a lot of useful built-in transition effects in Figma already, but here I want to talk about custom micro-interactions, complicated transitions and show you how to add them into your Figma prototypes. Let’s take a look at a couple of examples I’ve prepared.

是的，我知道在Figma中已經有很多有用的內置過渡效果，但是在這里我想談談自定義的微交互，復雜的過渡，并向您展示如何將它們添加到Figma原型中。 讓我們看一下我準備的幾個示例。

To make this kind of interaction you need Figma and any animation tool of your choice. I used After Effects just because I’m familiar with it.

為了進行這種交互，您需要Figma和您選擇的任何動畫工具。 我使用After Effects只是因為我熟悉它。

When you have your animated transition, add it to your project between the screens that you want to animate and link them. For the animated layers use the after delay property— the delay should be equal to the length of the animated transition you have. In the end it should look like this.

進行動畫過渡后，將其添加到要設置動畫的屏幕之間的項目中并進行鏈接。 對于動畫層，請使用after delay屬性-延遲應等于您擁有的動畫過渡的長度。 最后應該看起來像這樣。

If you’re not familiar with any animation tools or simply don’t have any animation software installed on your machine you can do a lot of stuff with Figmotion. Figmotion is a Figma plugin that helps you animate your designs in Figma without using any third-party software. Here’s an example of how it works:

如果您不熟悉任何動畫工具，或者根本沒有在計算機上安裝任何動畫軟件，則可以使用Figmotion做很多事情。 Figmotion是一個Figma插件，可以幫助您在Figma中對設計進行動畫處理，而無需使用任何第三方軟件。 這是它如何工作的示例：

改進原型模式下流程之間的導航 (Improve navigation between flows in prototyping mode)

When I work on a user story, even if it’s the most simple user story in the world, I have at least a few edge cases or validation points that I need to show to the team so we can discuss it. It’s quite frustrating in Figma at the moment. I’ve tried different approaches:

當我處理用戶故事時，即使它是世界上最簡單的用戶故事，我也至少需要向團隊展示一些極端的案例或驗證要點，以便我們進行討論。 目前，在Figma中非常令人沮喪。 我嘗試了不同的方法：

1. I tried to keep my flows in one file and change the starting frame by moving the little blue play button between frames. But it’s inconvenient to find and move this little square when you are showing something to the team plus the loading time. It’s so slow when you reload your prototype (especially if you work with a big file).
   我試圖將流保存在一個文件中，并通過在幀之間移動藍色的小播放按鈕來更改起始幀。 但是，當您向團隊展示東西以及加載時間時，找到并移動這個小方塊是很不方便的。 重新加載原型時，速度非常慢(尤其是在處理大文件時)。
2. Then I tried to split my design files into a few smaller ones and keep open a prototyping tab for each of them. That’s a pain. If the user story you’re working on is big and complicated (it implies a lot of edge cases and different scenarios) Figma can’t keep all prototyping tabs open and reloads them when you present them to the team. On top of that, it’s very hard to navigate between a lot of opened tabs (1 tab per flow * 2 because of the opened prototype window).
   然后，我嘗試將設計文件分成幾個較小的文件，并為每個文件打開一個原型選項卡。 真痛苦 如果您正在處理的用戶故事又大又復雜(這意味著很多極端情況和不同的情況)，Figma無法將所有原型選項卡保持打開狀態并在向團隊展示時重新加載它們。 最重要的是，很難在許多打開的選項卡之間導航(每個流程1個選項卡* 2，因為打開了原型窗口)。

Here is the best solution that I’ve found. I’ve designed a navigation screen that I put as a first screen in all my prototypes.

這是我找到的最佳解決方案。 我設計了一個導航屏幕，并將其作為所有原型的第一個屏幕。

在一個文件中分組流 (Grouping flows within one file)

As I mentioned above I always have at least a few flows related to a user story. That’s why I need a way to organize them within one file. To do it I designed a simple element that helps a lot.

如上所述，我總是至少有一些與用戶故事相關的流程。 這就是為什么我需要一種將它們組織在一個文件中的原因。 為此，我設計了一個簡單的元素，對您有很大幫助。

不可觸摸 (Hand-off)

Sometime I have details related to the implementation of my design files that I need to pass on to the engineers and they usually work better next to the mockups. That’s why I made a post-it note component and I use it to specify details related to the implementation of my design.

有時候，我有一些與設計文件的實現相關的細節，我需要將這些細節傳遞給工程師，它們通常在模型旁邊工作得更好。 這就是為什么我制作了便箋組件，并用它來指定與設計實現相關的詳細信息的原因。

I have all three components that I mentioned above in my UI components library in Figma. It allows me to access them quickly from any file I’m working on.

我在Figma的UI組件庫中擁有上面提到的所有三個組件。 它使我可以從正在處理的任何文件中快速訪問它們。

Here is a link to a Figma file with the examples that I’ve mentioned: Figma link. Thank you for reading and I hope you found this useful. Feel free to reach out to me on dribbble or twitter.

這是帶有我提到的示例的Figma文件的鏈接 ： Figma link 。 感謝您的閱讀，希望對您有所幫助。 隨時通過運球或推特與我聯系 。

Originally published at https://chainstack.com on May 5, 2020.

最初于 2020年5月5日 發布在 https://chainstack.com 上。