Top 8 Recommended Figma Self-Study Materials! [November 2024]

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.

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

Hi there, aspiring Figma enthusiasts! Are you ready to embark on an exhilarating journey with me, Dan Scott, as we unlock the full potential of our Figma skills in the dazzling realm of UX/UI Design using Figma Advanced?

This course is tailor-made for those who have already mastered the fundamental principles of UI/UX Design using Figma. If you've triumphed over my Figma Essentials course or have a sneaking suspicion that there's a treasure trove of unexplored tools, tips, workflows, and updates awaiting your discovery, then look no further! This course is your golden ticket to taking your UI/UX prowess to the next level.

Together, we'll start by delving into the depths of multilevel nested autolayouts, and unravel the secrets used by UX professionals by learning:

• Workflow techniques, managing design assets, styles, components, grid and column layouts like true virtuosos.

• Learn how to use Variables and put them to work creating even more complete prototypes.

• Use variables to make Light & Dark Modes + Compact & Comfortable spacing versions of your components.

• You’ll then take your new knowledge of variables to understand and create your own Design Tokens.

• Unleashing the magic of advanced animation techniques, captivating users with animated background gradients and Houdini Text.

• Harness the power of Lottie animation files, breathing life into your designs.

• Crafting responsive elements that effortlessly adapt to any device, proving your design prowess knows no bounds.

• Unleashing the full potential of powerful images & video masking techniques, amplifying the visual impact of your creations.

• Mastering advanced typography features, transforming words into captivating works of art.

• Embracing the realm of AI, infusing your process with its genius to elevate your skills as a UX designer.

• Elevate your prototyping game, conducting user tests with finesse using advanced techniques.

• Unveiling sticky scroll buttons that stack, animated anchor points and booleans, and a host of other captivating effects.

• Creating enchanting dropdown menus, hover grow effects for images, and expanding search bars.

• Discovering the right accessibility tools & techniques, ensuring inclusivity and usability for all users.

• Becoming a variant boss, expertly taming unwieldy variants to just 1 or 2.

• Unveiling the secrets of seamless collaboration with designers, developers, and stakeholders.

• Mastering the art of exporting production-ready assets, bringing your designs to life beyond the realm of Figma.

• Unearthing professional workflow tricks & shortcuts, saving you precious time and skyrocketing your efficiency.

• Plus much more exciting advanced Figma goodness along the way!

As you journey through this course, you'll acquire the skills wielded by UX professionals, gaining a profound understanding of the UX Design industry. From concept to a highly polished finish, you'll confidently manage your own UX projects ideal for your portfolio.

Throughout the course, I'll assign assignments and projects that nurture your skills and empower you to create your very own unique UX design masterpiece for your portfolio. Don’t worry if this all seems overwhelmingly advanced right now, because the BYOL crew stands ready to support and guide you, ensuring your questions get answered.

It's time to embrace the call to upgrade yourself and transcend from being a good UX Designer to a bona fide Figma UX Superhero! Unlock your potential, save the day, and let your design prowess soar!

Requirements

• A copy of Figma (a free plan is available on the Figma website).

• Basic knowledge of Figma is required. I recommend watching my Figma Essentials course prior to embarking on this epic adventure.

Who this course is for:

• UX/UI adventurers who already have a basic understanding of Figma..

• Self-taught Figma enthusiasts yearning for structured guidance.

• Graduates of my Figma Essentials Course, hungry for more knowledge and skills.

• Visionaries who have developed their own unique Figma approach but crave exploration of the vast universe of tools, updates, and time-saving techniques.

1. Introduction
2. Intro to the Figma Advanced Course
3. Getting Started in Figma Advanced Course
4. Auto Layout - Level 1
5. Auto Layout & Responsive Design 101: It's use in responsive design
6. Designing in Figma with Auto Spacing in Auto Layouts
7. When and when not to use Components in Figma
8. What is good spacing to use in Figma
9. What spacing should I use for web & app design in Figma
10. Auto Layout vs Constraints in Figma
11. Autolayout shortcuts: Tips and tricks to work with Auto Layout faster
12. Class Project 01 - Responsive Lower Navigation
13. Class project 01 - Responsive Lower Navigation
14. Advanced Workflow Tricks
15. How to handle files in Figma and become a File Handling Master
16. How to use advanced Copy, Paste, and Selection Tricks in Figma?
17. How to do crazy things with your Figma fields?
18. Frame Tricks: Tips and Tricks to work with Figma frames effectively
19. Advanced Zooming Techniques for precision work in Figma
20. Light or Dark vs System Theme: Which one to use in Figma?
21. Class Project 02 - Event Card Constraints
22. Class project 02 - Event Card Constraints
23. Class Project 02 - Event Card Constraints - Completed
24. Grids
25. Grid v Constraints v Autolayout in Figma: Which one to use and when?
26. How to copy & paste grids and export grid styles in Figma
27. How to add rows and column grids to one layout in Figma
28. How to update Grid Styles in Figma
29. Grids inside of frames that aren't the main frame
30. Simple App Brand
31. Class project 03 - Event Branding
32. Class project 03 - Event Branding
33. Logos using Iconscout: How to use Iconscout to create logos in Figma?
34. What are widget compared to plugins in Figma?
35. How to create ux color variants using a Figma Widget ?
36. Nested & Responsive Auto layouts
37. Intro to Nested & Responsive Auto layouts Section
38. Production video - Tidying up my frame & component mess
39. Bring in images using the unsplash plugin in Figma
40. Production video - Making the parts for our nested autolayout
41. Nesting Multiple Auto Layouts inside each other in Figma
42. Autolayout Nesting with variants and responsive text in Figma
43. Auto Layout on different device sizes- How to make advanced Auto Layouts
44. Responsive text that adjusts for 2 lines in Figma
45. Animation - Level 1
46. Abstract Gradient Background in Figma the easy way
47. How to copy and paste Interactions in Figma
48. How to animate gradient mesh using Variants in Figma
49. How to give feedback on a UX project - The Critique Sandwich
50. Class project 04 - Background Animation
51. Class project 04 - Background Animation
52. Houdini Text: How to make a text mask animation Figma?
53. How to use the Spring Animations in Figma
54. Spring Animation: How to make custom Spring Animation in Figma
55. Why is interaction on tap on click grayed out of missing in Figma?
56. Class project 05 - Houdini Text Animation
57. Class project 05 - Houdini Text Animation
58. Prototyping - Level 1
59. Create & remove bulk multiple noodles wires at once in Figma
60. How to bulk update nav links in your Figma prototype
61. How to set the right phone and find old prototype phones in Figma
62. How to make sticky scroll position search bar in Figma
63. How to stack multiple sticky text vertical scrolling in Figma
64. Class project 06 - Multiple Sticky Headings
65. Class project 06 - Multiple Sticky Headings
66. How to make Interactive Components in Figma
67. How to make a checkmark turn on and off in Figma
68. Interactive components with sliding button in navigation for Figma
69. Class project 07 - Sliding Button Nav Challenge
70. Class project 07 - Sliding Button Nav Challenge
71. Class project 07 - Completed
72. How to use Sections in Figma for organizing your content
73. How to use sections for prototyping in Figma
74. How to add iOS battery wifi notch status bar to Figma
75. How to add iOS or Android Snack Bar UI to Figma
76. Class project 08 - Operating System UI
77. Class project 08 - Operating System UI
78. Be careful what you create in Figma
79. Advanced Layers
80. What are the advanced Layer shortcuts in Figma
81. How to find layer Zen shortcuts in Figma
82. How to hide and lock unlock all layers in Figma
83. How to use Locked layers in Figma
84. How to Find Replace and Multi-select Layer Search in Figma
85. How to Bulk Rename Layers with advanced tricks in Figma
86. Components & Variants - Level 1
87. How to replace instances and variants with shortcuts in Figma
88. How to use Instance Swap Component Properties with preferred in Figma
89. How to use Component Text Property in Figma
90. How to use Boolean Component Property in Figma
91. How to make a input field using only component properties in Figma
92. How to Combine Variants with Component Properties in Figma
93. How to apply component properties to existing design systems
94. What is Simplify Instances in Figma
95. What does Expose Nested Instances do in Figma
96. Class project 09 - One button to rule them all
97. Class project 09 - One button to rule them all
98. Typography
99. What are some font tips and tricks in Figma
100. How to see Live Font Previews in Figma
101. How reset fonts & set default fonts in Figma
102. How to Use Line Height Percentage in 8pt grid in Figma
103. How to use Leading trim to cap height to baseline in Figma
104. How to set Hanging Punctuation for pull quotes & call outs in Figma
105. What are the Advanced Type Options in Figma
106. How to use Variable Type in UX app design in Figma
107. How to curve text with type on a path in Figma
108. How to use adobe fonts & local fonts in Figma
109. How to Preserve text overrides or not in Figma variant
110. How to use Chat GPT AI to create placeholder and personas in Figma
111. Imagery
112. How to create an image style in Figma
113. What's the difference with Images inside frames vs fills vs Masked in Figma
114. How to crop images using shortcuts in Figma
115. How to mask images with text in Figma
116. Class Project 10 - Text Mask
117. Class project 10 - Text Mask
118. How to mask using transparent pngs with alpha channels in Figma
119. Class Project 11 - Alpha Mask
120. Class project 11 - Alpha Mask
121. How to create a luma mask in Figma
122. Class project 12 - Luma Mask
123. Class project 12 - Luma Mask
124. How to make a spillover mask outside of the frame in Figma
125. How to use the pen tool to make image masks in Figma
126. How to use color layer blending modes in Figma
127. Class project 13 - Social Ad
128. Class project 13 - Social Media Ad
129. Video
130. How to add video in Figma
131. How to make a background autoplay video in Figma
132. How to get a video play when you hover in Figma
133. Class project 14 - Hover Play
134. Class project 14 - Hover Play
135. How to make a play pause button for video in Figma
136. How to build a video card in Figma
137. Class project 15 - Video Card
138. Class project 15 - Video Card
139. Color
140. What are some advanced color tricks in figma
141. How to change replace colors in Figma
142. How to create Color Themes for light and dark in Figma
143. Styles & Libraries
144. How to group color styles using slashes or folders in Figma
145. How to descriptions to your styles in Figma for others to use
146. Editing someone else's styles or component library in Figma
147. How to hide color font styles & components from team library in Figma
148. How to compare changes in component with overlay in Figma
149. How to refactoring styles to another design file in Figma
150. How to move relink refactoring components to another design file in Figma
151. How to swap parts or entire component & style library in Figma
152. Drawing, Stroke & Fill
153. What are some advanced drawing tips and tricks in figma
154. How to draw in Figma with the pen tool- Anchor point mastery
155. How to draw with Bend & Mirror angle in Figma
156. Can you animated anchor points or booleans in Figma
157. How to animate a mobile nav menu in Figma using a dip
158. Class project 16 - Alt Nav Animation
159. Class project 16 - Alt Nav Animation
160. Auto Layout - Level 2
161. How to overlap & stack things in a Figma Autolayout
162. What are the shortcuts for hug & fill in Figma
163. How to set absolute spacing so things ignore Autolayout in Figma
164. How to absolute position something that is responsive in Figma
165. How stick things to the bottom right of an auto layout in Figma
166. How to resize a box automatically in a Auto Layout to match text in Figma
167. What are the autolayout padding and resizing shortcuts
168. How to create a minimum width height button in Figma
169. How to wrap auto layout objects in Figma
170. What does stroke included excluded mean in Figma auto layout
171. How to set custom spacing in auto layouts in Figma
172. Components & Variants - Level 2
173. How to organize Components into groups in Figma
174. How to create slot placehold components in Figma
175. How to convert an existing website into a figma design
176. Prototyping - Level 2
177. How to make a drop down using overlays in Figma
178. How to make a multi level drop down menu in Figma
179. Class project 17 - Nested Dropdown Menu
180. Class project 17 - Nested Dropdown Menu
181. How to create a hover grow effect for images in Figma
182. Class project 18 - Hover Grow Effect
183. Class project 18 - Hover Grow Effect
184. How to make an expanding Search Bar in Figma
185. Class project 19 - Expanding Search Bar
186. Class project 19 - Expanding Search Bar
187. Variables
188. What are Variables in Figma
189. How to create cart total using number variables in Figma
190. How to add add conditions to variables in Figma
191. Variant change using Boolean variable - change cart color
192. Turning our boolean variable to false in Figma
193. Making a Overlay Popup in the Variable action panel in Figma
194. Light and Dark Modes using Collections & Color Variables in Figma
195. How to change spacing with number Variables in Figma
196. Design Tokens
197. What are Design Tokens in Figma
198. How to create Design Tokens in Figma
199. Creating spacing & radius design tokens in Figma
200. When would you use design tokens in Figma

Figma is a web-based design tool that enables users to create interactive, collaborative designs. You can use it to do all kinds of graphic design work, from wireframing websites, designing mobile app interfaces, prototyping designs, crafting social media posts, and everything in between. Figma works directly in your browser. This means you can access your projects and start designing from any computer or platform without having to buy multiple licenses or install software. What makes it so attractive is the fact that it’s free to use.

If you’re still not familiar with this wondering web-based app, you’ve come to the right place. You will learn through recorded lessons, practical exercises, and tips by UI & UX Designer Željko Milivojević, reviewing content at your own pace.

You will go through the process of creating your design project in Figma from start to finish, covering both website and mobile app designs. You are also going to manage your portfolio and set it up to get more clients and proposals. The course instructor will go over all the small details that can really make a difference, but most people don't mention them. There is a lot to learn along the way, so we would love to take you on this journey.

In this Figma course, you will learn how to:

• Use Figma to assist with your design projects

• Understand both website and mobile app structures and learn from them

• How websites are structured and how you can learn from it

• Automate your workflow in Figma

• Make responsive web and mobile views in Figma

• Create a working design system that helps you finish your Figma project easily

• Create wireframes and import them into Figma

• Build flows for mobile and web wireframes

• Proper structure for the projects

• Create prototypes with interactive animations in Figma

• Use knowledge to complete a client’s project

• Optimize your portfolio and start getting clients by making Figma designs

Why should you choose this Figma course?

1. Figma gives you universal design skills.

2. You will learn how to create in Figma from experienced designer Željko Milivojević.

3. Željko Milivojević is UI & UX Designer focused on mobile and web design and brand identity with 8 years of experience in the design industry.

4. You will design your first website from start to finish!

5. Study anywhere, anytime, at your own pace.

6. This course is suitable for both beginners and experienced users.

7. The course comes with in-depth videos, important tips, and additional useful links.

What else do you get?

• course checklist

• lifetime access to the course and its updates

• structured step-by-step lessons and practical exercises

• additional folders and files that contain assets that the instructor used for the website and mobile app creation in lessons

• a certificate from Udemy upon completion of the course
  

  
  

Enroll now!

Want to start now? Click the "Buy now" button and learn how to use Figma to assist with your design projects!

1. Getting Started
2. Introduction to the Course
3. Software Usage
4. Web Structure
5. How Websites Work
6. Box Elements
7. Website Sections
8. Modern Trends
9. Into the Figma
10. Main Screen
11. Community Tab
12. Creating the First Project
13. Explore first Canvas
14. Tools in Action
15. Basic Shapes
16. Properties of Object
17. Useful Shortcuts
18. Frames and Groups
19. Typography
20. Playing with Pictures
21. SVG files
22. Exercise 1
23. Auto Layout
24. What is the Auto Layout
25. Auto Layout Tools
26. Creating the First Component
27. Exercise 2
28. Exercise 3
29. Preparing for the Project
30. Examples of Real Projects
31. Moodboard
32. Colors Psychology and Usage
33. Choosing Typeface
34. Wireframes
35. Visual Workspace
36. Exploring the Space
37. Developing First Sections
38. Web View
39. Mobile View
40. Exporting the Wireframes
41. Starting the Project
42. What is a Design System
43. 4pt Grid System
44. How to Import Your Icon Design System
45. First Element
46. Setting up the First Frame
47. What is Navigation Panel?
48. Creating Hero Section
49. First Page
50. Creating Web View
51. Creating Mobile View
52. Advanced Prototyping
53. How to Create Advanced Prototypes With ProtoPie and Figma
54. After the Design
55. Project Prototyping
56. Finishing Touches
57. Sending a Project to a Client
58. How to do Reviews with a Client
59. Mobile App Design
60. Creating the project
61. Design system
62. Wireframes - Part 1
63. Wireframes - Part 2
64. Wireframes flow
65. Final Design - Part 1
66. Final Design - Part 2
67. Final Design - Part 3
68. Final Design - Part 4
69. Prototype & Animations
70. Portfolio Management
71. Why is it Important?
72. Where to Present Your Project?
73. How to Present Your Work?
74. Final Message
75. BONUS
76. Bonus Lecture

Getting Started with Figma (4h) + Course Project

A beginner's to pro course in UI design with Figma

NEW! Full Config 2024 Update Featuring the New Figma UI Design!

This course is a comprehensive introduction to Figma from absolute beginner to advanced features. Short and focused, providing you with all you need to know to tackle any design.

We'll start from scratch by setting up your Figma account and familiarising ourselves with its file structure. Then, we'll dive into the fundamentals of Figma, such as setting up frames and nesting them, adding shapes, text, colours, and grids creating solid UI designs. Once you're comfortable with the basics, we dive into more advanced subjects like creating solid UI designs and working with components for reusable elements.

You'll learn how to establish styles and variables for consistency, create responsive designs with auto layout, and add basic prototyping to bring your designs to life—always keeping collaboration with development in mind.

With step-by-step exercises and valuable tips and tricks, you'll become proficient in Figma in under 4 hours. It's perfect for beginners or those transitioning from other design software.

Setup

1. What Is Figma? Who does the coding?

2. Figma in the Browser vs. Figma App

3. The Figma file browser – Figma's home

4. Creating design files in Figma

Figma Basics

1. Adding frames to our file

2. A few handy shortcuts

3. Design file overview

4. Adding shapes and colour

5. Size menu – manipulating shapes and frames

6. Align, tidy up, and measure

7. Adding and working with text

8. Nesting frames – The Figma superpower

9. Frames vs Groups

10. Designing with nested frames

11. Re-usable grids with styles

12. Figma Community and Plugins

13. Adding images

14. Drawing in Figma

15. Scaling in Figma

16. Course Project: Creating a wireframe and first design

Introducing Components

1. Re-use elements with components and instances

2. Overriding instances

3. What to override and what not to

4. Reverting components and overrides

5. Nest components

6. Component sets with variants

7. Move components to their own page

8. Keeping components organised

9. Advanced component features introduction.

10. Course Project: Turning our design into components

Variables and Styles

1. Introduction to variables

2. Working with colour variables

3. Organising with variable collections and groups

4. Size and spacing variables

5. And what about styles?

6. Typography and styles

7. Documenting variables and styles

8. Course Project: Adding colour variables and text styles

Responsive Design

1. What is auto layout?

2. Adding auto layout

3. Auto layout components and variables

4. Resize settings

5. Auto or space between

6. Nesting auto layout with system

7. Absolute positioning

8. Auto layout pages

9. Constraints in Figma

10. Constraints and grids

11. Course Project: Testing our app on different phone sizes

Basic Prototyping

1. Prototyping in Figma

2. Setting scroll behaviour

3. Connecting screens

4. Dropdown menu with overlays

5. Animation types

6. Interactive components

7. Figma Mirror – Preview on your device

8. Course Project: Turning our app into a clickable prototype

Sharing with other designers and developers

1. Sharing and inviting others

2. Setting up a thumbnail

3. Shared team libraries in Figma

4. Setting up a shared team library

5. Connecting to a shared team library

6. Updating shared team libraries

7. Sharing design, components, styles, and variables

8. Dev mode: Sharing with development

This is a course idea and production by moonlearning

1. Welcome
2. Promo
3. What is Figma and who does the coding?
4. Get the Figma working file!!!
5. Download the Figma working file here!
6. Setup
7. Figma in the Browser vs. Figma App
8. The Figma file browser – Figma's home
9. Creating design files in Figma
10. Figma Basics
11. Make sure you have your file ready!
12. Adding frames to our file
13. A few handy shortcuts
14. Design file overview
15. Adding shapes and colour
16. Size menu – manipulating shapes and frames
17. Align, tidy up, and measure
18. Adding and working with text
19. Nesting frames – The Figma superpower
20. Frames vs Groups
21. Designing with nested frames
22. Re-usable grids with styles
23. Figma Community and Plugins
24. Adding images
25. A little favour
26. Duplicating
27. Drawing in Figma
28. Scaling in Figma
29. COURSE PROJECT Introduction
30. A word on the changing UI
31. COURSE PROJECT Part 1.1: making our wireframe
32. COURSE PROJECT Part 1.2: Wireframe to design
33. Introducing Components
34. Re-use elements with components and instances
35. Make sure you have your file ready!
36. Overriding instances
37. What to override and what not to
38. Reverting components and overrides
39. Nesting components
40. Component sets with variants
41. Move components to their own page
42. Keeping components organised
43. A word on the new UI
44. COURSE PROJECT Part 2: Turning our design into components
45. Variables and Styles
46. Introduction to variables
47. Make sure you have your file ready!
48. Working with color variables
49. Organising with variable collections and groups
50. Size and spacing variables
51. And what about styles?
52. Typography and styles
53. Documenting variables and styles
54. COURSE PROJECT Part 3.1: Adding colour variables
55. COURSE PROJECT Part 3.2: Adding Text Styles
56. Responsive Design
57. What is auto layout?
58. Make sure you have your file ready!
59. Setting up auto layout frames
60. Auto layout components and variables
61. Resize settings: Responsive Cards
62. Auto or space between
63. Nesting auto layout and understanding the parent-child relationship
64. Automating auto layout with suggest auto layout
65. Ignore auto layout
66. Auto layout pages
67. Constraints in Figma
68. Constraints and grids
69. Which frame size should I use?
70. COURSE PROJECT Part 4: Making our design responsive
71. Basic Prototyping
72. Prototyping in Figma
73. Make sure you have your file ready!
74. Setting scroll behaviour
75. Connecting screens
76. Dropdown menu with overlays
77. Animation types
78. Interactive components
79. Figma Mirror – Preview on your device
80. COURSE PROJECT Part 5: Turning our design into a prototype
81. Sharing with other designers and developers
82. Sharing and inviting others
83. Setting up a thumbnail
84. Shared team libraries intro
85. Figma team library set up
86. Moving components to libraries
87. Sharing design, components, styles, and variables
88. Dev mode: Sharing with development
89. Extra: Demystifying Resolution, Points & Pixels
90. Points Pixel and Screen Resolution
91. Why We Design at 1x
92. Getting Best Results on All Resolutions
93. Summary
94. Pick Mix and Match Colours Like a Pro
95. 60 30 10 Rule of Colour Distribution
96. Archive old course
97. Link to previous course content
98. Before you go
99. Thank you!

Just updated with all modern Design tools and best practices! Join a live online community of over 900,000+ students and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto for top companies. A great Designer is becoming harder and harder to find and it isn't rare to find designers make $160,000+ salaries now because it is such a valuable skill. We will teach you how to get there!

Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently getting you from zero to a point where you can get hired or win freelance contracts. We will use in demand tools like Figma to show you a full workflow from start to finish. Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies.

The course also includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects. We guarantee you this is the most comprehensive online resource on Design skills!

The curriculum is going to be very hands on as we walk you from start to finish of working as a Designer, all the way into learning how to create final professional designs and then converting them into actual websites or apps using HTML and CSS. 

The topics covered in the course are...

• 00 Web & Mobile Design Principles +  Design vs Web Development

  
  

• 01 GETTING STARTED – Sketching, Inspiration + Structure

  • 1. Sketching

    • Introduction To Sketching

    • The Sketching Process

    • Sketching User Flows

    • Sketching Tips

  • 2. Inspiration

    • How to stay inspired

    • How to find inspiration online

  • 3. Figma Basics

    • Plans and Signup

    • Where to Use Figma

    • Figma UI — Structure

    • Figma UI — Files

    • Figma UI — Toolbar

    • Figma UI — Left Sidebar

    • Figma UI — Right Sidebar

    • Shapes and Tools — Frames

    • Shapes and Tools — Groups

    • Shapes and Tools — Basic Shapes and Boolean Operations

    • Designing in Figma — Images

    • Designing in Figma — Getting Started with Text

    • Designing in Figma — Constraints

    • Designing in Figma — Using Auto Layout

    • Designing in Figma — Auto Layout Properties

    • Resources and Collaboration — Community Files

    • Resources and Collaboration — Community Plugins

    • Resources and Collaboration — Sharing and Comments]

    • Project — Creating a Logo Using Basic Shapes

    • Project — Auto Layout Buttons

    • Project — Creating a Responsive Navigation

    • Project — Responsive Text

    • Project — Imagery and Gradients

    • Project — Strokes and Shapes

    • Project — Layout and Responsiveness

  • 3. User Flows

    • Getting Ready For This Section

    • The DOs and DON'Ts

    • User Flows in Figma — Onboarding

    • User Flows in Figma — Search

  • 4. Sitemaps

    • Introduction To Sitemaps

    • Creating A Basic Sitemap

    • Reusable Sitemap Assets

    • Figma Check In — Basic Components and Variants

    • Sitemaps in Figma — The Top Layer

    • Sitemaps in Figma — Digging Deeper

    • Tips for Creating Great Sitemaps

  
  

• 02 EXPLORE AND ITERATE – Wireframes, Prototyping and Feedback

  • 1. Wireframes

    • What Is A Wireframe?

    • How To Create A Wireframe

    • Figma Check In — Basic Button Component]

    • Figma Check In — Variants

    • How to Use Our Wireframe Components

    • Wireframes — Home

    • Wireframes — Cart

    • Wireframes — Profile

  • 2. Prototyping

    • Figma Check In — Prototyping in Figma

    • Prototyping in Figma — Flows and Starting Points

    • Prototyping in Figma — Connections

    • Prototyping in Figma — Interactions

    • Prototyping in Figma — Animations

    • Prototyping in Figma — Prototype Settings

    • Prototyping in Figma — Prototype Presentation

    • Project — Navigation

    • Project — Removing an Item from Your Wishlist

    • Project — Finding a Product

  • 3. Getting feedback

    • Why Is Feedback Important?

    • Constructive Feedback

  
  

• 03 VISUAL DESIGN – Design Theory + Accessibility

  • 1. Spacing and Grids

    • What Is A Grid?

    • Grid Basics

    • Figma Check In — Fixed and Fluid Grids

    • Figma Check In — Breakpoints

    • Figma Check In — Grid Style

    • Project — Mobile Layout Grid

    • Project — Desktop Layout Grids

    • Simple Rules to Follow

  • 2. Typography

    • Serifs

    • Sans Serifs

    • Display & Mono

    • Picking Typefaces

    • Figma Check In — Text Properties

    • Exercise — Elevating a Brand

    • Exercise — Typeface Scenarios

    • Exercise — Google Fonts

    • Project — Typeface Exploration

    • Project — Pairing Font Families

    • Project — Headings, Body and Labels

    • Project — Typeface System

    • Figma Check In — Text Styles

  • 3. Color

    • Color Schemes

    • Important Questions To Ask

    • Creating Color Palettes

    • Figma Check In — Paints

    • Exercise — Expanding Upon a Strict Color Palette

    • Exercise — Creating a Color Palette

    • Figma Check In — Color Styles

    • Exercise — Using Color Styles

    • Project — Primary and Neutrals

    • Project — Accents

  • 4. Imagery and Iconography

    • Visual Assets Introduction

    • Figma Check In — Image Plugins

    • Figma Check In — Image Styles

    • Figma Check In — Masks

    • Exercise — Image Exploration

    • Exercise — Text and Imagery Working Together

    • Figma Check In — Illustration Plugins

    • Exercise — Adding illustrations to your designs

    • Figma Check In — Icon Plugins

    • Figma Check In — Pen Tool

    • Exercise — Custom Icons with the Pen Tool

  • 5. Forms + UI Elements

    • What Are Forms + UI Elements?

    • Best Practices — Forms

    • Best Practices — Basic and Advanced Inputs

    • Best Practices — Inputs

    • Best Practices — Buttons

    • Figma Check In — Component Properties

    • Properties vs. Variants

    • Figma Check In — Button Component Properties

    • Figma Check In — Button Variants

    • Figma Check In — Combining Components

    • Figma Check In — Form Component Possibilities

    • Project — Registration Flow

  • 6. Accessibility

    • What Is Accessibility?

    • Assistive Technologies

    • Visual Patterns For Accessibility

    • Tools To Make Your Design Accessible

  
  

• 04 DESIGN EXPLORATION – Application Design + Design Systems

  • 1. Design Patterns

    • What Are Design Patterns?

    • Why Are Design Patterns Valuable?

    • How To Apply Design Patterns

    • Analyzing Design Patterns

    • Dissecting And Choosing Design Patterns

  • 2. Mobile Design

    • Mobile Design Best Practices

  • 3. Visual Style and Exploration

    • Design Fidelity

    • Visual Exploration — Navigation

    • Visual Exploration — Buttons

    • Figma Check In — Effect Styles

    • Visual Exploration — Product Cards

    • Visual Exploration — Text Cards

    • Screen Design — Home

    • Screen Design — Product Page

  • 4. Motion and Microinteractions

    • The Importance Of Motion

    • Why Microinteractions Are Important?

    • What Is A Microinteraction?

    • Figma Check In — Intro to Smart Animate

    • Figma Check In — Smart Animate Properties

    • Exercise — Parallax

    • Exercise — New Message

    • Exercise — Overlays

    • Figma Check In — Interactive Components

    • Exercise — Interactive Buttons

    • Project — Parallax Welcome Screen

    • Project — Drag Onboarding

    • Project — Cart Overlay

    • Project — Button Microinteraction

  
  

• 05 PUTTING IT ALL TOGETHER – Using our Design System and Hi-Fi prototyping with Figma

  • 1. Design Systems

    • Foundational Styles and Components vs. Product Specific Components

    • Building Fidelity and Organizing Potential Components and Styles

    • Foundational Styles and Components

    • Components — Buttons

    • Components — Cards

    • Components — Headers

    • Components — Inputs

    • Components — List Items

    • Components — Navigation

    • Components — Misc. Elements

  • 2. Execution

    • Working Towards Our Final Designs

    • Execution — Introduction Screen

    • Execution — Onboarding Screens

    • Execution — Registration Screens

    • Execution — Home Screen

    • Execution — Wishlist Screens

    • Execution — Profile Screen

    • Execution — Cart and Checkout

    • Prototypes — Registration

    • Prototypes — Adding to Cart

    • Prototypes — Checkout

    • Prototypes — Lottie Files Plugin

    • Prototypes — Search and Filters

  
  

• 06 FROM FIGMA TO WEBSITE (take a Figma design and convert it to a live website using HTML and CSS)
  

  
  

• 07 HTML + HTML5

• 08 CSS + CSS3 - CSS Basics, CSS Grid, Flexbox, CSS Animations

  
  

• 09 PUTTING YOUR WEBSITE ONLINE

  
  

  
  

This brand new course will take you from the very basics where we talk about principles and fundamentals of graphic design, all the way to creating beautiful products, learning about UX/UI and interactions, and creating a full design process for you to use with all of your future projects and clients. We pretty much cover it all so that the next time you are in charge of designing a product you have the step by step outline and guide to work as a professional designer.

We are going to teach you the skills that will allow you to charge a lot of money for your time. Not to compete for a few dollars an hour on some random freelancing websites. The goal is to give you the skills of a top designer, and along the way, we are going to design an actual product for a company that you will be able to add to your portfolio.

This course is not about making you just watch along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial. No! This course will push you and challenge you to go from an absolute beginner to someone that is a top Designer that can get hired! Design is a valuable skill that doesn’t get outdated easily like most technical skills. Trends change, but the skills and fundamentals you learn in this course will take you many years into the future.

This course is for you if:
- You are a complete beginner looking to become a designer and freelance

- You are a designer who is looking to charge more for your work

- You are a developer who is looking to improve their design skills

Taught By:

Andrei is the instructor of the highest rated Development courses on Udemy as well as one of the fastest growing. His graduates have moved on to work for some of the biggest tech companies around the world like Apple, Google, Tesla, Amazon, JP Morgan, IBM, UNIQLO etc... He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life.

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time. Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities.

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way.

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.

Daniel is a design leader in tech with extensive experience in helping startups build and iterate on their products. Daniel is passionate about teaching and empowering designers and working with other disciplines to build purposeful products that meet both user and business goals.

His approach to design is always thoughtful and iterative. Daniel often finds himself working collaboratively with his team whether that is sketching concepts and flows or leading design strategy with team leads and external stakeholders.

Daniel is a multi faceted designer who’s expertise expands across multiple design disciplines. This includes User Experience and Visual Design, User Research, Product Strategy, Lean and Agile Design Methodologies and much more. HIs work has helped to shape different solutions for a variety of industries such as housing, blockchain and health.

When he is not building products, Daniel has spoke and mentored at different meetups and events. He aims to give back to the design community that he has learnt and continues to learn so much from. Daniel aims to always help, teach and support other designers in their careers.

See you inside the courses!

1. Introduction
2. Course Outline
3. Join Our Online Classroom!
4. Exercise: Meet Your Classmates & Instructor
5. Meeting The Client
6. The 2 Paths
7. Exercise: Building Your Logo
8. Design Resources
9. Designer vs Developer
10. Skills To Be A Top Designer
11. ZTM Resources
12. Monthly Coding Challenges, Free Resources and Guides
13. Sketching
14. Resources For This Section
15. Introduction To Sketching
16. The Sketching Process
17. Sketching User Flows
18. Sketching User Flows 2
19. Sketching User Flows 3
20. Sketching User Flows 4
21. Sketching Tips
22. Inspiration
23. Resources For This Section
24. How To Stay Inspired
25. How To Find Inspiration
26. NOTE! 2024 UPDATE for the Section 4 above: The Basics of Figma
27. Resources For This Section
28. Intro to Figma: Education Plans and Signup
29. Intro to Figma: Introduction
30. Intro to Figma: Where to Use Figma
31. Figma UI: File Browser
32. Figma UI: Files
33. Figma UI: Toolbar
34. Figma UI: File Left Sidebar
35. Figma UI: Right Sidebar
36. Shapes and Tools: Working with Containers
37. Shapes and Tools: Basic Shapes and Boolean Operations
38. Designing in Figma: Images
39. Designing in Figma: Getting Started with Text
40. Designing in Figma: Constraints
41. Designing in Figma: Using Auto Layout
42. Resources and Collaboration: Community Files
43. Resources and Collaboration: Community Plugins
44. Resources and Collaboration: Sharing and Comments
45. What We Are Going to Learn
46. Exercise: Create a Quick Logo Using Shapes
47. Exercise: Autolayout Buttons
48. Exercise: Responsive Navigation
49. Exercise: Responsive Text
50. Exercise: Imagery and Gradients
51. Exercise: Layout and Responsiveness
52. Assignment: Create Complex Interactive Components
53. User Flows
54. Resources For This Section
55. User Flows Explained
56. The DOs and DON'Ts
57. What We Are Going To Build
58. Reusable User Flow Assets
59. User Flows in Figma — Onboarding
60. User Flows in Figma — Search
61. Sitemaps
62. Resources For This Section
63. Introduction To Sitemaps
64. Creating A Basic Sitemap
65. What We Will Learn
66. Reusable Sitemap Assets
67. Figma Check In — Basic Components and Variants
68. Sitemaps in Figma — The Top Layer
69. Sitemaps in Figma — Digging Deeper
70. Sitemaps in Figma — Digging Deeper Cont.
71. Tips for Creating Great Sitemaps
72. Wireframes
73. Resources For This Section
74. What Is A Wireframe?
75. How To Create A Wireframe
76. What We Will Learn
77. Figma Check In — Basic Button Component
78. Figma Check In — Variants
79. How to Use Our Wireframe Components
80. Wireframes — Home
81. Wireframes — Cart
82. Wireframes — Profile
83. Prototyping
84. Resources For This Section
85. What We Will Learn
86. Figma Check In — Prototyping in Figma
87. Prototyping in Figma — Flows and Starting Points
88. Prototyping in Figma — Connections
89. Prototyping in Figma — Interactions
90. Prototyping in Figma — Animations
91. Prototyping in Figma — Prototype Settings
92. Prototyping in Figma — Prototype Presentation
93. Project — Navigation
94. Project — Removing an Item from Your Wishlist
95. Project — Finding a Product
96. Exercise: Imposter Syndrome
97. NOTE! 2024 UPDATE for the Section 9 above: Feedback
98. Resources For This Section
99. Feedback Drives Better Design
100. Constructive Feedback
101. Recap: What Did We Learn?
102. Spacing and Grids
103. Resources For This Section
104. What Is A Grid?
105. Grid Basics
106. What We Will Learn
107. Figma Check In — Fixed and Fluid Grids
108. Figma Check In — Breakpoints
109. Figma Check In — Grid Style
110. Project — Mobile Layout Grid
111. Project — Desktop Layout Grids
112. Simple Rules to Follow
113. Typography
114. Resources For This Section
115. Serifs
116. Sans Serifs
117. Display & Mono
118. Picking Typefaces
119. What We Will Learn
120. Figma Check In — Text Properties
121. Exercise — Elevating a Brand
122. Exercise — Typeface Scenarios
123. Exercise — Google Fonts
124. Project — Typeface Exploration
125. Project — Pairing Font Families
126. Project — Headings, Body and Labels
127. Project — Typeface System
128. Figma Check In — Text Styles
129. Color
130. Resources For This Section
131. Color Schemes
132. Important Questions To Ask
133. Creating Color Palettes
134. What We Will Learn
135. Figma Check In — Paints
136. Exercise — Expanding Upon a Strict Color Palette
137. Exercise — Creating a Color Palette
138. Figma Check In — Color Styles
139. Exercise — Using Color Styles
140. Project — Primary and Neutrals
141. Project — Accents
142. Imagery and Iconography
143. Resources For This Section
144. Visual Assets Introduction
145. What We Will Learn
146. Figma Check In — Image Plugins
147. Figma Check In — Image Styles
148. Figma Check In — Masks
149. Exercise — Image Exploration
150. Exercise — Text and Imagery Working Together
151. Figma Check In — Illustration Plugins
152. Exercise — Adding illustrations to your designs
153. Figma Check In — Icon Plugins
154. Figma Check In — Pen Tool
155. Exercise — Custom Icons with the Pen Tool
156. Forms and UI Elements
157. Resources For This Section
158. What Are Forms + UI Elements?
159. What We Will Learn
160. Best Practices — Forms
161. Best Practices — Basic and Advanced Inputs
162. Best Practices — Inputs
163. Best Practices — Buttons
164. Figma Check In — Component Properties
165. Properties vs. Variants
166. Figma Check In — Button Component Properties
167. Figma Check In — Button Variants
168. Figma Check In — Combining Components
169. Figma Check In — Form Component Possibilities
170. Project — Registration Flow Part 1
171. Project — Registration Flow Part 2
172. Project — Registration Flow Part 3
173. Accessibility
174. Resources For This Section
175. What Is Accessibility?
176. Assistive Technologies
177. Visual Patterns For Accessibility
178. Tools To Make Your Design Accessible
179. Visual Patterns For Accessibility Part 2
180. Design Patterns
181. Resources For This Section
182. What Are Design Patterns?
183. Why Are Design Patterns Valuable?
184. How To Apply Design Patterns
185. Analyzing Design Patterns
186. Dissecting And Choosing Design Patterns
187. Mobile Design
188. Resources For This Section
189. Mobile Design Best Practices Part 1
190. Mobile Design Best Practices Part 2
191. Visual Style and Exploration
192. Resources For This Section
193. What We Will Learn
194. Design Fidelity
195. Visual Exploration — Navigation
196. Visual Exploration — Buttons
197. Figma Check In — Effect Styles
198. Visual Exploration — Product Cards
199. Visual Exploration — Text Cards
200. Screen Design — Home