Signup
Student Log-in

UI Beginner Mastery

Course Overview

Course Content

  • UI Course
      • Typography

        • 01. What Is Figma? Who does the coding

        • 2. Setup 01 Figma in the Browser vs

        • 3. The Figma file browser – Figmas home

        • 4 & 5. Setup creating design files

        • 6. BASICS 01 Adding frames to our file

        • 7.A few handy shortcuts

        • 8. Design file overview

        • 9. Adding shapes and colours

        • 10. Manipulating elements

        • 11. Align, tidy up, and measure

        • 12. Adding and working with text

        • 13 BASICS 08 Nesting frames – The Figma superpower

        • 14. Frames vs Groups

        • 15. Designing with nested frame

        • 16 Re usable grids with styles

        • 17. Community & Plugins

        • 18. Adding images

        • 19. Duplicating

        • 20. Drawing

        • 21. Scaling

        • 22. Course project introduction

        • 23. Course project part 1.1 wire frame

        • 24. Course project part 1.2 First design

        • 25. Components & Instants

        • 26. Overriding instances

        • 27. What to override and what not to

        • 28. Reversing components & overrides

        • 29. Nesting components

        • 30. Variants

        • 31. Moving components

        • 32. Keeping components organized

        • 33. Course project part 2 components

        • 34. Introduction to variables

        • 35. Working with colour variables

        • 36. Collections & Grouping

        • 37. Number variables

        • 38. And what about styles?

        • 39. Text styles

        • 40. Document variables and styles

        • 41. Course project part 3.1 colour variables

        • 42. Course project part 3.2 typography

        • 43. What is auto layout?

        • 44. Layout menu overview

        • 45. When to use what?

        • 46. Setting up one-dimensional layouts

        • 47. Resize settings

        • 48. Auto space between

        • 49. Auto layout components and variables

        • 50. Learn about nesting parent-child relationship

        • 51. Suggest auto layout

        • 52. Ignore auto layout

        • 53. Grid layout

        • 54. Nesting & more

        • 55. Auto layout pages

        • 56. What are contsraints in Figma?

        • 57. Constraints & grids

        • 58. Course project 4 responsive

        • 59. Prototyping workspace

        • 60. Fix position

        • 61. Link screens

        • 62. Dropdown menu with overlays

        • 63. Animations

        • 64. Interactive components

        • 65. Preview on your mobile

        • 66. Course project part 5 prototyping

        • 67. Sharing and inviting

        • 68. Thumbnails

        • 69. Shared Team Libraries

        • 70. Shared team libraries

        • 71. Change location of a component

        • 72. What to share how

        • 73. Sharing with development: dev mode

        • 74. Typeface & Fonts

        • 75. Serif, sans serif & superfamilies

        • 76. Where to find fonts

        • 77. How many typefaces

        • 78. The typescale

        • 79. Different scaling systems

        • 80. Why rem and not px

        • 81. Font weight and variable fonts

        • 82. Demystifying line height

        • 83. A word on naming

        • 84. Typography in Figma

        • 85. Figma variables for typography

        • 86. White space is your superpower

        • 87. Optimal line length

        • 88. Colour and contrast in typography

        • 89. Responsive typography with breakpoints

        • 90. Fluid typography with CSS clamp()

        • 91. Responsive typography in Figma with styles

        • 92. Automating Figma typography with variables and modes

        • 93. 21 real life examples

        • 94. Pantone CMYK HEX & RGB ?!

        • 95. Converting Colours from Print Design to Screen and Back

        • 96. Pick Mix and Match Colours Like a Pro

        • 97. Colour Inspiration

        • 98. Colour Variants in UI Design

        • 99. Naming Colours the Right Way

        • 100. Feedback Colours

        • 101. Documenting Colours

        • 102. 60 30 10 Rule of Colour Distribution

      • Figma Prototyping

        • 1. BASICS- 01 The Figma prototype workspace

        • 2.BASICS- 02 Where should my prorotypes live?

        • 3. BASICS- 03 On screen device preview

        • 4. BASICS- 04 fixed and scrollable elements

        • 5. BASICS- 04 sticky elements on scroll

        • 6. BASICS- 05 Nesting frames for presentation

        • 7. BASICS- 06 Horizontal and vertical scroll

        • 8. BASICS- 07 Linking screens

        • 9. BASICS- 08 The back action

        • 10. BASICS- 09 Scrollto

        • 11. BASICS- 10 Overlay

        • 12.BASICS- 11 Linking to external pages

        • 13.BASICS- 12 Action triggers

        • 14. BASICS- 13 Figma animation options

        • 15. 14 Easing and spring animations

        • 16. BASICS 15 Sections and stateful design

        • 17. BASICS- 16 Flows in Figma

        • 18. BASICS- 17 Adding videos to prototypes

        • 19. BASICS- 18 Preview on your mobile

        • 20. SMART ANIMATE- 01 Understand smart animate

        • 21. SMART ANIMATE- 02 Smart animate and moving animations

        • 22.SMART ANIMATE- 03 Limitations of smart animate

        • 23. SMART ANIMATE- 04 Let us build a smart animated app

        • 24. SMART ANIMATE- 05 Animate with purpose and code in mind

        • 25. COMPONENTS- 01 Interactive components

        • 26. COMPONENTS 02 Nesting interactive components

        • 27. COMPONENTS- 03 Easy hover and zooming animations

        • 28. COMPONENTS- 04 video interactions

        • 29.COMPONENTS-05 Interactive components and auto layout

        • 30. COMPONENTS- 06 funnel components

        • 31. VARIABLES- 01 Prototyping with variables

        • 32. 02 variant swap with variables

        • 33. VARIABLES- 03 Expressions

        • 34. 04 Chaining expressions

        • 35. VARIABLES- 05 Conditional statements

        • 36. VARIABLES- 06 conditional statements and booleans

        • 37. DOCUMENT- 01 Document prototypes with flows

        • 38. DOCUMENT- 02 Sharing prototype links

        • 39. DOCUMENT- 03 Documenting interactive components for handoff

        • 40. DOCUMENT- 04 Embedding in external documentations

      • Elements Basics + Extras

        • Master Color Theory 🎨: Foundations, Models, and Psychological Insights for Designers

        • Master Earthy Color Theory 🎨: Techniques for Calm, Natural-Inspired Design

        • Master the 60-30-10 Color Rule 🎨: Secrets to Harmonious & Accessible Designs

        • Master Vintage-Inspired Color Palettes with Kittle 🎨

        • Master Vintage & Victorian Color Palettes 🎨: A Guide to Using Real-World Inspiration for Timeless Designs

Original price was: ₹6,456.00.Current price is: ₹3,884.00.
  • Course Level Beginner
  • Lessons 146
  • Duration 7 hr
  • Language English
  • Enrolled 4
  • Additional Resource 0
  • Last Update June 20, 2026

Our Expert Instructors

Advance Graphic Course

252
experts

Original price was: ₹18,370.00.Current price is: ₹11,544.00.
Enroll Now
View

Graphic Beginner Course

252
experts

Akshat

Original price was: ₹18,370.00.Current price is: ₹11,544.00.
Enroll Now
View

UI Beginner Mastery

146
beginner

Original price was: ₹6,456.00.Current price is: ₹3,884.00.
Enroll Now
View