figma button

figma button

Today I want to share with you an easy and quick way to create a beautiful video presentation of your interface. I know that the same result can be obtained in popular video editors, where you manually adjust the animation of each layer, but for me it is a long and complicated process.

今天，我想与您分享一种简便快捷的方法来创建界面的精美视频演示。 我知道，在流行的视频编辑器中，您可以手动调整每个图层的动画，也可以获得相同的结果，但是对我来说，这是一个漫长而复杂的过程。

If you also do not want to waste time on them, then I will show you how to do this without leaving Figma ;)

如果您也不想在它们上面浪费时间，那么我将向您展示如何在不离开Figma的情况下进行此操作；)

步骤1 —准备视频关键帧 (Step 1 — Prepare video key frames)

To get started, you need to create a series of frames that will make up your video.

首先，您需要创建一系列构成视频的框架。

Attention: these are not different separate interface states as in your layout! You must prepare exactly those screen conditions that will be key to your video.

注意：这些不是与布局中不同的单独界面状态！ 您必须完全准备对视频至关重要的屏幕条件。

If you know how to assemble prototypes in Figma, then you already know that in each frame there should be elements from neighboring frames that are involved in the animation. It is very important to follow the names of the layers, because for quick prototyping we will use smart animate.

如果您知道如何在Figma中组装原型，那么您已经知道在每个帧中应该有来自动画中涉及的相邻帧中的元素。 跟随图层的名称非常重要，因为为了快速制作原型，我们将使用智能动画。

If your smart animate does not work correctly, you probably used the same names of different layers in one frame, try not to allow this.

如果您的智能动画无法正常工作，则您可能在一帧中使用了不同图层的相同名称，请尝试不允许这样做。

第2步-创建原型链接 (Step 2 — Creating Prototype Links)

When you build a complete clickable prototype for your MVP, you build connections between the elements. If you are making a video presentation, it is best to use the following simplified method.

为MVP构建完整的可点击原型时，将在元素之间建立连接。 如果要进行视频演示，最好使用以下简化方法。

Create transitions between frames, and not between elements

在框架之间而不是元素之间创建过渡

This will allow you to navigate with the left and right keys without clicking on the prototype with the mouse and leaving no traces.

这将允许您使用左右键进行导航，而无需使用鼠标单击原型并且不留下任何痕迹。

步骤3 —录制视频 (Step 3 — record video)

If you are using a Mac, record videos using QuickTime for best quality. It is easier and faster than installing additional software.If you use Windows, I recommend using Bandicam. This program has many useful settings and has never let me down.

如果您使用的是Mac，请使用QuickTime录制视频以获得最佳质量。 它比安装其他软件更容易，更快。如果使用Windows，建议使用Bandicam 。 这个程序有许多有用的设置，从来没有让我失望。

Now you can record your video:

现在，您可以录制视频了：

start recording the entire screen if you plan to process the video later

如果您打算稍后处理视频，则开始记录整个屏幕 start recording a fragment of the screen to get an instant video

开始记录屏幕片段以获取即时视频 go to Figma and go through all the steps of your prototype using the arrow keys on the keyboard

进入Figma并使用键盘上的箭头键完成原型的所有步骤 stop recording video and trim the timing to get only your finished video

停止录制视频并调整时间以仅获取完成的视频

So, you have a great record of your prototype ready for upload to the cloud or for further processing.

因此，您拥有良好的原型记录，可随时将其上传到云或进行进一步处理。

演示地址

Elision App video preview Elision App视频预览

I showed this with a simple example, but remember that only your imagination limits you. You can create videos of an arbitrarily complex interface in the same way!

我通过一个简单的示例展示了这一点，但请记住，只有您的想象力限制了您。 您可以用相同的方式创建任意复杂界面的视频！

翻译自: https://uxdesign.cc/figma-to-video-prototyping-easy-way-in-3-steps-d7ac3770d253

figma button

相关资源：微信小程序源码-合集6.rar