Professional course

Figma: step-by-step
guide to Web Design

Master Figma from scratch and become a sought-after web designer!
Get Started Now
Figma is a powerful
web design tool
which allows you to create website layouts, interfaces and prototypes. It is popular among designers due to its simplicity, functionality, and real-time collaboration.
Master your profession from
scratch to professional level
During the course you will receive a set of skills and tools, which are necessary for the profession.
  • Figma
  • Target audience analysis
  • Hypotheses
  • Research
  • UX copywriting
  • UX testing
  • Competitive Analysis
  • JTBD and User Stories
  • Animation
  • Wireframes
  • UI Kit
  • Adobe Photoshop
We regularly update the program so that
you receive only current knowledge.
There are several course formats - from basic to advanced, by mastering which you can raise your level of professionalism
Module 1
Introduction
  • Materials
  • How to take the course
  • Let's stay in touch
Module 2
Figma Basics
  • Figma Updates
  • Site dimensions
  • Site frame
  • Grid
  • Shapes/Images/Layers
  • Basics of working with text
  • Grouping layers and a little about presentation mode
  • How to save and transfer Figma files
  • Difference between UX and UI
Module 3
Working with color
  • Selecting colors from images
  • PRACTICE. Pick a color from the image
  • What is HSB? Fine color adjustment
  • Project color selection tools
  • How to work with gradient
  • Rule of color proportions 60/30/10
Module 4
Working with images
  • The difference between raster and vector graphics
  • Choose high-quality images
  • How to Tint Images
  • Extreme pruning technique
  • Soft pruning technique
  • Working with icons
  • How to create your own icon
  • How to change shapes
Module 5
Working with AutoLayout
  • Differences between the new interface and the old one
  • AutoLayout Basics
  • PRACTICE. AutoLayOut
Module 6
Working with shapes. PRO level
  • How the pen tool works
  • PRACTICE. "Pen tool"
  • Making the next section of the site
  • Difference between frames and groups
Module 7
Padding in Web Design
  • Indentation rules in web design
  • PRACTICE. Padding in web design
  • 4px grid vs 8px grid
Module 8
Effects and styles
  • How the effects work
  • How styles work
Module 9
Masks and plugins
  • Figma interface update
  • How masks work
  • If the mask in presentation mode is translucent.
  • Additional practice on masks
  • Figure with image
  • How plugins work
  • We are finishing the site
Module 10
Working with fonts
  • The importance of fonts
  • Font types
  • Where to get new fonts
  • How to choose fonts
  • PRACTICE. Choose fonts
  • Font settings
  • PRACTICE. Font settings
Module 11
Preparing for a new project
  • How to create pages in a project
  • Brief with the customer
  • How to create a mood board
  • What is a site Wireframe
  • PRACTICE. Create your own mood board and wireframe
Module 12
Design system
  • Does a designer need Photoshop?
  • How to purchase licensed Photoshop from Russia
  • What is a design system
  • Making a style sheet for typography
  • Finishing the style map
  • Practice. Create your own design system
Module 13
Components and Variants in Figma
  • Making the next section of the site
  • How the components work
  • Organizing and storing components
  • How the options work
  • PRACTICE. Create your own options
Module 14
AutoLayOut. Advanced level
  • Figma interface update. Constraints
  • How to create style subcategories
  • Creating the next section of the site
  • How to create a multi-level AutoLayOut
  • Use ready-made elements from other layouts
  • AutoLayOut Pro version
  • Making a blog page
  • How Min width / Max Width work
  • How absolute positioning works
  • We are finishing the site
  • PRACTICE. Create a website design
Module 15
Responsive Design
  • Basics of constraints
  • How constraints work with grid
  • PRACTICE. Constraints
  • What is responsive design
  • What are DPI and PPI
  • We adapt the first page of the site
  • PRACTICE. Adapt the site
Module 16
Speeding up work
  • Useful hotkeys
  • Useful plugins
Module 17
Prototyping
  • Layout presentation mode
  • In-Depth Prototype Customizations
  • Basic animation in figma
  • How Bezier curves work
  • Work open overlay & scroll to
  • How swap overlay works
  • How After Delay works
  • How Smart Animate works
  • Animating the site menu
  • Prototyping components
  • Reset Position & Component state
  • Conclusion of the prototyping block
Module 18
Paid or free Figma?
  • Differences between paid and free figma
Module 19
Export
  • Export images
  • How to work in a team
Module 20
Bonus: Design tricks
  • Tricks with overlaying elements on top of each other
  • Identical elements on the page
  • Tricks with repetitions
  • Tricks with contrast
  • Tricks with empty space
  • How to develop in design
Module 21
Bonus: Figma Jam
  • What is Figma Jam
  • Recent Figma Jam updates
Module 22
Bonus: Working in Photoshop
  • How to purchase licensed Photoshop
  • Preparation of the program
  • Working with layers in Photoshop
  • Expanding the boundaries of images
  • Removing unnecessary things from photos
  • How to cut a person from one photo and paste him into another
  • How masks work in Photoshop
  • Exporting files from Photoshop
  • What's next?
Module 23
Conclusion
  • Conclusion
The authors of the course are
practicing designers
Evgeniy Kevlich
Product designer with more than 7 years of experience. He developed digital products at Ak Bars Digital and also worked as a freelancer on projects for Google.com.
Eduard Avcharenko
Interface designer with over 12 years of experience. Worked on creating applications and educational platforms. Currently consulting for international companies.
We have developed an
adaptive tariff system
Base
  • Training program 4 module
  • Lecture materials - 25
  • Student Chat
  • No feedback
  • Access to the course - 3 months
$25
Start Now
Pioneer
  • Training program - 10 modules
  • Lecture materials - 52
  • +Bonus module: Working in Photoshop
  • Practical assignments
  • Practical assignments
  • Practical assignments
  • Access to the course - 6 months
$54
Start Now
Advanced
  • Training program - 14 modules
  • Lecture materials - 79
  • +Bonus Module: Design Tricks
  • Practical assignments
  • Practical assignments
  • Practical assignments
  • Access to the course - 12 months
  • Certificate
$72
Start Now
VIP
  • Training program - 19 modules
  • Lecture materials - 104
  • +Bonus module: Design Tricks
  • Bonus module: FigmaJam
  • +Bonus module: Working in Photoshop
  • Practical assignments
  • Student Chat
  • Mentor feedback
  • Access forever
  • Certificate
$96
Start Now
Corporate
  • Groups of at least 5 people
  • All course materials
  • +Bonus module: Design Tricks
  • Bonus module: FigmaJam
  • +Bonus module: Working in Photoshop
  • Participation in a corporate project
  • Tutor support
  • Access for 12 months
  • Add to group chat
  • Certificate
$500
Start Now
Receive a certificate
of completed training
Receive a certificate of completion of training, which will become an additional argument for employers when applying for a job, confirming your skills and qualifications.
Reviews from our students
Emil
The Web Design course exceeded all my expectations! I learned a lot of new things, thanks to which I successfully passed the interview and got a job in a large company. I am very grateful to the instructors for their professionalism and support throughout the training!
Lev
The course was unexpectedly very informative and structured. I not only mastered Figma, but also learned how to properly present my ideas. A month after finishing the course I was offered a position in a startup, and I gladly accepted the offer!
Nikita
Before the course I had no experience in design at all, but the course materials were clear and accessible that everything worked out. Now I take orders on freelancing and also my friends order websites, word of mouth is on, there are always clients. Thank you for the excellent training!”
Maria
I really liked the course on web design. I can say for sure that now I have the skills to work in Figma at an intermediate level. And then everything will come with practice. I also purchased a course on Photoshop. I will develop along with your courses. Thank you very much!
We answer questions
I am working. Will I be able to combine study and work?
Yes. The training is structured in such a way that you can combine classes with work, caring for your family or other responsibilities.
Is this program suitable for beginners with no experience?
Yes. This course is suitable for both practicing designers who do not yet have experience working with the Figma online service, as well as for beginners. You do not need any special skills or knowledge to enroll.
Will there be feedback?
Certainly. Our curators carefully check practical work and provide detailed comments.
If I change my mind, can I get my money back for the course?
We try to be flexible to your needs. Therefore, we take circumstances into account and refund all or part of the tuition fees if agreed in the contract.