Pick three reasons SVGs are great for UI design.

Course contents

SECTION: 1

Getting Started 22:02

1. Introduction to Figma Essentials training course FREE

2:35

2. Getting started with Figma Training

2:40

3. How to earn your certificate FREE

2:28

4. What is Figma for?

5:29

5. What’s the Difference Between UI and UX in Figma FREE

2:34

6. What We Are Making in This Figma Course

4:15

7. Class Project 01 - Create Your Own Brief

2:01

SECTION: 2

Wireframing - Low Fidelity 13:40

8. What is Lo Fi Wireframe vs High Fidelity in Figma?

3:41

9. Creating Our Design File & Introducing Frames in Figma

9:59

SECTION: 3

Type, Color & Icon Introduction 1:15:06

10. The Basics of Type & Fonts in Figma

9:12

11. Quiz question 1

12. Rectangles, Circles, Buttons and Rounded corners in Figma

7:40

13. Quiz question 2

14. How To Use Color in Figma

7:52

15. Strokes Plus Updating Color Defaults in Figma

9:36

16. Quiz question 3

17. Object Editing and How To Escape in Figma

2:00

18. Quiz question 4

19. Scale vs Selection Tool in Figma

5:10

20. Frames vs Groups in Figma

9:02

21. Quiz question 5

22. Class Project 02 - Wireframe

3:16

23. Where To Get Free Icons for Figma

9:57

24. Quiz question 6

25. How To Use Plugins in Figma for Icons

6:09

26. Class Project 03 - Icons

5:12

SECTION: 4

Pages 6:36

27. How To Use Pages in Figma

6:36

28. Quiz question 7

SECTION: 5

Prototyping - Level 1 31:04

29. How To Prototype in Figma FREE

7:32

30. Quiz question 8

31. Prototype Animation and Easing in Figma

9:11

32. How To Add the iOS Status Bar in Figma

4:25

33. Testing on your phone with Figma Mirror

6:07

34. Class Project 04 - Testing on your phone

3:49

SECTION: 6

Animation Level 1 14:16

35. What is Smart Animation & delays in Figma?

12:58

36. Quiz question 9

37. Class Project 05 - My First Animation

1:18

SECTION: 7

Commenting 11:30

38. Sharing & Commenting on a Figma file with Stakeholders

5:39

39. What are Teams Projects drafts in Figma

5:51

SECTION: 8

High Fidelity 14:39

40. How I Get Inspiration for UX Projects

4:48

41. How To Create a Moodboard in Figma FREE

7:01

42. Class Project 06 - Moodboard

2:50

SECTION: 9

Columns 16:54

43. How To Work With Columns & Grids in Figma

16:54

44. Quiz question 10

SECTION: 10

Tips & Tricks 6:49

45. Tips, Tricks & Preferences in Figma

6:49

SECTION: 11

Colors 35:01

46. Color Inspiration & The Eyedropper in Figma

5:15

47. How To Create a Color Palette in Figma

10:04

48. How To Make Gradients in Figma

7:34

49. How To Create & Use Color Styles in Figma

9:34

50. Quiz question 11

51. Quiz question 12

52. Class Project 07 - Colors & Columns

2:34

SECTION: 12

Text & Fonts Advanced 58:09

53. Missing Fonts in the Browser of Figma FREE

1:28

54. What Fonts Can I Use? Plus Font Pairing in Figma FREE

5:44

55. What Common Font Sizes Should I Choose in Web Design?

7:30

56. Quiz question 13

57. How to make Character Styles in Figma

8:43

58. Lorem Ipsum & Placeholder Text in Figma

4:10

59. Quiz question 14

60. Using AI To Create Text in Figma

3:09

61. Useful Things To Know About Text in Figma

11:36

62. Quiz question 15

63. Class Project 08 - Text

5:48

64. Quiz question 16

65. Text on a Path Curved Text in Figma

4:42

66. Text Around a Circle Badge in Figma

5:19

67. Quiz question 17

SECTION: 13

Drawing 49:33

68. How To Use the Pencil & Brush Tools in Figma

4:28

69. How To Use the Pen Tool in Figma

12:45

70. Class Project 09 - Pen Tool

1:39

71. How To Use the Shapebuilder in Figma

13:04

72. Quiz question 18

73. Squircle Buttons With iOS Rounded Courses in Figma

3:28

74. Class Project 10 - Icons

8:38

75. Quiz question 19

76. Smart Selection & Tidy Up in Figma

5:31

77. Quiz question 20

SECTION: 14

Images 28:16

78. Tips & Tricks for Using Images in Figma

11:35

79. Quiz question 21

80. Masking & Cropping Images in Figma

8:30

81. Quiz question 22

82. Free Images & Plugins for Figma

2:29

83. Making AI Images in Figma

4:29

84. Class Project 11 - Images

1:13

SECTION: 15

Autolayout & Constraints 38:47

85. What is Autolayout & Expanding Buttons in Figma?

5:51

86. Quiz question 23

87. Class Project 12 - Buttons

3:24

88. Auto Layout for Spacing Navigation in Figma

8:36

89. Quiz question 24

90. How To Use Constraints in Figma

8:45

91. Quiz question 25

92. Combining Nested Frames & Auto Layout Constraints in Figma

8:37

93. Class Project 13 - Responsive Design

3:34

SECTION: 16

Effects 14:55

94. Nice Drop Shadow & Inner Drop Shadow Effects in Figma

5:47

95. Quiz question 26

96. Blur Layer, Background Blur & Image Blur in Figma

8:10

97. Quiz question 27

98. Class Project 14 - Effects

SECTION: 17

Components & Instances 16:33

99. What Are Components & Instances in Figma

8:18

100. Quiz question 28

101. Quiz question 29

102. Where Should You Keep Your Main Components in Figma?

4:59

103. Class Project 15 - Components

3:16

SECTION: 18

Variants 14:25

104. How To Make Component Variants in Figma FREE

6:11

105. Quiz question 30

106. Another Way To Make Variants in Figma

5:44

107. Class Project 16 - Variants

2:30

108. Quiz question 31

SECTION: 19

Prototyping - Level 2 38:53

109. How To Add a Popup Overlay Modal in Figma

4:20

110. Quiz question 32

111. How To Make & Prototype a Tool Tip in Figma

9:37

112. What Are Flows in Figma?

5:53

113. Quiz question 33

114. Slide In Mobile Nav Menu Overlay in Figma

10:06

115. Class Project 17 - Prototyping

1:16

116. How To Pin Navigation to the Top in Figma

7:41

117. Quiz question 34

SECTION: 20

Teams & Projects 3:37

118. What Are Teams vs Projects vs Files in Figma?

3:37

SECTION: 21

Micro Interactions 12:00

119. Interactive Component Variant for Hover Checkbox in Figma

7:02

120. Micro Interaction Toggle Switch in Figma

3:56

121. Class Project 18 - Micro interaction

1:02

SECTION: 22

Thumbnail Update 3:59

122. How To Change the Thumbnail for Figma Files

3:59

SECTION: 23

Overview of Figma Sites 17:03

123. Quick Overview of Figma Sites

17:03

SECTION: 24

Exporting 25:51

124. How To Export Images out of Figma

8:16

125. Quiz question 35

126. How To Share Your Document With Clients & Stakeholders

5:02

127. Talking to Your Developer Early in the Figma Design Process

3:55

128. Dev Mode and Handing Off to a Developer

6:27

129. Class Project 19 - Finish Your Design

2:11

SECTION: 25

What's next 10:03

130. Distinction Certificate Project

5:23

131. How to request your certificate FREE

1:00

132. What's Next?

3:40

Ooops

You need a subscription to BYOL.com to view the knowledge quiz on this course.

Already a member? Login here

Figma UI UX Design Essentials

Pick three reasons SVGs are great for UI design.

Course contents

SECTION: 1

Getting Started 22:02

1. Introduction to Figma Essentials training course FREE

2:35

2. Getting started with Figma Training

2:40

3. How to earn your certificate FREE

2:28

4. What is Figma for?

5:29

5. What’s the Difference Between UI and UX in Figma FREE

2:34

6. What We Are Making in This Figma Course

4:15

7. Class Project 01 - Create Your Own Brief

2:01

SECTION: 2

Wireframing - Low Fidelity 13:40

8. What is Lo Fi Wireframe vs High Fidelity in Figma?

3:41

9. Creating Our Design File & Introducing Frames in Figma

9:59

SECTION: 3

Type, Color & Icon Introduction 1:15:06

10. The Basics of Type & Fonts in Figma

9:12

11. Quiz question 1

12. Rectangles, Circles, Buttons and Rounded corners in Figma

7:40

13. Quiz question 2

14. How To Use Color in Figma

7:52

15. Strokes Plus Updating Color Defaults in Figma

9:36

16. Quiz question 3

17. Object Editing and How To Escape in Figma

2:00

18. Quiz question 4

19. Scale vs Selection Tool in Figma

5:10

20. Frames vs Groups in Figma

9:02

21. Quiz question 5

22. Class Project 02 - Wireframe

3:16

23. Where To Get Free Icons for Figma

9:57

24. Quiz question 6

25. How To Use Plugins in Figma for Icons

6:09

26. Class Project 03 - Icons

5:12

SECTION: 4

Pages 6:36

27. How To Use Pages in Figma

6:36

28. Quiz question 7

SECTION: 5

Prototyping - Level 1 31:04

29. How To Prototype in Figma FREE

7:32

30. Quiz question 8

31. Prototype Animation and Easing in Figma

9:11

32. How To Add the iOS Status Bar in Figma

4:25

33. Testing on your phone with Figma Mirror

6:07

34. Class Project 04 - Testing on your phone

3:49

SECTION: 6

Animation Level 1 14:16

35. What is Smart Animation & delays in Figma?

12:58

36. Quiz question 9

37. Class Project 05 - My First Animation

1:18

SECTION: 7

Commenting 11:30

38. Sharing & Commenting on a Figma file with Stakeholders

5:39

39. What are Teams Projects drafts in Figma

5:51

SECTION: 8

High Fidelity 14:39

40. How I Get Inspiration for UX Projects

4:48

41. How To Create a Moodboard in Figma FREE

7:01

42. Class Project 06 - Moodboard

2:50

SECTION: 9

Columns 16:54

43. How To Work With Columns & Grids in Figma

16:54

44. Quiz question 10

SECTION: 10

Tips & Tricks 6:49

45. Tips, Tricks & Preferences in Figma

6:49

SECTION: 11

Colors 35:01

46. Color Inspiration & The Eyedropper in Figma

5:15

47. How To Create a Color Palette in Figma

10:04

48. How To Make Gradients in Figma

7:34

49. How To Create & Use Color Styles in Figma

9:34

50. Quiz question 11

51. Quiz question 12

52. Class Project 07 - Colors & Columns

2:34

SECTION: 12

Text & Fonts Advanced 58:09

53. Missing Fonts in the Browser of Figma FREE

1:28

54. What Fonts Can I Use? Plus Font Pairing in Figma FREE

5:44

55. What Common Font Sizes Should I Choose in Web Design?

7:30

56. Quiz question 13

57. How to make Character Styles in Figma

8:43

58. Lorem Ipsum & Placeholder Text in Figma

4:10

59. Quiz question 14

60. Using AI To Create Text in Figma

3:09

61. Useful Things To Know About Text in Figma

11:36

62. Quiz question 15

63. Class Project 08 - Text

5:48

64. Quiz question 16

65. Text on a Path Curved Text in Figma

4:42

66. Text Around a Circle Badge in Figma

5:19

67. Quiz question 17

SECTION: 13

Drawing 49:33

68. How To Use the Pencil & Brush Tools in Figma

4:28

69. How To Use the Pen Tool in Figma

12:45

70. Class Project 09 - Pen Tool

1:39

71. How To Use the Shapebuilder in Figma

13:04

72. Quiz question 18

73. Squircle Buttons With iOS Rounded Courses in Figma

3:28

74. Class Project 10 - Icons

8:38

75. Quiz question 19

76. Smart Selection & Tidy Up in Figma

5:31

77. Quiz question 20

SECTION: 14

Images 28:16

78. Tips & Tricks for Using Images in Figma

11:35

79. Quiz question 21

80. Masking & Cropping Images in Figma

8:30

81. Quiz question 22

82. Free Images & Plugins for Figma

2:29

83. Making AI Images in Figma

4:29

84. Class Project 11 - Images

1:13

SECTION: 15

Autolayout & Constraints 38:47

85. What is Autolayout & Expanding Buttons in Figma?

5:51

86. Quiz question 23

87. Class Project 12 - Buttons

3:24

88. Auto Layout for Spacing Navigation in Figma

8:36

89. Quiz question 24

90. How To Use Constraints in Figma

8:45

91. Quiz question 25

92. Combining Nested Frames & Auto Layout Constraints in Figma

8:37

93. Class Project 13 - Responsive Design

3:34

SECTION: 16

Effects 14:55

94. Nice Drop Shadow & Inner Drop Shadow Effects in Figma

5:47

95. Quiz question 26

96. Blur Layer, Background Blur & Image Blur in Figma

8:10

97. Quiz question 27

98. Class Project 14 - Effects

SECTION: 17

Components & Instances 16:33

99. What Are Components & Instances in Figma

8:18

100. Quiz question 28

101. Quiz question 29

102. Where Should You Keep Your Main Components in Figma?

4:59

103. Class Project 15 - Components

3:16

SECTION: 18

Variants 14:25

104. How To Make Component Variants in Figma FREE

6:11

105. Quiz question 30

106. Another Way To Make Variants in Figma

5:44

107. Class Project 16 - Variants

2:30

108. Quiz question 31

SECTION: 19

Prototyping - Level 2 38:53

109. How To Add a Popup Overlay Modal in Figma

4:20

110. Quiz question 32

111. How To Make & Prototype a Tool Tip in Figma

9:37

112. What Are Flows in Figma?

5:53

113. Quiz question 33

114. Slide In Mobile Nav Menu Overlay in Figma

10:06

115. Class Project 17 - Prototyping

1:16

116. How To Pin Navigation to the Top in Figma

7:41

117. Quiz question 34

SECTION: 20

Teams & Projects 3:37

118. What Are Teams vs Projects vs Files in Figma?

3:37

SECTION: 21

Micro Interactions 12:00

119. Interactive Component Variant for Hover Checkbox in Figma

7:02

120. Micro Interaction Toggle Switch in Figma

3:56

121. Class Project 18 - Micro interaction

1:02

SECTION: 22

Thumbnail Update 3:59

122. How To Change the Thumbnail for Figma Files

3:59

SECTION: 23

Overview of Figma Sites 17:03

123. Quick Overview of Figma Sites

17:03

SECTION: 24

Exporting 25:51

124. How To Export Images out of Figma

8:16

125. Quiz question 35

126. How To Share Your Document With Clients & Stakeholders

5:02

127. Talking to Your Developer Early in the Figma Design Process

3:55

128. Dev Mode and Handing Off to a Developer

6:27

129. Class Project 19 - Finish Your Design

2:11

SECTION: 25

What's next 10:03

130. Distinction Certificate Project

5:23

131. How to request your certificate FREE

1:00

132. What's Next?

3:40

Ooops

You need a subscription to BYOL.com to view the knowledge quiz on this course.

Already a member? Login here

Powered by Marvin
Terms of use
Privacy policy
Cookie policy
Bring Your Own Laptop uses cookies to operate our site, enhance its functionalities for a better learning experience, and assist in our marketing efforts.

You have selected to use only necessary cookies.