9 free video lessons

Modern teenagers, who are already thinking about financial independence, first of all want to work from home and not be tied to the office and all those office rules that their parents most likely live by.

In fact, there are many professions that allow you to implement your plans, especially in the era of the popularity of “remote work”. One of these specializations is web design. This area is popular with young people, since here you can realize your creative potential to the maximum, work with orders you like and solve non-standard problems. So teenagers are happy to immerse themselves in the process of learning how to create websites.

Together with teachers schools I have prepared nine free web design lessons for teenagers that will help a budding young creator and teach them how to work with the Figma editor.

Free Web Design Lessons for Kids: Figma Basics

Duration: 4:46

I suggest starting the first lesson from the basics and understanding what web design is.

Before you get a beautiful and convenient website, you need to come up with its appearance and how it will work. This is web design. It includes choosing colors, text, and the appearance of different parts of the page. In order for the site to please those who visit it, and also to be convenient, you first need to make a sketch of it. Most often, a program is used for this. In our case, we will consider “Figma”. When the design is thought out and ready, sites become not only beautiful, but also useful. They help companies show their products and services in the best light.

Figma is a program for creating interfaces that can be used by one or several users at once. Figma is compatible with computers running various operating systems, be it Windows or MacOS. The editor supports tools for creating and changing designs to solve a variety of problems.

Getting started with Figma is quite simple: all you need to do is download the appropriate version from the website for Windows or MacOS. After installing the program, the system will prompt you to register and create an account. You can start working.

Web Design Courses for Teens: Learning the Figma Interface

Duration: 6:16

After completing the registration, you will be able to work in the Figma editor both through the browser and in the application. In both cases, the interface is very similar.

On the main screen on the left there is a tab for working with our account. In it you can change the avatar, choose a dark or light interface theme. If several people work on one device, you can add another account or log out of yours.

All files are automatically saved to the Essence folder and placed on the program servers. Drafts are drafts, that is, the files we are currently working on. If you delete a file from the drafts, they go to the Deleted folder. This is similar to the Recycle Bin on your computer.

At the top of the main page are buttons for creating a new design file, for creating a board for planning tasks, for uploading files from a device. The hotkey combination for each tool is written to the right of its name. At the top, the editor is located on the toolbar. The first button on the toolbar is the main menu.

The second button on the panel is the choice of the console variant. The third button on the panel is the choice of the section. The frame is the working area, all the necessary elements are placed inside the frame. Section is a grouping of frames.

Any frames, groups or objects you add to the canvas will appear in the layers panel. Inside the components panel, you will have easy access to all of your components. Components are reusable design elements: buttons, for example. The canvas is where your designs are presented. This is the main work area. On the right side of the screen is the properties panel, which allows you to view and adjust the properties of any element you currently have selected.

Figma for kids: adding font

Duration: 6:43

Font plays a key role in design and can have a significant impact on the perception and aesthetics of design work. Certain types of fonts can create different moods, convey certain meanings, and enhance the design concept. To work with text, select the T tool from the toolbar or simply press the “T” key.

If you want to change the formatting of a specific section of text, select it and use the Properties panel to change the formatting. You can also add effects to the text, such as shadows or strokes.

Figma also supports working with text variables. You can create and use them to help standardize and update text elements on your project. If you need to add a ready-made text block, you can use the Insert Text feature.

If you need to install a new font to work with the design, you can find them on various web resources and download them as an archive. Then you need to open the file manager on your computer, find the folder where the installed fonts are stored, open the desired file and click “Install”. After that, you need to restart the program to update the list of available fonts.

Web design for kids and working with shapes and objects in Figma

Duration: 8:29

Geometric shapes are one of the basic design elements that are used to create simple, clean compositions. They are shapes that can be defined mathematically and include shapes such as circles, squares, triangles, rectangles, and many others.

Create a new file in the Figma graphic editor. In the top toolbar, you can select the desired type of figure. The video shows an example on a rectangle, but you can give preference to what you like more. A rectangle is the most common figure in graphic design. Dimensions can be set either manually, by moving the edge of the figure, or using the design panel, setting a specific width, height and indents. To change the width and height of the figure proportionally, you need to hold down the Shift key. This property applies to absolutely all Figma figures. Without “shift”, the size of the figure changes, following the mouse pointer. You can make roundings in the figure both proportionally in all corners and in individual ones. To work with circles, use the ellipse tool. If we edit its size with the mouse, we will get an ellipse. If we need to work with an ellipse as with a ball, then we need to hold down the shift key. We can edit parts of the circle manually or using the “design” panel.

Figma for Kids: How to Work with Images and Icons

Duration: 5:23

An image is a visual representation of something on an information carrier. To work with them, the first thing you need to do is insert an image into a Figma project. There are several ways to do this. For the first method, you need to select the Insert tool in the top menu and select Image. Then you need to select the image file on your computer and click Open. This will add the image to the project. You can also open an image using the shift-ctrl-k key combination in the open workspace. In the window that appears, find the desired image and click the Open button. For the third method of adding an image in Explorer, open the folder with the image, hold down the left mouse button and drag it into the workspace. Sometimes the design idea requires inserting an image into some form. The video shows how to fit a photo into a star.

Vector images are most often used for working with icons. Raster and vector images differ in their structure and method of storing information. Vector images are mathematical objects that describe geometric shapes, lines, and colors. They can be saved, for example, in SVG format. Vector images can be scaled to any size without losing quality and do not become pixelated. The choice between a raster and vector image depends on the specific task and image quality requirements.

To add a vector image to a project, you can use the same methods as above. Once the icon is added, you can start manipulating it. For example, change its size, color or shape. You can recolor the object with the Fill tool by selecting the desired color in the toolbar on the left.

Web Design for Kids and Teens: Prototyping in Figma

Duration: 8:19

In product development, the concept of prototyping serves as a visual demonstration of how a future product will function, look, and interact with the end user. All this happens before the actual development of the product begins. Prototypes range from simple hand sketches to complex interactive digital mockups. During the design testing process, end users can interact with a variety of elements, and developers and designers can receive real-time feedback.

To start working on a prototype, the first step is to create a new file via the “Design File” button located at the top of the interface. Further customization is done via the “Prototype” tab on the sidebar. When all the pages of the interface design are ready, you can run the prototype via the “Play” button in the upper right corner. You can create the design of each individual page of the site interface using the “Frame” tool, available in the top menu.

Working with color in Figma

Duration: 5:22

Colors can greatly affect our well-being and perception. If you choose the right colors for your work, it can make your project better and more effective. This video shows how you can add your own color transitions in Figma. When choosing colors, you need to remember what feelings and thoughts they can evoke. For example, bright colors like red or orange make us feel cheerful, happy, energetic. But cool colors like blue or green help us relax and feel calmer. It is very important to think about how the colors look together and how they harmonize. Do not hesitate to try different combinations to see the best option for your project. To simplify the task, you can use a color wheel. It will help you choose great combinations of two, three or even more colors.

In addition to choosing individual colors, it is also important to consider gradients and transitions between them. A gradient is a way to create a smooth transition between two or more colors in a design. They add dynamism and movement, highlighting key elements of the design. To create a gradient, select the desired layer or object and click on the gradient icon. It is located in the object properties panel in the Fill section.

Working with typography in Figma

Duration: 7:27

A grid is a system of vertical and horizontal lines that are used to align and organize content on a layout. In typography, a grid helps create an orderly design by ensuring that text, images, and other design elements are evenly spaced.

The modular grid is a property of the frame, so to use it, we first need to add a new frame to our project. There are 3 types of grids in Figma:

• Modular grid Grid is a tool for creating and customizing a grid structure in design. Designers love this tool for its convenient feature: using the arrows, an object moves exactly one pixel. And if you hold down the Shift key while moving the arrows, the object will move 10 pixels at once. If necessary, the size of the grid cells can be adjusted using the Size property. You can also change the color and transparency of any modular grid: for example, if it blends in with the colors on the layout. By default, the grid color is pale red, and the transparency is 10%.

• Columns that divide the layout vertically. This type of grid is one of the most popular ways of organizing in design. It allows you to divide the canvas into equal or proportional columns, which makes it easier to align elements and create a balanced composition. By default, the layout is divided into 5 columns, but a 12-column modular grid is often used for design, as it allows you to divide the layout into equal parts.

Responsive design in Figma for different devices

Duration: 5:48

In the modern world, there are a huge number of different devices, such as phones, tablets, computers, etc. When developing websites, it is very important to make them accessible and convenient for absolutely all device users. This is what adaptive design is responsible for.

Designers create separate templates for each device, while web developers, as soon as the screen reaches the main size, send a request that rebuilds the styles inside the site. so that the user sees a beautiful and convenient site. For example, the narrower the page, the smaller the font. Pictures and inscriptions are not lined up in a row, but one under another.

The finished design should include several options for each device. At a minimum, the designer needs to develop three versions of the site: for phones, tablets, and computers. For smartphones, a layout with a width of 320 pixels used to be developed. Today, screens have become wider, and most designers have switched to a width of 360 pixels. The best solution is an adaptive design that is not tied to a specific device or screen size. It responds to changes in the size of the browser window or the user's device.

It is very important to create such designs now, because modern users own many different devices. The website interface should be convenient for each client visiting the site from a computer, tablet or smartphone.

Learn the basics Figma for kids with the help of free lessons is a very real task. The main thing is the desire to study an interesting direction, the desire to master something new. This is by no means only a profession for “IT specialists”: web design for teenagers is much broader and accessible even to beginners.

If you are a professional web designer and Figma fan, what advice would you give to teenagers who are just starting to master this program? Share in the comments!