Advanced Figma: Pro Web Design & UI Kit Development

  • Home
  • Advanced Figma: Pro Web Design & UI Kit Development
Shape Image One

Advanced Figma: Pro Web Design & UI Kit Development

About Course

This is not just a design course, it is a course on creating a modern design product. Not every practicing designer can boast of the ability to create such complex systems as a ui kit and professional work with components.

By going through the course lessons, we will gradually, step by step, create our own product. From creating basic text and color styles, selecting the right contrast, and ending with a finished UI kit in which all elements are expandable and interconnected. We gain knowledge in practice and immediately apply it.

The course contains the most effective homework assignments. At the moment there are 7 of them. The student does not just look at what the teacher is doing, but gets involved in the process, because some elements need to be created independently. The author gives clear instructions on homework assignments to be completed. The student completes them and then receives a solution to the assignment from the author.

This is the most effective way of learning online today. The student is constantly on his toes and practicing. There is nothing more important than practice in our business.

Show More

What Will You Learn?

  • Learning all Figma tools
  • Taking a deep dive into Figma
  • Practice in Figma
  • Working in depth with complex components
  • Correct naming of elements
  • Working with Variants
  • Thinking through the project architecture
  • Creating a real Ui Kit product
  • Working with plugins
  • Working with hot key

Course Content

Creating styles for the UI Kit

  • What is this module about
  • Text styles
  • Why exactly these values for text styles?
  • Neutral color style
  • Logic for selecting styles for the main color (Main Color)
  • Creating Main Color Styles
  • Color revision. Working with the HSV color model
  • Practice 01 Working with plugins for students
  • Checking the contrast of the Main color
  • Functional colors
  • Speed up your work using regular expressions
  • Creating a Layout
  • Effect Styles
  • Adding an icon pack to UiKit
  • Practice 02. Proper work with icons for UI KIT

Creating the main elements of the Ui Kit

Uploading our Ui Kit to Community Figma

Figma 2023 course

Student Ratings & Reviews

No Review Yet
No Review Yet