date
password
icon
hashtag
标题
勘误
type
status
slug
summary
tags
category
URL
AI summary
AI custom autofill
贴文
类型
Status
标签
🪄
Text
Multi-select
If you ask me about my favorite design tool, I’d probably say “Figma”! From website design to creating marketing banners, Figma is my go-to (although, Canva does sneak in when it comes to social media posts!). Today, we’re diving into something interesting: using Figma to create short demo videos, specifically for demonstrating product functionalities.
While Figma’s prototyping function is widely known, its application in creating a demo video isn’t that straightforward. But, worry not. I’m here to guide you on how to pull this off. Our demo project for today is an AI document querying tool (Imagine a platform where you instantly retrieve information from various documents with a simple query!).
Setting Up Figma
Let’s dive right in!
Main Frame and Supporting Frames
Start by selecting your frame size. For recording purposes, I’d recommend going with the 16:9 ratio (I know I didn’t do it here 😅). Our focus today is on demonstrating functionality, so the frame design should be simple yet appealing. I chose a gradient background with an input field, where users can enter their query.
For our demo, we’ll also have two supporting frames. These will appear on the main frame later when the button is clicked.
- Loading Frame: For now, keep your loading frame white. We’ll add a loading spinner and loading text in the next steps.
- Result Frame: This frame should display the answer to the query and resources where the information can be found.
Components, Variants, and Interactions
Let’s continue by setting up the components and interactions between them.
Query
For the query we would like to have a typewriter effect, to make it look like someone is actually typing in the query. We can achieve this by first creating various text fields showing different states, starting with the placeholder and ending with the full query. Enter the whole query in each of the fields (except the placeholder one) but then use a mask group to only reveal parts of it, so that each field displays one more word than the previous one. Make each field a component, then select them all and combine as variants.
To create a typewriter effect we now need to link the text fields by setting up interactions in the ‘Prototype’ section. For the first one I chose ‘Click’ as starting point with ‘Change to’ next field and an ‘Ease out’ at 300ms. For the rest I selected ‘After delay’ and set it to 50ms.
Loading Spinner
For the loading spinner follow a similar process as with the query. Create a spinner for each state, meaning every time a different dot is coloured. Then, head over to the ‘Prototype’ section to link them. Again, select ‘After delay’ as the trigger point and set it to 100ms.
Loading Text
An accompanying text below the spinner adds a dynamic feel, especially if part of the text is changing. This gives the user the impression that something is happening in the background. Same as for the previous two components, create different versions of the text, then set them up in the ‘Prototype’ section. Start each with ‘After delay’ set to 750ms.
Putting it all Together
Now it’s time to merge everything. First place the query in the text field frame on the main frame. Then add the loading spinner and loading text into the empty loading frame. Create an interaction linking the loading frame to the main frame using ‘Open overlay’ such that it appears on the main frame when the button is clicked (I used keystroke ‘Enter’ as trigger to avoid mouse click). Next, connect the results frame to the loading frame again with ‘Open overlay’ and a keystroke as trigger (I used ‘tab’), allowing you to end the loading whenever you want and show the results.
Recording the Demo
Your setup in Figma is complete! Before you move on to recording, ensure the flow works correctly within Figma. For screen recording I used OBS, but you’re free to use any software you’re comfortable with. Enter ‘Present’ mode in Figma and ensure your frame is visible on your screen recorder. Start recording and use the configured keystrokes to trigger the interactions and keep the flow going. You probably have to do it a few times until you are happy with the result. Once finished you can go ahead to edit and cut the video if necessary.
Check out how my finished video looks like here!
Wrapping up
Creating short demo videos in Figma might seem a bit complicated at first. But, if you’re familiar with Figma and use it regularly, why not also utilize it for your demo videos? Once you master the initial setup, you’ll find subsequent projects a breeze.
So, what are you waiting for? Get started with Figma today and bring your product demos to life!
- 作者:Inevitable AI
- 链接:https://www.Inevitableai.ltd/article/sharee
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。