figma下載

自定義過渡和微交互 (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中已經(jīng)有很多有用的內(nèi)置過渡效果，但是在這里我想談?wù)勛远x的微交互，復(fù)雜的過渡，并向您展示如何將它們添加到Figma原型中。 讓我們看一下我準(zhǔn)備的幾個(gè)示例。

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.

為了進(jìn)行這種交互，您需要Figma和您選擇的任何動(dòng)畫工具。 我使用After Effects只是因?yàn)槲沂煜に?

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.

進(jìn)行動(dòng)畫過渡后，將其添加到要設(shè)置動(dòng)畫的屏幕之間的項(xiàng)目中并進(jìn)行鏈接。 對(duì)于動(dòng)畫層，請(qǐng)使用after delay屬性-延遲應(yīng)等于您擁有的動(dòng)畫過渡的長(zhǎng)度。 最后應(yīng)該看起來(lái)像這樣。

Illustrations: https://www.openpeeps.com/插圖： https : //www.openpeeps.com/

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:

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

Figmotion塑像

改進(jìn)原型模式下流程之間的導(dǎo)航 (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:

當(dāng)我處理用戶故事時(shí)，即使它是世界上最簡(jiǎn)單的用戶故事，我也至少需要向團(tuán)隊(duì)展示一些極端的案例或驗(yàn)證要點(diǎn)，以便我們進(jìn)行討論。 目前，在Figma中非常令人沮喪。 我嘗試了不同的方法：

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).

我試圖將流保存在一個(gè)文件中，并通過在幀之間移動(dòng)藍(lán)色的小播放按鈕來(lái)更改起始幀。 但是，當(dāng)您向團(tuán)隊(duì)展示東西以及加載時(shí)間時(shí)，找到并移動(dòng)這個(gè)小方塊是很不方便的。 重新加載原型時(shí)，速度非常慢(尤其是在處理大文件時(shí))。

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).

然后，我嘗試將設(shè)計(jì)文件分成幾個(gè)較小的文件，并為每個(gè)文件打開一個(gè)原型選項(xiàng)卡。 真痛苦 如果您正在處理的用戶故事又大又復(fù)雜(這意味著很多極端情況和不同的情況)，Figma無(wú)法將所有原型選項(xiàng)卡保持打開狀態(tài)并在向團(tuán)隊(duì)展示時(shí)重新加載它們。 最重要的是，很難在許多打開的選項(xiàng)卡之間導(dǎo)航(每個(gè)流程1個(gè)選項(xiàng)卡* 2，因?yàn)榇蜷_了原型窗口)。

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.

這是我找到的最佳解決方案。 我設(shè)計(jì)了一個(gè)導(dǎo)航屏幕，并將其作為所有原型的第一個(gè)屏幕。

在一個(gè)文件中分組流 (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.

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

不可觸摸 (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.

有時(shí)候，我有一些與設(shè)計(jì)文件的實(shí)現(xiàn)相關(guān)的細(xì)節(jié)，我需要將這些細(xì)節(jié)傳遞給工程師，它們通常在模型旁邊工作得更好。 這就是為什么我制作了便箋組件，并用它來(lái)指定與設(shè)計(jì)實(shí)現(xiàn)相關(guān)的詳細(xì)信息的原因。

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組件庫(kù)中擁有上面提到的所有三個(gè)組件。 它使我可以從正在處理的任何文件中快速訪問它們。

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 。 感謝您的閱讀，希望對(duì)您有所幫助。 隨時(shí)通過運(yùn)球或推特與我聯(lián)系 。

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

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

翻譯自: https://uxdesign.cc/tips-and-tricks-for-prototyping-in-figma-a3e5de19d1

figma下載

總結(jié)

以上是生活随笔為你收集整理的figma下载_在Figma中进行原型制作的技巧和窍门的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。