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

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

2:34

2. Creating our design file & introducing frames in Figma

8:29

SECTION: 3

Type, Color & Icon Introduction 1:12:34

1. The basics of type & fonts in Figma

10:52

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

6:50

3. How to use color in Figma

5:46

4. Strokes plus updating color defaults in Figma

9:28

5. Object editing and how to escape in Figma

1:47

6. Quiz question 1

7. Scale vs Selection Tool in Figma

2:39

8. Frames vs Groups in Figma

9:24

9. Quiz question 2

10. Class Project 02 - Wireframe

3:01

11. Where to get Free icons for Figma

9:10

12. Matching the stroke of our icons

5:16

13. How to use Plugins in Figma for icons

4:32

14. Class Project 03 - Icons

3:49

SECTION: 4

Pages 8:32

1. How to use Pages in Figma

8:32

2. Quiz question 3

SECTION: 5

Prototyping - Level 1 30:08

1. How to prototype in Figma

9:43

2. Quiz question 4

3. Quiz question 5

4. Prototype animation and easing in Figma FREE

10:53

5. Testing on your phone with Figma Mirror

5:41

6. Class Project 04 - Testing on your phone

3:51

SECTION: 6

Animation Level 1 10:46

1. What is Smart Animation & delays in Figma?

8:45

2. Quiz question 6

3. Class Project 05 - My first animation

2:01

SECTION: 7

Commenting 14:09

1. Sharing & Commenting on a Figma file with Stakeholders

7:11

2. Sharing & editing with other UX designers in Figma

6:58

SECTION: 8

Moodboard - High Fidelity 13:40

1. How I get inspiration for UX projects

6:40

2. How to create a moodboard in Figma FREE

5:34

3. Class Project 06 - Moodboard

1:26

SECTION: 9

Columns 13:54

1. How to work with Columns & Grids in Figma

13:54

2. Quiz question 7

3. Quiz question 8

SECTION: 10

Tips & Tricks 7:21

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

7:21

SECTION: 11

Colors 34:48

1. Color Inspiration & the eyedropper in Figma

6:35

2. How to create a color palette in Figma

9:02

3. How to make gradients in Figma

7:10

4. How to create & use Color Styles in Figma

8:01

5. Quiz question 9

6. Class Project 07 - Colors & Columns

4:00

SECTION: 12

Text & Fonts Advanced 47:48

1. Fonts on Desktop vs in Browser in Figma

1:31

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

6:01

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

11:31

4. How to make Character Styles in Figma

6:37

5. Lorem ipsum & placeholder text in Figma

4:29

6. Useful things to know about text in Figma

9:36

7. How to fix missing fonts in Figma FREE

2:43

8. Class Project 08 - Text

5:20

9. Quiz question 10

10. Quiz question 11

SECTION: 13

Drawing 35:41

1. Drawing tips and tricks in Figma

9:38

2. Squircle buttons with iOS rounded courses in Figma

2:49

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

7:26

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

3:37

5. Quiz question 12

6. Quiz question 13

7. Class Project 09 - Making stuff

3:30

8. Smart Selection & Tidy up in Figma

8:41

SECTION: 14

Working with Illustrator 4:16

1. Do I need to know Illustrator with Figma?

4:16

SECTION: 15

Images 17:55

1. Tips & tricks for using images in Figma

6:11

2. Masking & cropping images in Figma

9:13

3. Free images & plugins for Figma

2:31

SECTION: 16

Working with Photoshop 11:58

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

10:40

2. Class Project 10 - Images

1:18

SECTION: 17

Autolayout & Constraints 52:08

1. What is Autolayout & expanding buttons in Figma?

10:27

2. Quiz question 14

3. Quiz question 15

4. Class Project 11 - Buttons

1:16

5. Auto Layout for spacing

3:24

6. Quiz question 16

7. How to use constraints in Figma

8:23

8. Quiz question 17

9. Combining Nested frames Auto Layout & Constraints in Figma

11:55

10. Adding Text Box Autoheight to Autolayout in Figma

8:27

11. Class Project 12 - Responsive Design

2:20

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

5:56

SECTION: 18

Effects 15:30

1. Quiz question 18

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

5:58

3. Quiz question 19

4. How to make Neumorphic UI buttons in Figma FREE

7:38

5. Class Project 13 - Effects

1:54

SECTION: 19

Saving & History 5:42

1. How to save locally & save history in Figma

5:42

SECTION: 20

Components & Instances 36:15

1. What are components in Figma?

6:20

2. Quiz question 20

3. Quiz question 21

4. Updating, Changing & Resetting your components

7:48

5. Quiz question 22

6. You can’t kill main components in Figma

7:23

7. Where should you keep your main components in Figma

5:04

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

8:55

9. Quiz question 23

10. Class Project 14 - Components

SECTION: 21

Variants 23:04

1. How to make component variants in Figma FREE

5:48

2. Quiz question 24

3. Another way to make variables in Figma

5:38

4. How to make a Multi Dimensional Variant in Figma

9:57

5. Class Project 15 - Variants

1:41

SECTION: 22

Making a form 34:05

1. How to make a form using variants in Figma

12:52

2. Class Project 16 - Form

1:28

3. Putting it all together in a desktop example

19:45

SECTION: 23

Prototyping - Level 2 43:01

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

3:04

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

7:26

3. What are Flows in Figma?

5:39

4. Quiz question 25

5. Slide in mobile nav menu overlay in Figma

3:55

6. Class Project 17 - Prototyping

1:11

7. How to pin navigation to the top in Figma

10:20

8. How to make a horizontal scrolling swipe in Figma

6:36

9. Quiz question 26

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

4:50

SECTION: 24

Teams & Projects 5:19

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

5:19

SECTION: 25

Libraries 11:03

1. How do you use team libraries in Figma

11:03

2. Quiz question 27

SECTION: 26

Animation & Micro Interactions 1:05:38

1. The difference between animation & micro interactions

2:56

2. Animation with custom easing in Figma

25:37

3. Class Project 18 - My Second Animation

1:55

4. How to make animated transitions in Figma

17:21

5. Quiz question 28

6. Class Project 19 - Page transition

1:32

7. Micro interactions using interactive components in Figma

5:55

8. Micro interaction toggle switch in Figma

4:23

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

4:23

10. Class Project 20 - Micro interaction

1:36

SECTION: 27

Thumbnail update 4:10

1. How to change the thumbnail for Figma Files

4:10

SECTION: 28

Exporting 35:21

1. How to export images out of Figma

7:41

2. Quiz question 29

3. How to share your document with clients & stakeholders

7:10

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

3:55

5. Sharing Figma with developers & engineers handoff

7:19

6. What are the next level handoffs aka design systems

3:19

7. Class Project 21 - Finish your design FREE

4:57

8. How to request your certificate FREE

1:00

SECTION: 29

What next 14:53

1. Distinction Certificate Project

8:19

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

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

2:34

2. Creating our design file & introducing frames in Figma

8:29

SECTION: 3

Type, Color & Icon Introduction 1:12:34

1. The basics of type & fonts in Figma

10:52

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

6:50

3. How to use color in Figma

5:46

4. Strokes plus updating color defaults in Figma

9:28

5. Object editing and how to escape in Figma

1:47

6. Quiz question 1

7. Scale vs Selection Tool in Figma

2:39

8. Frames vs Groups in Figma

9:24

9. Quiz question 2

10. Class Project 02 - Wireframe

3:01

11. Where to get Free icons for Figma

9:10

12. Matching the stroke of our icons

5:16

13. How to use Plugins in Figma for icons

4:32

14. Class Project 03 - Icons

3:49

SECTION: 4

Pages 8:32

1. How to use Pages in Figma

8:32

2. Quiz question 3

SECTION: 5

Prototyping - Level 1 30:08

1. How to prototype in Figma

9:43

2. Quiz question 4

3. Quiz question 5

4. Prototype animation and easing in Figma FREE

10:53

5. Testing on your phone with Figma Mirror

5:41

6. Class Project 04 - Testing on your phone

3:51

SECTION: 6

Animation Level 1 10:46

1. What is Smart Animation & delays in Figma?

8:45

2. Quiz question 6

3. Class Project 05 - My first animation

2:01

SECTION: 7

Commenting 14:09

1. Sharing & Commenting on a Figma file with Stakeholders

7:11

2. Sharing & editing with other UX designers in Figma

6:58

SECTION: 8

Moodboard - High Fidelity 13:40

1. How I get inspiration for UX projects

6:40

2. How to create a moodboard in Figma FREE

5:34

3. Class Project 06 - Moodboard

1:26

SECTION: 9

Columns 13:54

1. How to work with Columns & Grids in Figma

13:54

2. Quiz question 7

3. Quiz question 8

SECTION: 10

Tips & Tricks 7:21

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

7:21

SECTION: 11

Colors 34:48

1. Color Inspiration & the eyedropper in Figma

6:35

2. How to create a color palette in Figma

9:02

3. How to make gradients in Figma

7:10

4. How to create & use Color Styles in Figma

8:01

5. Quiz question 9

6. Class Project 07 - Colors & Columns

4:00

SECTION: 12

Text & Fonts Advanced 47:48

1. Fonts on Desktop vs in Browser in Figma

1:31

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

6:01

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

11:31

4. How to make Character Styles in Figma

6:37

5. Lorem ipsum & placeholder text in Figma

4:29

6. Useful things to know about text in Figma

9:36

7. How to fix missing fonts in Figma FREE

2:43

8. Class Project 08 - Text

5:20

9. Quiz question 10

10. Quiz question 11

SECTION: 13

Drawing 35:41

1. Drawing tips and tricks in Figma

9:38

2. Squircle buttons with iOS rounded courses in Figma

2:49

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

7:26

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

3:37

5. Quiz question 12

6. Quiz question 13

7. Class Project 09 - Making stuff

3:30

8. Smart Selection & Tidy up in Figma

8:41

SECTION: 14

Working with Illustrator 4:16

1. Do I need to know Illustrator with Figma?

4:16

SECTION: 15

Images 17:55

1. Tips & tricks for using images in Figma

6:11

2. Masking & cropping images in Figma

9:13

3. Free images & plugins for Figma

2:31

SECTION: 16

Working with Photoshop 11:58

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

10:40

2. Class Project 10 - Images

1:18

SECTION: 17

Autolayout & Constraints 52:08

1. What is Autolayout & expanding buttons in Figma?

10:27

2. Quiz question 14

3. Quiz question 15

4. Class Project 11 - Buttons

1:16

5. Auto Layout for spacing

3:24

6. Quiz question 16

7. How to use constraints in Figma

8:23

8. Quiz question 17

9. Combining Nested frames Auto Layout & Constraints in Figma

11:55

10. Adding Text Box Autoheight to Autolayout in Figma

8:27

11. Class Project 12 - Responsive Design

2:20

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

5:56

SECTION: 18

Effects 15:30

1. Quiz question 18

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

5:58

3. Quiz question 19

4. How to make Neumorphic UI buttons in Figma FREE

7:38

5. Class Project 13 - Effects

1:54

SECTION: 19

Saving & History 5:42

1. How to save locally & save history in Figma

5:42

SECTION: 20

Components & Instances 36:15

1. What are components in Figma?

6:20

2. Quiz question 20

3. Quiz question 21

4. Updating, Changing & Resetting your components

7:48

5. Quiz question 22

6. You can’t kill main components in Figma

7:23

7. Where should you keep your main components in Figma

5:04

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

8:55

9. Quiz question 23

10. Class Project 14 - Components

SECTION: 21

Variants 23:04

1. How to make component variants in Figma FREE

5:48

2. Quiz question 24

3. Another way to make variables in Figma

5:38

4. How to make a Multi Dimensional Variant in Figma

9:57

5. Class Project 15 - Variants

1:41

SECTION: 22

Making a form 34:05

1. How to make a form using variants in Figma

12:52

2. Class Project 16 - Form

1:28

3. Putting it all together in a desktop example

19:45

SECTION: 23

Prototyping - Level 2 43:01

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

3:04

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

7:26

3. What are Flows in Figma?

5:39

4. Quiz question 25

5. Slide in mobile nav menu overlay in Figma

3:55

6. Class Project 17 - Prototyping

1:11

7. How to pin navigation to the top in Figma

10:20

8. How to make a horizontal scrolling swipe in Figma

6:36

9. Quiz question 26

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

4:50

SECTION: 24

Teams & Projects 5:19

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

5:19

SECTION: 25

Libraries 11:03

1. How do you use team libraries in Figma

11:03

2. Quiz question 27

SECTION: 26

Animation & Micro Interactions 1:05:38

1. The difference between animation & micro interactions

2:56

2. Animation with custom easing in Figma

25:37

3. Class Project 18 - My Second Animation

1:55

4. How to make animated transitions in Figma

17:21

5. Quiz question 28

6. Class Project 19 - Page transition

1:32

7. Micro interactions using interactive components in Figma

5:55

8. Micro interaction toggle switch in Figma

4:23

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

4:23

10. Class Project 20 - Micro interaction

1:36

SECTION: 27

Thumbnail update 4:10

1. How to change the thumbnail for Figma Files

4:10

SECTION: 28

Exporting 35:21

1. How to export images out of Figma

7:41

2. Quiz question 29

3. How to share your document with clients & stakeholders

7:10

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

3:55

5. Sharing Figma with developers & engineers handoff

7:19

6. What are the next level handoffs aka design systems

3:19

7. Class Project 21 - Finish your design FREE

4:57

8. How to request your certificate FREE

1:00

SECTION: 29

What next 14:53

1. Distinction Certificate Project

8:19

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