Ooops
You need a subscription to BYOL.com to view the knowledge quiz on this course.
Sign upAlready a member? Login here
Figma UI UX Design Essentials
When making a button height ‘stretchy’, aka fill container, what do you need to remember to do?
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
-
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
- Prototyping - Level 1
- Animation Level 1
- Commenting
- Moodboard - High Fidelity
- Columns
- Tips & Tricks
- Colors
-
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
- Images
- Working with Photoshop
-
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
- Saving & History
-
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
- Making a form
-
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
- Libraries
-
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
-
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
Ooops
You need a subscription to BYOL.com to view the knowledge quiz on this course.
Sign upAlready a member? Login here
-
Contact Us - Group memberships
- Bio
- FAQ
- All Courses
- Resources
- Powered by instructorHQ v4
- Terms of use Privacy policy
- © Bring your Own Laptop Ltd 2024