This lesson is exclusive to members

Previous Next

Figma UI UX Design Essentials

Class Project 15 - Variants

Daniel Walter Scott

Download Exercise Files

Contents

Getting Started
- 1. Introduction to Figma Essentials training course FREE
- 2. Getting started with Figma training FREE
- 3. How to earn your certificate FREE
- 4. What is Figma for & does it do the coding? FREE
- 5. Whats the difference between UI and UX in Figma
- 6. What we are making in this Figma course
- 7. Class Project 01 - Create your own brief
Wireframing - Low Fidelity
- 8. What is Lo Fi Wireframe vs High Fidelity in Figma?
- 9. Creating our design file & introducing frames in Figma
Type, Color & Icon Introduction
- 10. The basics of type & fonts in Figma
- 11. Rectangles, Circles, Buttons and Rounded corners in Figma
- 12. How to use color in Figma
- 13. Strokes plus updating color defaults in Figma
- 14. Object editing and how to escape in Figma
- 15. Quiz question 1
- 16. Scale vs Selection Tool in Figma
- 17. Frames vs Groups in Figma
- 18. Quiz question 2
- 19. Class Project 02 - Wireframe
- 20. Where to get Free icons for Figma
- 21. Matching the stroke of our icons
- 22. How to use Plugins in Figma for icons
- 23. Class Project 03 - Icons
Pages
- 24. How to use Pages in Figma
- 25. Quiz question 3
Prototyping - Level 1
- 26. How to prototype in Figma
- 27. Quiz question 4
- 28. Quiz question 5
- 29. Prototype animation and easing in Figma FREE
- 30. Testing on your phone with Figma Mirror
- 31. Class Project 04 - Testing on your phone
Animation Level 1
- 32. What is Smart Animation & delays in Figma?
- 33. Quiz question 6
- 34. Class Project 05 - My first animation
Commenting
- 35. Sharing & Commenting on a Figma file with Stakeholders
- 36. Sharing & editing with other UX designers in Figma
Moodboard - High Fidelity
- 37. How I get inspiration for UX projects
- 38. How to create a moodboard in Figma FREE
- 39. Class Project 06 - Moodboard
Columns
- 40. How to work with Columns & Grids in Figma
- 41. Quiz question 7
- 42. Quiz question 8
Tips & Tricks
- 43. Tips, Tricks, Preferences, and Weirdness in Figma
Colors
- 44. Color Inspiration & the eyedropper in Figma
- 45. How to create a color palette in Figma
- 46. How to make gradients in Figma
- 47. How to create & use Color Styles in Figma
- 48. Quiz question 9
- 49. Class Project 07 - Colors & Columns
Text & Fonts Advanced
- 50. Fonts on Desktop vs in Browser in Figma
- 51. What fonts can I use? Plus font pairing in Figma FREE
- 52. What common font sizes should I choose in web design?
- 53. How to make Character Styles in Figma
- 54. Lorem ipsum & placeholder text in Figma
- 55. Useful things to know about text in Figma
- 56. How to fix missing fonts in Figma FREE
- 57. Class Project 08 - Text
- 58. Quiz question 10
- 59. Quiz question 11
Drawing
- 60. Drawing tips and tricks in Figma
- 61. Squircle buttons with iOS rounded courses in Figma
- 62. Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma
- 63. What is the difference? Union vs Flatten in Figma
- 64. Quiz question 12
- 65. Quiz question 13
- 66. Class Project 09 - Making stuff
- 67. Smart Selection & Tidy up in Figma
Working with Illustrator
- 68. Do I need to know Illustrator with Figma?
Images
- 69. Tips & tricks for using images in Figma
- 70. Masking & cropping images in Figma
- 71. Free images & plugins for Figma
Working with Photoshop
- 72. Do you need Photoshop for UX design in Figma? FREE
- 73. Class Project 10 - Images
Autolayout & Constraints
- 74. What is Autolayout & expanding buttons in Figma?
- 75. Quiz question 14
- 76. Quiz question 15
- 77. Class Project 11 - Buttons
- 78. Auto Layout for spacing
- 79. Quiz question 16
- 80. How to use constraints in Figma
- 81. Quiz question 17
- 82. Combining Nested frames Auto Layout & Constraints in Figma
- 83. Adding Text Box Autoheight to Autolayout in Figma
- 84. Class Project 12 - Responsive Design
- 85. Nice drop shadow & inner drop shadow effects in Figma
Effects
- 86. Quiz question 18
- 87. Blur Layer, Background Blur & Image Blur in Figma
- 88. Quiz question 19
- 89. How to make Neumorphic UI buttons in Figma FREE
- 90. Class Project 13 - Effects
Saving & History
- 91. How to save locally & save history in Figma
Components & Instances
- 92. What are components in Figma?
- 93. Quiz question 20
- 94. Quiz question 21
- 95. Updating, Changing & Resetting your components
- 96. Quiz question 22
- 97. You can’t kill main components in Figma
- 98. Where should you keep your main components in Figma
- 99. Intro to the forward slash / naming convention in Figma
- 100. Quiz question 23
- 101. Class Project 14 - Components
Variants
- 102. How to make component variants in Figma FREE
- 103. Quiz question 24
- 104. Another way to make variables in Figma
- 105. How to make a Multi Dimensional Variant in Figma
- 106. Class Project 15 - Variants
Making a form
- 107. How to make a form using variants in Figma
- 108. Class Project 16 - Form
- 109. Putting it all together in a desktop example
Prototyping - Level 2
- 110. How to add a popup overlay modal in Figma FREE
- 111. How to make & prototype a tool tip in Figma
- 112. What are Flows in Figma?
- 113. Quiz question 25
- 114. Slide in mobile nav menu overlay in Figma
- 115. Class Project 17 - Prototyping
- 116. How to pin navigation to the top in Figma
- 117. How to make a horizontal scrolling swipe in Figma
- 118. Quiz question 26
- 119. Automatic scroll down the page to anchor point in Figma
Teams & Projects
- 120. What are Teams vs Projects vs Files in Figma?
Libraries
- 121. How do you use team libraries in Figma
- 122. Quiz question 27
Animation & Micro Interactions
- 123. The difference between animation & micro interactions
- 124. Animation with custom easing in Figma
- 125. Class Project 18 - My Second Animation
- 126. How to make animated transitions in Figma
- 127. Quiz question 28
- 128. Class Project 19 - Page transition
- 129. Micro interactions using interactive components in Figma
- 130. Micro interaction toggle switch in Figma
- 131. Micro interaction burger menu turned into a cross in Figma
- 132. Class Project 20 - Micro interaction
Thumbnail update
- 133. How to change the thumbnail for Figma Files
Exporting
- 134. How to export images out of Figma
- 135. Quiz question 29
- 136. How to share your document with clients & stakeholders
- 137. Talking to your developer early in the Figma design process
- 138. Sharing Figma with developers & engineers handoff
- 139. What are the next level handoffs aka design systems
- 140. Class Project 21 - Finish your design FREE
- 141. How to request your certificate FREE
What next
- 142. What next? FREE

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

No transcription available for this video.

Powered by instructorHQ v4
Terms of use Privacy policy
© Bring your Own Laptop Ltd 2024