Studying markup development is not only about learning how to style elements, but also about physically designing layouts. In order to start making layouts, you have to see them and understand how to work with them.
There are several basic editors on the market. Some are specific to one operating system only, others work in browsers, and some can be installed on any system. Here are just a few of them:
This is by no means an exhaustive list of editors that exist on the market. You may encounter other options while working, but don't worry. There is no need to learn each editor separately. Their interfaces and the way they work are often very similar, and if you learn how to work with one editor, you'll figure out how to work with others.
In this lesson, we'll look at the basics of how Figma works
As mentioned above, Figma does not require installation. It all works in your browser. All you have to do is go to figma.com and register.
In addition, it is possible to install a separate application. It's more a matter of convenience because instead of a tab, you'll get a separate window to work with the editor. The application is now available for Windows and macOS operating systems. You can download them from Figma's download page.
For Linux systems, there are special installation options for different types of systems. You can find them on GitHub.
Use whichever option you're comfortable with.
In this section, we'll look at the basic steps when working with the editor as a layout designer. As an example, we'll use the Hero Section test pattern from the CSS: Flex course.
The Figma window can be divided into four functional areas:
This contains various settings, the file name, and public link settings. If you create your own layout, the header will also contain tools for creating elements.
All of the newly added components to the layout are located in the left area. Text, geometric shapes, and images can all be used for this. Layers are the name for these components since the editor takes the placement of the elements into consideration. If you put the image above the text in the layers, it'll move on top of the text in the layout as well.
Layers can be combined into different groups. This makes it convenient to separate the layers of different parts of the layout. The Hero Section layout has the following groups:
The most useful section for layout designers. The Inspector allows you to see all the settings for the selected element in the "Layers" section.
The text "Frontend Developer" is selected right now. What element parameters can you get? Let's see:
580px
141px
. Note that this is the value of the text, not the block that it's intop
and left
values. These values are relative to the upper-left edge of the layout. Most of the time these values are useless, but there are situations where it makes sense to take a closer look at these valuesfont-family
propertyfont-weight
propertyfont-style
propertyfont-size
propertyline-height
propertyThe central area contains a visual representation of the layout. With it, you can select different layers with the mouse, as well as see the indentation between elements/
If you select the "Learn More" layer, press Alt or cmd for macOS, and hover over an adjacent element, Figma will automatically tell you the distance between the elements.
From this image, you can immediately recognize several element parameters.
Using examples from the lesson, learn all the available properties of the main text:
Font parameters
Font color
Distance from the text to the title "Frontend Developer"
The Hexlet support team or other students will answer you.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
From a novice to a developer. Get a job or your money back!
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.