In the next part on the basics of Figma (already the fourth in a row), we learn how to align objects and distribute them in space. Learning new primitives: ellipse, polygon, star. They are not as simple as they seem at first glance.
Let's learn how to export a design to graphic files. That will allow in the future to share them with the customer or developers. Let's review the most popular image formats and understand when to use them.
- Aligning one object to another
- Aligning multiple objects relative to another
- Aligning a group of objects relative to another while maintaining position
- Aligning standalone objects
- Alignment of a single object within a frame
- Even distribution
- New primitives
- Ellipse
- Polygon
- Star
- Export design
- How to mark a layer for export and save it to a file
- Png Format
- Jpg format
- Svg format
- Pdf format
- Homework
- Conclusions
Aligning one object relative to another
Alignment can be done manually, but Figma provides special tools to speed up the work. To align objects you need:
- Select both object layers. Note that the smaller object will align with the larger one if edge-aligned (left, right, top, bottom). If you do center alignment (horizontally or vertically, then both objects can move);
In the right pane, click on one of the alignment types. They are at the top of the properties panel just below the Design tab. Consider each type of alignment and hotkeys:
- Align Left – align to the left edge of the larger object. Option + A on macOS. Alt + A on Windows;
- Align Horizontal Centers – align horizontally to the center of the larger object. Option + H on macOS. Alt + H on Windows;
- Align Right – align to the right edge of the larger object. Option + D on macOS. Alt + D on Windows;
- Align Top – align to the top edge of the larger object. Option + W on macOS. Alt + W on Windows;
- Align Vertical Centers – align to the top edge of the larger object. Option + W on macOS. Alt + W on Windows;
- Align Bottom – align to the bottom edge of the larger object. Option + S on macOS. Alt + S on Windows.
- Note that the side-align hotkeys are set in the same order as the arrow buttons. Another analogy for gamers – alignment hotkeys are similar to moving in Counter-Strike (AWSD).
- Immediately after the click, the objects will be instantly rearranged to a new location, the coordinates will change. You can keep clicking on other alignment types as you watch the position change.
Aligning multiple objects relative to another
Here, the sequence of actions is the same as in the previous case, but you need to select more than two objects. The alignment will be relative to the largest object.
Note that the objects that are aligned change their position relative to one another (because they are different sizes). To avoid this, it is enough to pre-group the objects, as shown in the next section.
Aligning a group of objects relative to another while maintaining position
Sounds contradictory, but after reviewing the instructions below, everything will fall into place.
As you can see, preliminary grouping allows you to save the relative positions of the aligned layers, which is sometimes extremely convenient. Otherwise, without a group, when applying several alignments, all objects can be mixed into a heap, which happened in the video.
Aligning detached objects
If the selected objects are located separately (without a large object that overlaps the rest in size, as in the previous examples), then the alignment will occur relative to the boundaries of all selected objects. In practice, it looks like this (after each alignment, the undo of the last Cmd + Z action is applied):
As you can see, preliminary grouping allows you to save the relative positions of the aligned layers, which is sometimes extremely convenient. Otherwise, without a group, when applying several alignments, all objects can be mixed into a heap, which happened in the video.
Aligning a single object within a frame
If you select only one object inside the frame, it will be aligned to the borders of the last one:
As you can see, the alignment tool works differently depending on the context. Make sure you understand how the objects will align depending on the situation. Train yourself to use hotkeys.
Even distribution
Another extremely useful tool for arranging objects. Imagine the situation: you have several objects (buttons), but the distances between them are different and you need to set the same padding. Of course, you can arrange everything yourself, but the Tidy Up tool will do everything for you. To do this, select all objects and press Ctrl + Alt + T on macOs or Ctrl + Alt + Shift + T on Windows. Click on the field that appears and use the arrow buttons (up and down) to select the appropriate distance between the elements or enter the value immediately and press Enter.
There are two more similar – Distribute Vertical Spacing (Ctrl + Alt + V on macOS and Ctrl + Alt + Shift + V on Windows) and Distribute Horizontal Spacing (Ctrl + Alt + H on macOs and Ctrl + Alt + Shift + H on Windows). They have two key differences:
- They distribute the allocated objects within their boundaries, in other words, after the objects are reallocated, they will occupy the same space as before the operation was applied. The Tidy Up tool, on the contrary, does not care about how much space the objects in the new positions will eventually occupy;
- You need to explicitly specify in which direction to distribute the objects (horizontally or vertically). Tidy Up does this automatically.
Looking in practice:
Don't forget that distribution can be used in conjunction with alignment. This allows you to quickly arrange a large number of inaccurately spaced objects.
Ellipse
Creating an ellipse is elementary. It is enough to use the hot key O (or select the appropriate item in the drop-down menu of tools) and then do everything in the same way as with the rectangle. Then the fun begins:
- If you hover over the newly created circle, you will notice that a white circle has appeared on the right (if you hover over it, a Arc – arc tooltip will appear), which you can drag. If this is done, the circle will turn into an arc;
- Immediately after the transformation, three circles will appear: Start – starting point, Sweep – span (defines arc length), Ratio – the ratio of the inner radius of the arc to the outer one (defines the thickness of the arc).
- The corresponding parameters will appear in the properties panel, where you can set the exact values;
- A rounding radius can be useful to soften the ends. It is located in the same place in the right panel as the rectangle.
Polygon
Allows you to create polygons: from a triangle to a polygon with an unlimited number of vertices (most often up to 10). There is no hot key, so you will have to use the drop-down menu. As in the case of an ellipse, after creating and hovering, two circles will appear with the following parameters:
- Count – number of vertices;
- Radius – vertex rounding radius.
Star
This shape doesn't have a hotkey either. The boundaries of its application are quite limited, but not entirely trivial. I'll show you how you can use it to make a gear and even a sea urchin. Get acquainted with the mugs-parameters:
- Count – the number of rays of the star;
- Ratio – the ratio between the recesses and the protrusions of the beam (the smaller the value, the longer the beams);
- Radius – rounding radius.
Design export
In your work, you will often need to turn a design inside Figma into an image that can be shared as a file. There are different file formats for different purposes. Here are some examples of when this might be needed:
- Send several screens in lossless Png format to the customer via email;
- Send icons in Svg vector format to the developer;
- Provide product photos in Jpg format.
The process of turning a design element in Figma into an image file is called export. You can export any layer or frame separately, or all elements marked for export in one go. Let's see how it goes.
How to mark a layer for export and save it to a file
The sequence of actions is as follows:
- Select a frame, group or layer to export;
- In the properties panel on the right, click + (plus sign) opposite the Export inscription;
- Export settings will appear;
- The rightmost drop-down menu indicates in which format the file will be saved. Make sure PNG – it is a lossless format;
- Press the Export name of the selected layer, button, which is located under the settings (the inscription on the button will correspond to the name of the selected layer);
- A window will appear in which we indicate where and under what name to save the graphic file. By default, the file name is taken from the name of the selected layer, but you can change this. Do not try to change the file format at this stage (three characters after the dot) – it's already late. If necessary, click Cancel and change the format in the right-most drop-down list;
- Press the button Save. The file selection window will hide. Ready! The image is saved in the specified location to the specified file. Now you can send it to the client for approval or to me as homework
Png Format
PNG (Portable Network Graphics) – raster format without loss of quality. Allows you to accurately capture every pixel of the original image. In other words, the recipient will see it without distortion. Always export the design as Png for the client (if for some reason they can't view it directly in Figma) and in all other cases.
Svg format
Svg (Scalable Vector Graphics) – vector graphics format. Supports both static and animated images. Figma only exports statically for now, although it does support animations. Takes up very little space. is used everywhere to export icons and illustrations with a small number of colors (infographics, diagrams, tables with non-trivial layout). Please note that the introductory picture in each lesson was exported in this format. To see this, just zoom in on the – quality loss will never occur (you will not see a pixel ladder).
PDF format
Pdf (Portable Document Format) – format of electronic documents. Allows you to save the design in vector form, but this is not its intended purpose. More commonly used to save investment presentations or reports. Unfortunately, Figma generates extremely heavy files in this format. Never use Png to export a design.
Each format has its own usage and special features (for example, Png allows you to specify where the image is transparent, but Jpg does not). But I will introduce you to this gradually in the following lessons, while the material presented is enough.
Homework
- Create a new file in Figma. Make a separate page for each task. Here is the first task. Repeat the picture below, drawing all the figures in separate frames, using all the primitives you know. Next, export each shape (with caption) using frames of the same size to a separate png file. Then import the newly created png files back into Figma. Next, arrange the newly imported shapes in a separate frame, as in the original image. As a result, you should have three frames on the page from top to bottom: 1) with the original image (reference); 2) with drawn figures; 3) with rendered figures in bitmap format (which you imported at the very end). All three frames should be as similar as possible.
![Shapes for the first task of the 4th part of the Figma Basics Lessons]( "Shapes for the first task of UX/UI Design Lesson 7")
- The second task. Select any object from the previous task and draw what the Figma property panel looks like at this moment (it is on the right) in a separate frame. Next, change the colors to match the dark interface theme. I am attaching an example below.
![Dark UI Example]( "Dark UI Example")
- The third task. Go to Behance or Awwwards (google it if you forgot what it is) and find two website designs. Draw a new design using the structure from one site, and the colors and illustrations – from the second. This is a very difficult task, given that you do not know anything about the basics of design, but at least try.
For verification, send a working link to a file with editing rights. How to give the appropriate rights, read the previous lesson. Do not forget that each task must be completed on a separate page. Read each paragraph carefully, there are a lot of nuances. Use the new tricks from this tutorial (alignment will definitely come in handy).
You keep moving forward with Figma. A few more lessons and we will move on to learning the basics of design. But at that moment you will already have a good command of one of the best tools and it will not just be theory in a vacuum, but practical tasks.
Try to do the homework from this lesson, it will give you a lot of experience. And this is the most important thing in this business.
Follow me on Instagram - @frusia.pro - stay up to date with announcements of new lessons, check homework in stories, ask questions, and you will also find many useful posts about design.
Stay tuned!