[VIP] Figma UI UX Design Essentials
We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer. This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step.
Hi there - my name is Dan Scott & welcome to Figma Essentials.
Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.
We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer.
This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step.
-
First we’ll describe the brief & how to work with a UX persona.
-
Then you’ll learn how to create simple wireframes.
-
From there we’ll look at how to implement colours & images properly in your designs.
-
You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps.
-
You’ll learn how to create your own icons, buttons & other UI components.
-
You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how.
-
We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!
-
We’ll build a simple Style Guide ready for client handoff.
-
You’ll understand how to make both simple & advanced micro interactions, page transitions & animations
Before the end of this course you will have made fully interactive prototypes
You will take a project all the way through - collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer.
We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.
I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio.
Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.
Who this course is for:
- Anyone who wants to start using Figma in their career & get paid for their user experience design skills.
- This course is for beginners, newbies & amateurs in the field of UX design.
- Aimed at people new to the world of design & user experience.
- For anyone that needs to add ‘UX Design’ to their portfolio.
- Anyone who wants to learn the essentials of UI & UX Design.
- Getting Started
- 1. Introduction to Figma Essentials training course
- 2. Getting started with Figma training
- 3. How to earn your certificate
- 4. What is Figma for & does it do the coding?
- 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. Scale vs Selection Tool in Figma
- 16. Frames vs Groups in Figma
- 17. Class Project 02 - Wireframe
- 18. Where to get Free icons for Figma
- 19. Matching the stroke of our icons
- 20. How to use Plugins in Figma for icons
- 21. Class Project 03 - Icons
- Prototyping - Level 1
- Animation Level 1
- Commenting
- Moodboard - High Fidelity
- Tips & Tricks
- Colors
- Text & Fonts Advanced
- 41. Fonts on Desktop vs in Browser in Figma
- 42. What fonts can I use? Plus font pairing in Figma
- 43. What common font sizes should I choose in web design?
- 44. How to make Character Styles in Figma
- 45. Lorem ipsum & placeholder text in Figma
- 46. Useful things to know about text in Figma
- 47. How to fix missing fonts in Figma
- 48. Class Project 08 - Text
- Drawing
- Working with Illustrator
- Images
- Working with Photoshop
- Autolayout & Constraints
- 61. What is Autolayout & expanding buttons in Figma?
- 62. Class Project 11 - Buttons
- 63. Auto Layout for spacing
- 64. How to use constraints in Figma
- 65. Combining Nested frames Auto Layout & Constraints in Figma
- 66. Adding Text Box Autoheight to Autolayout in Figma
- 67. Class Project 12 - Responsive Design
- 68. Nice drop shadow & inner drop shadow effects in Figma
- Effects
- Saving & History
- Components & Instances
- Variants & Variables
- Making a form
- Prototyping - Level 2
- 86. How to add a popup overlay modal in Figma
- 87. How to make & prototype a tool tip in Figma
- 88. What are Flows in Figma?
- 89. Slide in mobile nav menu overlay in Figma
- 90. Class Project 17 - Prototyping
- 91. How to pin navigation to the top in Figma
- 92. How to make a horizontal scrolling swipe in Figma
- 93. Automatic scroll down the page to anchor point in Figma
- Teams & Projects
- Animation & Micro Interactions
- 96. The difference between animation & micro interactions
- 97. Animation with custom easing in Figma
- 98. Class Project 18 - My Second Animation
- 99. How to make animated transitions in Figma
- 100. Class Project 19 - Page transition
- 101. Micro interactions using interactive components in Figma
- 102. Micro interaction toggle switch in Figma
- 103. Micro interaction burger menu turned into a cross in Figma
- 104. Class Project 20 - Micro interaction
- Thumbnail update
- Exporting
- 106. How to export images out of Figma
- 107. How to share your document with clients & stakeholders
- 108. Talking to your developer early in the Figma design process
- 109. Sharing Figma with developers & engineers handoff
- 110. What are the next level handoffs aka design systems
- 111. Class Project 21 - Finish your design
- 112. How to request your certificate
- 113. What next?
What's Your Reaction?