Figma UI UX Design Essentials

Focused View

Daniel Walter Scott

11:32:56

348 View

1 - Getting Started

1 - Introduction to Figma Essentials training course.mp4

02:53

2 - Exercise-Files-Figma-Essentials.zip

2 - Getting started with Figma training.mp4

02:45

3 - What is Figma for & does it do the coding.mp4

03:46

4 - Whats the difference between UI and UX in Figma.mp4

05:22

5 - What we are making in this Figma course.mp4

09:18

6 - Class project 01 Create your own brief.mp4

04:01

2 - Wireframing Low Fidelity

7 - What is Lo Fi Wireframe vs High Fidelity in Figma.mp4

02:34

8 - Creating our design file & introducing frames in Figma.mp4

08:29

3 - Type Color & Icon Introduction

9 - The basics of type & fonts in Figma.mp4

10:51

10 - Rectangles Circles Buttons Rounded corners in Figma.mp4

06:50

11 - How to use color in Figma.mp4

05:46

12 - Strokes plus updating color defaults in Figma.mp4

09:28

13 - Object editing and how to escape in Figma.mp4

01:47

14 - Scale vs Selection Tool in Figma.mp4

02:39

15 - Frames vs Groups in Figma.mp4

09:24

16 - Class project 02 Wireframe.mp4

03:01

17 - Where to get Free icons for Figma.mp4

09:10

18 - Matching the stroke of our icons.mp4

05:16

19 - How to use Plugins in Figma for icons.mp4

04:31

20 - Class project 03 Icons.mp4

03:49

4 - Pages

21 - How to use Pages in Figma.mp4

08:32

5 - Prototyping Level 1

22 - How to prototype in Figma.mp4

09:43

23 - Prototype animation and easing in Figma.mp4

10:53

24 - Testing on your phone with Figma Mirror.mp4

05:40

25 - Class project 04 Testing on your phone.mp4

03:51

6 - Animation Level 1

26 - What is Smart Animation & delays in Figma.mp4

08:44

27 - Class project 05 My first animation.mp4

02:01

7 - Commenting

28 - Sharing & Commenting on Figma file with Stakeholders.mp4

07:10

29 - Share editing with other UX designers in Figma.mp4

06:58

8 - Moodboard High Fidelity

30 - How I get inspiration for UX projects.mp4

06:39

31 - How to create a mood board in Figma.mp4

05:33

32 - Class Project 06 Moodboard.mp4

01:26

9 - Columns

33 - How to work with Columns & Grid in Figma.mp4

13:54

10 - Tips & Tricks

34 - Tips Tricks Preferences and Weirdness in Figma.mp4

07:21

11 - Colors

35 - Color Inspiration & the eyedropper in Figma.mp4

06:34

36 - How to create a color palette in Figma.mp4

09:02

37 - How to make gradients in Figma.mp4

07:09

38 - How to create & use Color Styles in Figma.mp4

08:01

39 - Class Project 07 Colors & Columns.mp4

04:00

12 - Text & Fonts Advanced

40 - Font on Desktop vs Browser Figma.mp4

01:30

41 - What fonts can I use plus font pairing in Figma.mp4

06:01

42 - What common font sizes should I choose in web design.mp4

11:30

43 - How to make Character Styles in Figma.mp4

06:36

44 - Lorem ipsum & Placeholder text in Figma.mp4

04:28

45 - Useful things to know about text in Figma.mp4

09:35

46 - How fix missing fonts in Figma.mp4

02:42

47 - Class project 08 Text.mp4

05:19

13 - Drawing

48 - Drawing tips and tricks in Figma.mp4

09:38

49 - Squircle buttons with ios rounded courses in Figma.mp4

02:48

50 - Boolean Union Subtract Intersect Exclude Pathfinder in Figma.mp4

07:25

51 - What is the difference Union vs Flatten Figma.mp4

03:36

52 - Class Project 09 Making stuff.mp4

03:29

53 - Smart Selection & Tidy up in Figma.mp4

08:40

14 - Working with Illustrator

54 - Do I need to know Illustrator with Figma.mp4

04:15

15 - Images

55 - Tips & tricks for using images in Figma.mp4

06:11

56 - Masking Cropping images in Figma.mp4

09:12

57 - Free image & plugin for Figma.mp4

02:31

58 - Working with Photoshop.mp4

10:40

59 - Class Project 10 Images.mp4

01:17

60 - Autolayout & Constraints.mp4

10:27

61 - Class project 11 Buttons.mp4

01:15

62 - Auto Layout for spacing.mp4

03:23

63 - How to use constraints in figma.mp4

08:22

64 - Combining Nested frames Auto Layout & Constraints in Figma.mp4

11:54

65 - Adding Text Box Autoheight to Autolayout in Figma.mp4

08:27

66 - Class Project 12 Responsive Design.mp4

02:19

67 - Nice drop shadow & Inner drop shadow effects in Figma.mp4

05:56

16 - Effects

68 - Blur Layer & Background Blur & Image Blur in Figma.mp4

05:57

69 - How to make Neumorphic ui buttons in Figma.mp4

07:37

70 - Class project 13 Effects.mp4

01:53

17 - Saving & History

71 - How to save locally & save history in Figma.mp4

05:42

18 - Components & Instances

72 - What are components in Figma.mp4

06:20

73 - Updating & Changing & Resetting your components.mp4

07:47

74 - You cant kill main components in Figma.mp4

07:22

75 - Where should you keep your main components in Figma.mp4

05:02

76 - Intro to the forward slash naming convention in Figma.mp4

08:55

77 - Class Project 14 Components.mp4

00:44

19 - Variants & Variables

78 - How to make a variable component in Figma.mp4

05:48

79 - Another way to make variables in Figma.mp4

05:35

80 - How to make a Multi Dimensional Variant in Figma.mp4

09:57

81 - Class Project 15 Variants.mp4

01:41

20 - Making a form

82 - How to make a form using variants in Figma.mp4

12:52

83 - Class Project 16 Form.mp4

01:27

84 - Putting it all together in an desktop example.mp4

19:44

21 - Prototyping Level 2

85 - How to add a popup overlay modal in Figma.mp4

03:03

86 - How to make & prototype a tool tip in Figma.mp4

07:26

87 - What are Flows in Figma.mp4

05:39

88 - Slide in mobile nav menu overlay in Figma.mp4

03:55

89 - Class project 17 Prototyping.mp4

01:10

90 - How to pin navigation to top in Figma.mp4

10:17

91 - How to make horizontal scrolling swipe in Figma.mp4

06:36

92 - Automatic scroll down the page to anchor point in Figma.mp4

04:50

22 - Teams & Projects

93 - What are Teams vs Projects vs Files in Figma.mp4

05:18

23 - Libraries

94 - How do you use team libraries in Figma.mp4

11:03

24 - Animation & Micro Interactions

95 - The difference between animation & micro interactions.mp4

02:55

96 - Animation with custom easing in Figma.mp4

25:36

97 - Class Project 18 My Second Animation.mp4

01:55

98 - How to make animated transitions in Figma.mp4

12:34

99 - Class Project 19 Page transition.mp4

01:31

100 - Micro interactions using interactive components in Figma.mp4

05:55

101 - Micro interaction toggle switch in Figma.mp4

04:23

102 - Micro Interaction burger menu turned into cross in Figma.mp4

04:23

103 - Class Project 20 Micro interaction.mp4

01:36

25 - Thumbnail update

104 - How to change the thumbnail for Figma Files.mp4

04:10

26 - Exporting

105 - How to export Images out of Figma.mp4

07:40

106 - How to share you document with clients & stakeholders.mp4

07:09

107 - Talking to your developer early in the figma design process.mp4

03:55

108 - Sharing Figma with developers & engineers handoff.mp4

07:19

109 - What are the next level handoffs aka design systems.mp4

03:18

110 - Class Project 21 Finish your design.mp4

04:57

27 - What next

111 - What next for you and Figma.mp4

05:43

Description

Use Figma to get a job in UI Design, User Interface, User Experience design, UX Design & Web Design

What You'll Learn?

How to begin working as a UX Designer using Figma.
How to use Figma for Essential UX Design & UI Design
How to make fully interactive prototypes.
How to work with a UX personas.
You will be able to add UX designer to your CV.
Build a UX project from beginning to end.
What the client expects of you as a UX designer.
How to create simple wireframes.
How to implement colours & images properly in your designs.
The dos & don'ts around choosing fonts for web & mobile apps.
How to create your own icons, buttons & other UI components.
Terms such as Components, Constraints & Multi Dimensional Variants.
Free UI kits & plugins for Figma which will speed up our workflow dramatically!
How to build a simple style guide, ready for client handoff.
How to make both simple & advanced micro interactions, page transitions & animations.
Learn to design websites & mobile phone apps.
Work with fonts & colors.
Test on mobile phones.
Export production ready assets.
Create your first UX brief & persona.
Learn professional workflow tricks & shortcuts.
Forum support from me and the rest of the BYOL crew.
All the techniques used by UX professionals
111 videos of detailed Figma & UX & UI Design content.

Who is this for?

Anyone who wants to start using Figma in their career & get paid for their user experience design skills.

This course is for beginners, newbies & amateurs in the field of UX design.

Aimed at people new to the world of design & user experience.

For anyone that needs to add ‘UX Design’ to their portfolio.

Anyone who wants to learn the essentials of UI & UX Design.

What You Need to Know?

You'll need a copy of Figma. A free plan is available on the Figma website.

No previous UX Design/UI Design experience is needed.

No previous Figma skills are needed.

No previous design skills or experience required.

More details

Description
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.
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.
Who this course is for:
Anyone who wants to start using Figma in their career & get paid for their user experience design skills.
This course is for beginners, newbies & amateurs in the field of UX design.
Aimed at people new to the world of design & user experience.
For anyone that needs to add â€˜UX Designâ€™ to their portfolio.
Anyone who wants to learn the essentials of UI & UX Design.

User Reviews

Rating

average 0

Total votes0

Focused display

Sharing is who I am, and teaching is where I am at my best, because I've been on both sides of that equation, and getting to deliver useful training is my meaningful way to be a part of the creative community.I've spent a long time watching others learn, and teach, to refine how I work with you to be efficient, useful and, most importantly, memorable. I want you to carry what I've shown you into a bright future.I have a wife (a lovely Irish girl) and kids. I have lived and worked in many places (as Kiwis tend to do) – but most of my 14+ years of creating and teaching has had one overriding theme: bringing others along for the ride as we all try to change the world with our stories, our labours of love and our art.I'm a certified Adobe instructor (ACI) in Ireland. I'm also an Adobe Certified Expert (ACE) and have completed the Adobe Certified Associate training (ACA). And I don't just do Adobe. Remember, media is a very broad term – digital blew out the borders, so we are all constantly learning.I've been teaching for 14+ years. I come from being a media designer and content creator – so I understand exactly where you're at now. I've been there. I love this stuff. Print, digital publishing, web and video. I can see how it all connects. And I can see how we can share those connections.I built Bring Your Own Laptop in Ireland, New Zealand, Australia & online. I have a great team working with me to keep BYOL at the top of Adobe and digital media training. I understand business, I have one – so I know how important it is to get it right and make it work for you.Now my focus is on Udemy. It's my mission to bring you the best training for digital media on Udemy.Daniel Walter Scott

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.