Figma Motion Design Assignment

Hi, all!
Here is the final tutorial I made for the Motion Designer position assignment.

Here is my process documentation:

00 Assignment details

Please create a short (target 30 seconds) video that matches the Figma brand. Use your time strategically to demonstrate strong motion graphics skills, but use content like screen recording when appropriate and to speed up your workflow. The video should teach:

• How to install a Figma plugin of your choice
• What the plugin does (or doesn’t do)
• How to use the plugin
• Why the plugin is valuable to the viewer

00 How I finished the assignment generally

1. Understand my role, the content and my goal
2. Understand the visual language — brand standard, Youtube channel aesthetic
3. Pre-animation production
4. Animation production
5. Evaluation & Reflection

01 Get started — Plugin Selection

After I received the assignment with a list of 8 plugins I haven’t used before, I debated between plugins I used before and the new plugins.

Used plugin or New plugin?
New plugin!
I chose new plugin because I want to put myself into the user’s perspective and understand the learning process more.

Which new plugin?

Unsplash or Content Reel?
I researched around these eight plugins and chose between ‘Unsplash’ and ‘Content reel’. One has the most downloads and one has the most comments.

Content Reel!
I selected Content Reel in the end, because:

1. Unsplash as a image import tool, its feature is part of Content Reel.
   Content Reel provides the most needed images in UIUX design and web design: avatars, food, places etc.
2. Unsplash has a super straight forward user interface that explains why it has most installs with less comments and only 2 tutorials on Youtube.
3. As a designer with UI/UX and Web design experience, Content Reel would absolutely boost my work efficiency and save my time for both text and image generator.

02 Understand the brand and Youtube channel

How to translate my design and animation language to Figma language?

Before jumping into tutorial production I wanted to understand the Figma Youtube channel and the Figma Brand.

This is my Figma workspace, I attached brand colors and illustrations to immerse myself in the brand atmosphere, this helps my design in the right direction.

03 Tutorial Timing Arrangement

How should I introduce the plugin? How long should each part be?

I solved these questions by analysing my learning experience.
Before I download the plugin, I’m an impatient user that I want to learn what the plugin does as soon as possible.

So I designed the tutorials to be 3 parts:

1. Intro + function (5s) — Use animation to excite users and explain the plugin function.
2. Install + Usage (20s) — Use screen recording to explain.
3. Value + Outro (5s) — Use animation to sum up it’s value and link to Figma brand.

So the tutorial experience would be fun-dry-fun.

My goal is to make it as close to the brand standard and visual language of current Figma Youtube channel as I can.

04 Scripting — What should I say?

I wrote script based on the guideline.
The most challenging part is that, when I first wrote them, I didn’t know how long they would take. Take the first line of introductions as an example, it actually took 10s for the voice over.
So I changed the line by writing it down and making the voiceover to test the time. I kept the modification history.

05 Storyboarding

Now the tutorial base is there, it’s time to wrap it with visual language.

How to translate my language into Figma’s?
The most challenging part is to make the first storyboard, I need to really understand the brand and I started by reading ‘Figma Brand Guideline’.
I learnt that shapes needs to be interacting and avoid wallpapering, color scheme shouldn’t be too warm or cold, don’t use all paste colors. Use ‘Inktrap’ typeface for bigtypes, and ‘Whyte’ for texts etc.

For the first frame, the first version I made is not perfect that though shapes are interacting but:
1. I don’t know where to look at, I first look at ‘with since’ it has the highest contrast.
2. The layout looks unstable.
Then I improved it to what I have for now, the first word ‘create’ has the highest contrast, and shapes are lying comfortably on the ground, cursors are moving collaboratively.

06 RoughCut

Get a general feeling of how things get along!

07 Production

The challenging part in animation production is how to maintain things to be calm, playful but not overwhelming.

08 Final Delivery

I added video cover, description and timestamps according to the channel analysis to have a general feeling of the tutorial.
I think it looks right to me and feels like one of Figma videos.

09 Reflection

I’m happy with the content decision process and the final video, but I’m not really satisfied with my voiceover. Compared to the Youtube channel videos, I think I can be better at:

1. Pace — I wanted to say all the lines in 30s, which makes the listening experience to be a bit rush and full.
2. Recording — I recorded line by line, which you can obviously tell.
3. Pronunciation — I still have some accent, I’ll definately improve that.
4. Microphone — I used my trashy beats default microphone, I will get a professional mic once I join the team.

Thank you so much for reading this. I’m really glad to receive the assignment. I definately look forward to moving forward with Figma.
Excited to talk again!

Feedback

1. Feels like a little too marketing focused, the priority is to teach users to learn skills.
2. Motion Design decision should be supported by educational reasons.And the portion of animation is not a problem.

How to understand ‘educational reasons’ is my biggest challenge in the feedback.
Then I realized tutorials are more like telling your friend how to use something, and using visuals to assist you to tell.

Iteration

I cut out the marketing-ish animation and made animation based more on the instructional steps.