Why do we use the forward slash naming convention for components? E.g. Button / Large

Course contents

SECTION: 1

Getting Started 30:36

1. Introduction to Figma Essentials training course FREE

2:54

2. Getting started with Figma training FREE

2:45

3. How to earn your certificate FREE

2:28

4. What is Figma for & does it do the coding? FREE

3:47

5. Whats the difference between UI and UX in Figma

5:23

6. What we are making in this Figma course

9:18

7. Class Project 01 - Create your own brief

4:01

SECTION: 2

Wireframing - Low Fidelity 11:03

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

2:34

9. Creating our design file & introducing frames in Figma

8:29

SECTION: 3

Type, Color & Icon Introduction 1:12:34

10. The basics of type & fonts in Figma

10:52

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

6:50

12. How to use color in Figma

5:46

13. Strokes plus updating color defaults in Figma

9:28

14. Object editing and how to escape in Figma

1:47

15. Quiz question 1

16. Scale vs Selection Tool in Figma

2:39

17. Frames vs Groups in Figma

9:24

18. Quiz question 2

19. Class Project 02 - Wireframe

3:01

20. Where to get Free icons for Figma

9:10

21. Matching the stroke of our icons

5:16

22. How to use Plugins in Figma for icons

4:32

23. Class Project 03 - Icons

3:49

SECTION: 4

Pages 8:32

24. How to use Pages in Figma

8:32

25. Quiz question 3

SECTION: 5

Prototyping - Level 1 30:08

26. How to prototype in Figma

9:43

27. Quiz question 4

28. Quiz question 5

29. Prototype animation and easing in Figma FREE

10:53

30. Testing on your phone with Figma Mirror

5:41

31. Class Project 04 - Testing on your phone

3:51

SECTION: 6

Animation Level 1 10:46

32. What is Smart Animation & delays in Figma?

8:45

33. Quiz question 6

34. Class Project 05 - My first animation

2:01

SECTION: 7

Commenting 14:09

35. Sharing & Commenting on a Figma file with Stakeholders

7:11

36. Sharing & editing with other UX designers in Figma

6:58

SECTION: 8

Moodboard - High Fidelity 13:40

37. How I get inspiration for UX projects

6:40

38. How to create a moodboard in Figma FREE

5:34

39. Class Project 06 - Moodboard

1:26

SECTION: 9

Columns 13:54

40. How to work with Columns & Grids in Figma

13:54

41. Quiz question 7

42. Quiz question 8

SECTION: 10

Tips & Tricks 7:21

43. Tips, Tricks, Preferences, and Weirdness in Figma

7:21

SECTION: 11

Colors 34:48

44. Color Inspiration & the eyedropper in Figma

6:35

45. How to create a color palette in Figma

9:02

46. How to make gradients in Figma

7:10

47. How to create & use Color Styles in Figma

8:01

48. Quiz question 9

49. Class Project 07 - Colors & Columns

4:00

SECTION: 12

Text & Fonts Advanced 47:48

50. Fonts on Desktop vs in Browser in Figma

1:31

51. What fonts can I use? Plus font pairing in Figma FREE

6:01

52. What common font sizes should I choose in web design?

11:31

53. How to make Character Styles in Figma

6:37

54. Lorem ipsum & placeholder text in Figma

4:29

55. Useful things to know about text in Figma

9:36

56. How to fix missing fonts in Figma FREE

2:43

57. Class Project 08 - Text

5:20

58. Quiz question 10

59. Quiz question 11

SECTION: 13

Drawing 35:41

60. Drawing tips and tricks in Figma

9:38

61. Squircle buttons with iOS rounded courses in Figma

2:49

62. Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma

7:26

63. What is the difference? Union vs Flatten in Figma

3:37

64. Quiz question 12

65. Quiz question 13

66. Class Project 09 - Making stuff

3:30

67. Smart Selection & Tidy up in Figma

8:41

SECTION: 14

Working with Illustrator 4:16

68. Do I need to know Illustrator with Figma?

4:16

SECTION: 15

Images 17:55

69. Tips & tricks for using images in Figma

6:11

70. Masking & cropping images in Figma

9:13

71. Free images & plugins for Figma

2:31

SECTION: 16

Working with Photoshop 11:58

72. Do you need Photoshop for UX design in Figma? FREE

10:40

73. Class Project 10 - Images

1:18

SECTION: 17

Autolayout & Constraints 52:08

74. What is Autolayout & expanding buttons in Figma?

10:27

75. Quiz question 14

76. Quiz question 15

77. Class Project 11 - Buttons

1:16

78. Auto Layout for spacing

3:24

79. Quiz question 16

80. How to use constraints in Figma

8:23

81. Quiz question 17

82. Combining Nested frames Auto Layout & Constraints in Figma

11:55

83. Adding Text Box Autoheight to Autolayout in Figma

8:27

84. Class Project 12 - Responsive Design

2:20

85. Nice drop shadow & inner drop shadow effects in Figma

5:56

SECTION: 18

Effects 15:30

86. Quiz question 18

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

5:58

88. Quiz question 19

89. How to make Neumorphic UI buttons in Figma FREE

7:38

90. Class Project 13 - Effects

1:54

SECTION: 19

Saving & History 5:42

91. How to save locally & save history in Figma

5:42

SECTION: 20

Components & Instances 36:15

92. What are components in Figma?

6:20

93. Quiz question 20

94. Quiz question 21

95. Updating, Changing & Resetting your components

7:48

96. Quiz question 22

97. You can’t kill main components in Figma

7:23

98. Where should you keep your main components in Figma

5:04

99. Intro to the forward slash / naming convention in Figma

8:55

100. Quiz question 23

101. Class Project 14 - Components

SECTION: 21

Variants 23:04

102. How to make component variants in Figma FREE

5:48

103. Quiz question 24

104. Another way to make variables in Figma

5:38

105. How to make a Multi Dimensional Variant in Figma

9:57

106. Class Project 15 - Variants

1:41

SECTION: 22

Making a form 34:05

107. How to make a form using variants in Figma

12:52

108. Class Project 16 - Form

1:28

109. Putting it all together in a desktop example

19:45

SECTION: 23

Prototyping - Level 2 43:01

110. How to add a popup overlay modal in Figma FREE

3:04

111. How to make & prototype a tool tip in Figma

7:26

112. What are Flows in Figma?

5:39

113. Quiz question 25

114. Slide in mobile nav menu overlay in Figma

3:55

115. Class Project 17 - Prototyping

1:11

116. How to pin navigation to the top in Figma

10:20

117. How to make a horizontal scrolling swipe in Figma

6:36

118. Quiz question 26

119. Automatic scroll down the page to anchor point in Figma

4:50

SECTION: 24

Teams & Projects 5:19

120. What are Teams vs Projects vs Files in Figma?

5:19

SECTION: 25

Libraries 11:03

121. How do you use team libraries in Figma

11:03

122. Quiz question 27

SECTION: 26

Animation & Micro Interactions 1:05:40

123. The difference between animation & micro interactions

2:56

124. Animation with custom easing in Figma

25:37

125. Class Project 18 - My Second Animation

1:55

126. How to make animated transitions in Figma

17:23

127. Quiz question 28

128. Class Project 19 - Page transition

1:32

129. Micro interactions using interactive components in Figma

5:55

130. Micro interaction toggle switch in Figma

4:23

131. Micro interaction burger menu turned into a cross in Figma

4:23

132. Class Project 20 - Micro interaction

1:36

SECTION: 27

Thumbnail update 4:10

133. How to change the thumbnail for Figma Files

4:10

SECTION: 28

Exporting 34:21

134. How to export images out of Figma

7:41

135. Quiz question 29

136. How to share your document with clients & stakeholders

7:10

137. Talking to your developer early in the Figma design process

3:55

138. Sharing Figma with developers & engineers handoff

7:19

139. What are the next level handoffs aka design systems

3:19

140. Class Project 21 - Finish your design FREE

4:57

SECTION: 29

What next 15:53

141. Distinction Certificate Project

8:19

142. How to request your certificate FREE

1:00

143. What next? FREE

6:34

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

Why do we use the forward slash naming convention for components? E.g. Button / Large

Course contents

SECTION: 1

Getting Started 30:36

1. Introduction to Figma Essentials training course FREE

2:54

2. Getting started with Figma training FREE

2:45

3. How to earn your certificate FREE

2:28

4. What is Figma for & does it do the coding? FREE

3:47

5. Whats the difference between UI and UX in Figma

5:23

6. What we are making in this Figma course

9:18

7. Class Project 01 - Create your own brief

4:01

SECTION: 2

Wireframing - Low Fidelity 11:03

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

2:34

9. Creating our design file & introducing frames in Figma

8:29

SECTION: 3

Type, Color & Icon Introduction 1:12:34

10. The basics of type & fonts in Figma

10:52

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

6:50

12. How to use color in Figma

5:46

13. Strokes plus updating color defaults in Figma

9:28

14. Object editing and how to escape in Figma

1:47

15. Quiz question 1

16. Scale vs Selection Tool in Figma

2:39

17. Frames vs Groups in Figma

9:24

18. Quiz question 2

19. Class Project 02 - Wireframe

3:01

20. Where to get Free icons for Figma

9:10

21. Matching the stroke of our icons

5:16

22. How to use Plugins in Figma for icons

4:32

23. Class Project 03 - Icons

3:49

SECTION: 4

Pages 8:32

24. How to use Pages in Figma

8:32

25. Quiz question 3

SECTION: 5

Prototyping - Level 1 30:08

26. How to prototype in Figma

9:43

27. Quiz question 4

28. Quiz question 5

29. Prototype animation and easing in Figma FREE

10:53

30. Testing on your phone with Figma Mirror

5:41

31. Class Project 04 - Testing on your phone

3:51

SECTION: 6

Animation Level 1 10:46

32. What is Smart Animation & delays in Figma?

8:45

33. Quiz question 6

34. Class Project 05 - My first animation

2:01

SECTION: 7

Commenting 14:09

35. Sharing & Commenting on a Figma file with Stakeholders

7:11

36. Sharing & editing with other UX designers in Figma

6:58

SECTION: 8

Moodboard - High Fidelity 13:40

37. How I get inspiration for UX projects

6:40

38. How to create a moodboard in Figma FREE

5:34

39. Class Project 06 - Moodboard

1:26

SECTION: 9

Columns 13:54

40. How to work with Columns & Grids in Figma

13:54

41. Quiz question 7

42. Quiz question 8

SECTION: 10

Tips & Tricks 7:21

43. Tips, Tricks, Preferences, and Weirdness in Figma

7:21

SECTION: 11

Colors 34:48

44. Color Inspiration & the eyedropper in Figma

6:35

45. How to create a color palette in Figma

9:02

46. How to make gradients in Figma

7:10

47. How to create & use Color Styles in Figma

8:01

48. Quiz question 9

49. Class Project 07 - Colors & Columns

4:00

SECTION: 12

Text & Fonts Advanced 47:48

50. Fonts on Desktop vs in Browser in Figma

1:31

51. What fonts can I use? Plus font pairing in Figma FREE

6:01

52. What common font sizes should I choose in web design?

11:31

53. How to make Character Styles in Figma

6:37

54. Lorem ipsum & placeholder text in Figma

4:29

55. Useful things to know about text in Figma

9:36

56. How to fix missing fonts in Figma FREE

2:43

57. Class Project 08 - Text

5:20

58. Quiz question 10

59. Quiz question 11

SECTION: 13

Drawing 35:41

60. Drawing tips and tricks in Figma

9:38

61. Squircle buttons with iOS rounded courses in Figma

2:49

62. Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma

7:26

63. What is the difference? Union vs Flatten in Figma

3:37

64. Quiz question 12

65. Quiz question 13

66. Class Project 09 - Making stuff

3:30

67. Smart Selection & Tidy up in Figma

8:41

SECTION: 14

Working with Illustrator 4:16

68. Do I need to know Illustrator with Figma?

4:16

SECTION: 15

Images 17:55

69. Tips & tricks for using images in Figma

6:11

70. Masking & cropping images in Figma

9:13

71. Free images & plugins for Figma

2:31

SECTION: 16

Working with Photoshop 11:58

72. Do you need Photoshop for UX design in Figma? FREE

10:40

73. Class Project 10 - Images

1:18

SECTION: 17

Autolayout & Constraints 52:08

74. What is Autolayout & expanding buttons in Figma?

10:27

75. Quiz question 14

76. Quiz question 15

77. Class Project 11 - Buttons

1:16

78. Auto Layout for spacing

3:24

79. Quiz question 16

80. How to use constraints in Figma

8:23

81. Quiz question 17

82. Combining Nested frames Auto Layout & Constraints in Figma

11:55

83. Adding Text Box Autoheight to Autolayout in Figma

8:27

84. Class Project 12 - Responsive Design

2:20

85. Nice drop shadow & inner drop shadow effects in Figma

5:56

SECTION: 18

Effects 15:30

86. Quiz question 18

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

5:58

88. Quiz question 19

89. How to make Neumorphic UI buttons in Figma FREE

7:38

90. Class Project 13 - Effects

1:54

SECTION: 19

Saving & History 5:42

91. How to save locally & save history in Figma

5:42

SECTION: 20

Components & Instances 36:15

92. What are components in Figma?

6:20

93. Quiz question 20

94. Quiz question 21

95. Updating, Changing & Resetting your components

7:48

96. Quiz question 22

97. You can’t kill main components in Figma

7:23

98. Where should you keep your main components in Figma

5:04

99. Intro to the forward slash / naming convention in Figma

8:55

100. Quiz question 23

101. Class Project 14 - Components

SECTION: 21

Variants 23:04

102. How to make component variants in Figma FREE

5:48

103. Quiz question 24

104. Another way to make variables in Figma

5:38

105. How to make a Multi Dimensional Variant in Figma

9:57

106. Class Project 15 - Variants

1:41

SECTION: 22

Making a form 34:05

107. How to make a form using variants in Figma

12:52

108. Class Project 16 - Form

1:28

109. Putting it all together in a desktop example

19:45

SECTION: 23

Prototyping - Level 2 43:01

110. How to add a popup overlay modal in Figma FREE

3:04

111. How to make & prototype a tool tip in Figma

7:26

112. What are Flows in Figma?

5:39

113. Quiz question 25

114. Slide in mobile nav menu overlay in Figma

3:55

115. Class Project 17 - Prototyping

1:11

116. How to pin navigation to the top in Figma

10:20

117. How to make a horizontal scrolling swipe in Figma

6:36

118. Quiz question 26

119. Automatic scroll down the page to anchor point in Figma

4:50

SECTION: 24

Teams & Projects 5:19

120. What are Teams vs Projects vs Files in Figma?

5:19

SECTION: 25

Libraries 11:03

121. How do you use team libraries in Figma

11:03

122. Quiz question 27

SECTION: 26

Animation & Micro Interactions 1:05:40

123. The difference between animation & micro interactions

2:56

124. Animation with custom easing in Figma

25:37

125. Class Project 18 - My Second Animation

1:55

126. How to make animated transitions in Figma

17:23

127. Quiz question 28

128. Class Project 19 - Page transition

1:32

129. Micro interactions using interactive components in Figma

5:55

130. Micro interaction toggle switch in Figma

4:23

131. Micro interaction burger menu turned into a cross in Figma

4:23

132. Class Project 20 - Micro interaction

1:36

SECTION: 27

Thumbnail update 4:10

133. How to change the thumbnail for Figma Files

4:10

SECTION: 28

Exporting 34:21

134. How to export images out of Figma

7:41

135. Quiz question 29

136. How to share your document with clients & stakeholders

7:10

137. Talking to your developer early in the Figma design process

3:55

138. Sharing Figma with developers & engineers handoff

7:19

139. What are the next level handoffs aka design systems

3:19

140. Class Project 21 - Finish your design FREE

4:57

SECTION: 29

What next 15:53

141. Distinction Certificate Project

8:19

142. How to request your certificate FREE

1:00

143. What next? FREE

6:34

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
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.