Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

Figma UI UX Design Essentials

Class Project 05 - My first animation

This lesson is exclusive to members

Course contents
SECTION: 1
Getting Started 30:36
SECTION: 2
Wireframing - Low Fidelity 11:03
SECTION: 3
Type, Color & Icon Introduction 1:12:34
SECTION: 4
Pages 8:32
SECTION: 5
Prototyping - Level 1 30:08
SECTION: 6
Animation Level 1 10:46
SECTION: 7
Commenting 14:09
SECTION: 8
Moodboard - High Fidelity 13:40
SECTION: 9
Columns 13:54
SECTION: 10
Tips & Tricks 7:21
SECTION: 11
Colors 34:48
SECTION: 12
Text & Fonts Advanced 47:48
SECTION: 13
Drawing 35:41
SECTION: 14
Working with Illustrator 4:16
SECTION: 15
Images 17:55
SECTION: 16
Working with Photoshop 11:58
SECTION: 17
Autolayout & Constraints 52:08
SECTION: 18
Effects 15:30
SECTION: 19
Saving & History 5:42
SECTION: 20
Components & Instances 36:15
SECTION: 21
Variants 23:04
SECTION: 22
Making a form 34:05
SECTION: 23
Prototyping - Level 2 43:01
SECTION: 24
Teams & Projects 5:19
SECTION: 25
Libraries 11:03
SECTION: 26
Animation & Micro Interactions 1:05:40
SECTION: 27
Thumbnail update 4:10
SECTION: 28
Exporting 34:21
SECTION: 29
What next 15:53

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Student class projects

0 0
Avatar

tarek nassar

@tarekNassar1
0 0
Avatar

Renata Bryczek

@renataBryczek
0 0
Avatar

Adewale Olanrewaju

@adewaleOlanrewaju

small animation screenshot
0 0
Avatar

Michaela Grznárová

@michaela
0 0
Avatar

ralph pierik

@ralphpierik
0 0
Avatar

L Lucien

@lLucien
0 0
Avatar

Joy Zhu

@joyZhu
0 0
Avatar

gerlie traya

@gerlietraya

animation project
0 0
Avatar

melissa van passel

@melissavanPassel
0 0
Avatar

Willem van Biljon

@willemvanBiljon

For my first animation, I opted for the arrow from the lesson but wanted to do something more with the social media prompt. I did not want the prompt to be there when the user navigated to the page, but instead, have it fade in after the "congratulations" message.
0 0
Avatar

Shir Mika

@ShirMika
0 0
Avatar

MAHIKA AHASAN ARSHI

@mAHIKAAHASANARSHI
0 0
Avatar

Stéphanie pfaff

@stéphaniepfaff
0 0
Avatar

Kai Xuan Boon

@AliceBoon

First animation
0 0
Avatar

Alican Demir

@alicanDemir

Project 5
0 0
Avatar

Andy G

@andG
0 0
Avatar

Yarin Nissim

@yarinNissim
0 0
Avatar

Sara Ovuka

@sara777
0 0
Avatar

Kathryn Steinhardt

@kathrynSteinhardt
0 0
Avatar

Lesya Danylenko

@lesyaDanylenko

Wow! I was just so obsessed with this arrow animation :) Oh, I loved it so much! Thank You Dear Dan ! Your lessons are so well prepared, extremely organised, done with such care about Your Students! Thank You so so so much ! ) You explain so thoughtfully! Thank You! )
0 0
Avatar

Conna Vue

@connavue
0 0
Avatar

mahaboobur rahman

@mahabooburrahman
0 0
Avatar

Mariam Vardanyan

@mariamVardanyan
0 0
Avatar

Paweł Nikody

@pawełNikody
0 0
Avatar

Kim East

@kimEast
0 0
Avatar

Sulochana Molleti

@sulochanaMolleti

Class Project: 05-My First animation
0 0
Avatar

Emily Huston

@emilyHuston

I tried to add a blur to solid and a transparency to this animation but it's not very visible. Also added a drop shadow to do something a tiny bit different from the class video.
0 0
Avatar

Massiullah Abdul Rahim Zai

@massiullahAbdulRahimZai

Project 05
0 0
Avatar

Anesuishe Tembo

@anesuisheTembo
0 0
Avatar

Salvatore Azzarelli

@salvatoreAzzarelli1

Course info

114 lessons / 12 hours 29 quiz questions 22 projects Certificate of achievement

Overview

Hi there - my name is Dan Scott & welcome to Figma Essentials.

Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.

You can try Figma for free by clicking here.

We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer. 

This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step. 

First we’ll describe the brief & how to work with a UX persona.  

Then you’ll learn how to create simple wireframes.  

From there we’ll look at how to implement colours & images properly in your designs.

You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps. 

You’ll learn how to create your own icons, buttons & other UI components. 

You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how. 

We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!

We’ll build a simple Style Guide ready for client handoff. 

You’ll understand how to make both simple & advanced micro interactions, page transitions & animations 

Before the end of this course you will have made fully interactive prototypes 

You will take a project all the way through -  collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer. 

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio. 

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Download Exercise Files

Transcript

Okay, it's class project time, your first animation. So just get that arrow to move, and if you're kind of like new to animation, and you're like, "Man, this is going to be tough," just do the arrow that we did, get it to work on yours, change the arrow up a little bit, you know, get exciting, get a, like a line arrow or reversed arrow, do something a little bit different, but do that and then send me a screenshot, so just kind of like screenshot, these two frames or three frames, if you end up doing more, but yeah, if you're new to it, just do that, nice simple one, we'll get into more animation later on. 

If you are like a little bit keen, and savvy, and brave, I'm happy for you to go a little bit further. So in here it says, you might try something, keep it simple still, don't get things to bounce in and bounce off stuff, multiple keyframes like that is tricky in Figma, but maybe it comes in from the top, maybe using a ball, a square, a tick that comes in, something different, up to you. 

If you did want to do more than one kind of animation, you can have multiple frames, that all kind of have delays, and lead into each other, but again that is for the people who, I don't know, at this stage I come from an animation background-ish, so I'd be like tackling that, but if you're new, just do this simple arrow, and we'll do more later on. 

The other thing is, is that we're just taking screenshots, and uploading them as assignments. I'd love to see your animations, but in Figma, just so you know, there is no like built-in recording part, when you get to here. Be great if this button says, record my stuff, check, it might be there now, but there's not at the moment. 

So I would love to see what your animations are, if you do know how to like record your screen, like I do, I'd love to see either a video uploaded, to something like YouTube or Vimeo, that would be great, or an animated gif, but it can get a little bit tricky, if you haven't done it before, so screenshot is totally fine. 

All right, that is the class project, do your first little animation, be excited, even if it is just a boring old arrow sliding in. All right, into the next video.

Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024