Dreaming of working as a UX/UI designer but not sure where to start? This free course is designed just for you! Together we will study the basic theory and skills, figure out what designers do in their daily work, and gain practical experience, as I have prepared a lot of homework after each lesson. And of course, we will learn to work with the most popular design tool in the world – Figma.
This course will be useful not only for future designers but also for developers, project managers, and anyone looking to expand their worldview. You will learn how to create user-friendly and attractive interfaces without needing artistic abilities – after all, a UX/UI designer does not have to be an artist!
I myself faced challenges at the beginning of my journey: a multitude of terms, choosing tools and methods can be overwhelming. That’s why I have gathered for you a summary of only the most important information in each of the 13 lessons and practical tips that will significantly speed up your start.
Course pros
- This course is free compared to some others that cost tens of thousands of hryvnias. Nevertheless, it contains only relevant and useful information (last updated February 2025), which I have gained over years of practical work.
- To test your knowledge and gain experience, in addition to taking tests, there are also homework assignments that need to be completed independently and published for review in the Telegram community. There you can see examples of correctly completed homework, ask questions about the lesson, and seek advice.
- Learning takes place whenever and however it is convenient for you, at your own pace. There are no meetings for Q&A, as you can do it at any time.
Start your journey into the world of design today and discover new opportunities! Click the Sign up for the course button to begin your learning. See you in the first lesson!
If I haven't convinced you yet, I suggest familiarizing yourself with the course structure, which is outlined below.
Follow me on Instagram – @frusia.pro – stay updated on new lessons, ask your questions, and look forward to many useful posts about design.
- Lesson 1. Design. Interface. UX and UI
- Lesson 2. The process of creating a website
- Lesson 3. Design process and methods of a UX designer
- Lesson 4. Prototyping. User flow and wireframes
- Lesson 5. UI designer and related specialties
- Lesson 6. Designer tools
- Lesson 7. Registration. Interface. First steps. Navigation
- Lesson 8. Groups. Layers. Eyedropper. Importing images
- Lesson 9. Frames. Grids. Guides. Components
- Lesson 10. Alignment. New primitives. Export
- Lesson 11. Boolean operations
- Lesson 12. Gradients. Plugins
- Lesson 13. Curves
In this introduction, we will explain and demonstrate with visual examples what design is in general and what it includes, you will become familiar with the main terms that everyone has heard of, but no one understands.
- What is design? Definition and tasks of design. Why the environment, circumstances, and what context is important;
- What is an interface? UI (User Interface) user interface. Elements of the user interface;
- What is UX, UI design and what is the difference? UI–design (User Interface Design). UX–design (User Experience) or interaction experience;
- Types of interfaces. Graphical screen interface – the main field of work for a UX/UI designer. Examples of unusual interfaces: symbolic, gesture, voice. Neurointerface of the future.
Creating a website requires the coordinated work of a team of specialists. Let's figure out in what sequence and by whom websites are developed; what role UX/UI design plays in this process.
I want to draw your attention to the fact that in this lesson everything is written in the simplest language possible, to make it easier to understand the essence of the process. Once this is grasped, I will move on to specialized terms in the next lesson.
- Analytics, information gathering, writing technical specifications. In which cases research is conducted, who business analysts are, and who writes the project technical specifications;
- Searching for references, moodboards. Why guessing the preferences of clients is important and how it saves the budget. Behance and Dribbble;
- UX design. Users and their tasks. Screens and transition schemes. Sketching and creating prototypes. Testing;
- UI design. Visual style (color palette, fonts, grids). Interactive design;
- Project presentation. How to showcase the design to the client;
- Exporting resources. Saving icons, images, and illustrations in separate files;
- Layout. HTML. CSS. JavaScript. Frontend frameworks. Bootstrap;
- Programming. Backend development technologies. PHP. MySQL. Embedded scripting languages of graphic editors;
- Testing. Manual and automated testing;
- Deployment. How website deployment occurs. System administrators and devops engineers.
Lesson 3. Design Process and Methods of a UX Designer
In this lesson, you will learn who a UX designer is and what they do. Additionally, the typical design process is revealed step by step in an accessible format with plenty of examples and clear analogies. Since the topic may seem quite complex for beginners, this approach makes the lesson understandable and easy to grasp.
- Who is a UX designer? What fundamental problem does a UX designer solve? Why should a UX designer be able to and love to communicate?
- Design Process. What is it? Stages of the design process and what are design activities?
- Stage 1 (Observe or Empathize). Observation or empathy. How to understand what the user lives with? Domain Research. User Interview. Field Studies;
- Stage 2. Defining Problems (Define). What tasks and goals does the user have? Problem Statement. User Stories. User Personas. Journey Mapping, Customer Journey Map.
- Stage 3 (Ideate). Finding Solutions. What options are there to solve the stated tasks? How Might We…? Brainstorming. Sketching.
- Stage 4 (Prototype). Prototyping. Bringing the best ideas to life. User Flow. Wireframes. Interactive Prototypes
- Stage 5 (Test). Testing. Checking what works. Guerilla Testing. Usability Testing.
- If necessary, repeat.
- The Double Diamond Concept.
- How to build your design process?
- A typical day of a UX designer.
Lesson 4. Prototyping. User flow and wireframes
We move from the research stage to the implementation of the first versions of the future design. Initially, this will involve building the user path and screens where we will try to implement the entire list of necessary functions. You will learn to create user flows, wireframes, and interactive prototypes.
At the end of the lesson, there will be a useful practical task where you can feel like a UX designer.
- Fidelity or design accuracy. From general to details.
- User flow. User's path. Beginning and end of the path. Actions. Decisions and branches. Direction of the path;
- Historical overview of diagrams and flowcharts. Flowcharts. Diagrams. The goal of process visualization;
- Task flow. Focus on narrower tasks. Working through details;
- Wireframes. Low-fidelity wireframes. High-fidelity wireframes. Marking images and icons. Marking text blocks. The difference in detail between low and high wireframes;
- UI design mockups. Differences from wireframes. Techniques for creating aesthetic appeal;
- Wireflow and Screenflow. User flow + wireframes or UI design. Differences. How to indicate sequences of actions;
- Prototypes. Paper prototypes. Interactive prototypes. How to choose. Advantages and disadvantages.
Lesson 5. UI Designer and Related Professions
In the fifth lesson, we will explore the work of a UI designer through the lens of what they need to know in order to perform their job effectively. Additionally, we will dive into a typical day of a UI designer, as well as examine what related professions entail.
Complete the homework assignment to understand the difference between requests for graphic design, UI design, and motion design.
- Who is a UI designer? Definition. Main task.
- Typography. Basic concepts. Why knowledge of typography is so important;
- Color in design. Approaches and services for generating color palettes;
- Composition and spacing. Options for compositional approaches. About proper spacing and "air" in design;
- Design principles. Balance. Contrast. Hierarchy. Consistency. Air. Gestalt principles in design;
- Grids. Column grids. Basic grids. Modular grids;
- Working with icons and images. How to work with and where to find icons and photos;
- Where to find ideas? About inspiration and professional design social networks;
- Creating final page designs. How the real process happens;
- Creating adaptive and responsive design. Why are adaptives important? The difference between adaptive and responsive design. What you need to know and be able to do to create adaptive versions of layouts without problems;
- UI Kits and design systems. Uncovering the basics. The difference between UI Kits and design systems;
- A typical day of a UI designer. How everything looks in practice;
- Animation of elements. The work of a motion designer. Where to create animations. Micro-animations. What a motion designer does;
- Tasks of a graphic designer. A brief list of tasks faced by a graphic designer.
There is a wide range of programs that UX/UI designers use. To start and in most cases, it's enough to know just Figma, but over time you will develop and may want to try new programs. Also, knowledge of some programs from this lesson may be a requirement for working at a certain company or with a specific client.
- UX Designer Tools. Figma. Adobe XD. Penpot. Axure. Framer X. Protopie;
- UI Designer Tools. Figma. Adobe XD. Framer X. Adobe Photoshop. Principle;
- Graphic Designer Tools. Adobe Illustrator. Adobe Photoshop. CorelDRAW;
- Types of Graphics. Vector Graphics. Raster Graphics;
Let's move on to the practical part. As you may have guessed, we will be using Figma. First, we will look at the advantages and disadvantages of this graphic editor, and then we will start learning how to create designs with its help.
We will begin with the basics. Today we will learn how to draw a rectangle, a line, an arrow, and a text block. This will be enough to create task flows of all kinds and simple pages.
At the end of the lesson, as always, you will have many practical tasks to reinforce the material.
- Why choose Figma. Has free access. Easy to learn. Undemanding on the computer. Works in the browser. Has all the necessary features;
- How to get started?. Registration. Getting started;
- Overview of the Figma interface. Main menu. Toolbar. Workspace. Properties panel. Layers panel;
- Drawing a rectangle. Step by step;
- Modifying objects. Selection. Moving. Resizing;
- Navigation. Moving around the workspace. Zoom control. Focus on an object;
- Setting object properties. Position and size. Locking proportions. Rotation angle. Corner rounding. Fill color. Stroke parameters;
- Color picker window. Copying and pasting color value;
- Adding text. Setting text block boundaries. Text parameters;
- Drawing a line and an arrow;
- Why layers are needed. Organize and group objects. Help highlight objects. Determine drawing order;
- Useful commands. Undo last actions. Make a duplicate. Delete an object. Select multiple objects at once.
We continue our introduction to the basics of Figma. Today we will learn about new techniques for working with layers, including how to select, move, group, lock, and hide them.
We will learn how to insert a raster image into a project and discover how to use the eyedropper tool, which allows us to read the color code from images and shapes.
The final section with new commands relates to setting precise distances between objects, which is important later when working with grids.
This lesson expands our arsenal as designers with new techniques that speed up and simplify the process. For example, it is hard to imagine working on a large project without grouping layers.
- Groups. Creating and deleting a group. Collapsing and expanding a group. Nested groups. Re-grouping;
- Layer selection. Selecting a nested layer. Selecting multiple layers (new method). Selecting a range of layers. Selecting an overlapping layer. Deselecting;
- Working with layers. Locking and hiding layers. Copying, cutting, and pasting a layer. Inserting into the position of another object;
- Layer names. Renaming layers. Assign meaningful names;
- Image import. References and mood boards. Import from clipboard. Import from file;
- Eyedropper tool. Quick color assignment. Assigning color from image pixels;
- Useful commands. Precise positioning. How to share a project.
In the third part on the basics of Figma, we will learn to work with frames, which are also called artboards, pages, and files, so as not to get lost in the structure of a large project. We will see how powerful the capabilities of a frame are, how grids and columns help distribute objects and set margins. We will learn to use guides. For the first time, we will get acquainted with constraints and components.
You will no longer be afraid of large projects; you will be able to easily structure any file and quickly move its parts around.
- Frames. Comparison with groups. Creating a frame. Changing size and fill. How to place an object in the center of the frame. Simple mask – cropping the frame's content;
- Grids and guides. Adding a grid. Adding and adjusting columns. Adding rows. Guides and ruler;
- Examples of using frames;
- Content behavior of the frame when resizing. Constraints. Horizontal constraints. Vertical constraints;
- First acquaintance with components;
- Working with frames. How to fit the frame size to the content. Changing the frame orientation;
- Project hierarchy. Pages. Organizing pages. Files.
In this lesson, we will learn how to align objects and distribute them in space. We will study new shapes: ellipse, polygon, star. They are not as simple as they seem at first glance.
We will learn how to export frames to graphic files. This will allow us to share them with clients or developers later on. We will review popular image formats and understand when to use them.
- Alignment. One object relative to another. Several objects relative to another. Groups of objects relative to another while maintaining position. Alignment of separate objects. One inside a frame. Even distribution;
- New primitives. Ellipse. Polygon. Star;
- Examples of using frames;
- Export design. How to mark a layer for export and save it to a file. Formats Png, Jpg, Svg, Pdf.
In the fifth part of the basics of Figma, we will learn about boolean operations and how to use them in practice. This is an indispensable tool for working with vector graphics, especially with icons and logos.
- About Boolean Operations. An excursion into mathematics and logic;
- Types of Boolean Operations. Union of shapes or Union selection. Subtraction of shapes or Subtract selection. Intersection of shapes or Intersect selection. Exclusion of shapes or Exclude selection;
- Processing Complex Objects. Conversion to curves or Flatten selection.
In the sixth part on the basics of Figma, we will learn how to work with gradients. Specifically, we will understand what types of gradients exist, how to create and adjust them in practice. We will talk about plugins for Figma and install and use a few of them right during the lesson.
- About Gradient. Definition of gradient. Key points of gradient. Replacing color fill with gradient;
- Types of Gradients. Linear gradient or Linear. Radial gradient or Radial. Angular gradient or Angular. Diamond gradient or Diamond;
- Gradient Settings. Opacity. Color of key points and eyedropper. Setting color code. Adding key points. Angle and direction of the gradient;
- Practical Examples. Adding volume to shapes. Simulating motion. Three-dimensional interface elements. Gradient in the background;
- Plugins in Figma. How to work with plugins. Instructions for installing a plugin;
- Plugins for Gradients. Working with the uiGradient plugin. Easing Gradients plugin. Chromatic Figma plugin.
In the seventh part on the fundamentals of Figma, you will learn to work with curves at an advanced level. And although you are already familiar with boolean operations that allow you to create complex vector shapes, this is just the tip of the iceberg. With the Pen tool, you can recreate any shape.
- Curve Theory. Bézier Curves. Types of curves;
- Drawing a Linear Curve. Pen Tool. Creating the simplest curve from scratch;
- Editing Curves. Move Tool for moving points. Bend Tool for controlling curvature. Paint Bucket Tool for filling closed shapes; Adding and removing points;
- Adjusting Curves. Stroke settings. Converting strokes to curves. Corner rounding;
- Websites with Free Icons. The Noun Project. Font Awesome. Cursor.in;
- Exporting to Svg. Step-by-step guide.
Follow me on Instagram – @frusia.pro – stay updated on new lessons, ask your questions, and a variety of useful posts about design await you.
Last updated May 3, 2025
Continue learning
Liubov Furseieva3 March 2026 23:38