Figma UI UX Design Essentials

سرفصل های دوره

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

1 - Getting Started

1 - Introduction to Figma Essentials training course

2 - Exercise-Files-Figma-Essentials.zip

2 - Getting started with Figma training

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

4 - Whats the difference between UI and UX in Figma

5 - What we are making in this Figma course

6 - Class project 01 Create your own brief

2 - Wireframing Low Fidelity

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

8 - Creating our design file & introducing frames in Figma

3 - Type Color & Icon Introduction

9 - The basics of type & fonts in Figma

10 - Rectangles Circles Buttons Rounded corners in Figma

11 - How to use color in Figma

12 - Strokes plus updating color defaults in Figma

13 - Object editing and how to escape in Figma

14 - Scale vs Selection Tool in Figma

15 - Frames vs Groups in Figma

16 - Class project 02 Wireframe

17 - Where to get Free icons for Figma

18 - Matching the stroke of our icons

19 - How to use Plugins in Figma for icons

20 - Class project 03 Icons

4 - Pages

21 - How to use Pages in Figma

5 - Prototyping Level 1

22 - How to prototype in Figma

23 - Prototype animation and easing in Figma

24 - Testing on your phone with Figma Mirror

25 - Class project 04 Testing on your phone

6 - Animation Level 1

26 - What is Smart Animation & delays in Figma

27 - Class project 05 My first animation

7 - Commenting

28 - Sharing & Commenting on Figma file with Stakeholders

29 - Share editing with other UX designers in Figma

8 - Moodboard High Fidelity

30 - How I get inspiration for UX projects

31 - How to create a mood board in Figma

32 - Class Project 06 Moodboard

9 - Columns

33 - How to work with Columns & Grid in Figma

10 - Tips & Tricks

34 - Tips Tricks Preferences and Weirdness in Figma

11 - Colors

35 - Color Inspiration & the eyedropper in Figma

36 - How to create a color palette in Figma

37 - How to make gradients in Figma

38 - How to create & use Color Styles in Figma

39 - Class Project 07 Colors & Columns

12 - Text & Fonts Advanced

40 - Font on Desktop vs Browser Figma

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

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

43 - How to make Character Styles in Figma

44 - Lorem ipsum & Placeholder text in Figma

45 - Useful things to know about text in Figma

46 - How fix missing fonts in Figma

47 - Class project 08 Text

13 - Drawing

48 - Drawing tips and tricks in Figma

49 - Squircle buttons with ios rounded courses in Figma

50 - Boolean Union Subtract Intersect Exclude Pathfinder in Figma

51 - What is the difference Union vs Flatten Figma

52 - Class Project 09 Making stuff

53 - Smart Selection & Tidy up in Figma

14 - Working with Illustrator

54 - Do I need to know Illustrator with Figma

15 - Images

55 - Tips & tricks for using images in Figma

56 - Masking Cropping images in Figma

57 - Free image & plugin for Figma

58 - Working with Photoshop

59 - Class Project 10 Images

60 - Autolayout & Constraints

61 - Class project 11 Buttons

62 - Auto Layout for spacing

63 - How to use constraints in figma

64 - Combining Nested frames Auto Layout & Constraints in Figma

65 - Adding Text Box Autoheight to Autolayout in Figma

66 - Class Project 12 Responsive Design

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

16 - Effects

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

69 - How to make Neumorphic ui buttons in Figma

70 - Class project 13 Effects

17 - Saving & History

71 - How to save locally & save history in Figma

18 - Components & Instances

72 - What are components in Figma

73 - Updating & Changing & Resetting your components

74 - You cant kill main components in Figma

75 - Where should you keep your main components in Figma

76 - Intro to the forward slash naming convention in Figma

77 - Class Project 14 Components

19 - Variants & Variables

78 - How to make a variable component in Figma

79 - Another way to make variables in Figma

80 - How to make a Multi Dimensional Variant in Figma

81 - Class Project 15 Variants

20 - Making a form

82 - How to make a form using variants in Figma

83 - Class Project 16 Form

84 - Putting it all together in an desktop example

21 - Prototyping Level 2

85 - How to add a popup overlay modal in Figma

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

87 - What are Flows in Figma

88 - Slide in mobile nav menu overlay in Figma

89 - Class project 17 Prototyping

90 - How to pin navigation to top in Figma

91 - How to make horizontal scrolling swipe in Figma

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

22 - Teams & Projects

93 - What are Teams vs Projects vs Files in Figma

23 - Libraries

94 - How do you use team libraries in Figma

24 - Animation & Micro Interactions

95 - The difference between animation & micro interactions

96 - Animation with custom easing in Figma

97 - Class Project 18 My Second Animation

98 - How to make animated transitions in Figma

99 - Class Project 19 Page transition

100 - Micro interactions using interactive components in Figma

101 - Micro interaction toggle switch in Figma

102 - Micro Interaction burger menu turned into cross in Figma

103 - Class Project 20 Micro interaction

25 - Thumbnail update

104 - How to change the thumbnail for Figma Files

26 - Exporting

105 - How to export Images out of Figma

106 - How to share you document with clients & stakeholders

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

108 - Sharing Figma with developers & engineers handoff

109 - What are the next level handoffs aka design systems

110 - Class Project 21 Finish your design

27 - What next

111 - What next for you and Figma

53,700 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy-Training