Formatting in Figma means looking at a design, the different pixels of margin or padding applied to the containers, the look of the text, font weight, font size, and all other properties that fall under the domain of making the format of the design eye appealing & beautiful. In this article, we will learn how to apply different formatting features in Figma on different types of components.

Text Formatting Features in Figma

Formatting in Figma

Figma is a collaborative tool that is used for web designing, UI/UX designing and forming templates for design. It involves different formatting features that help enhance the look of the design.

Importance of Formatting

Formatting forms an essential part of designing as the client won’t expect a small piece of wireframe from us. Designers are supposed to create a high fidelity wireframe that enhances the user experience & user interaction and thus, attracts more customers. Formatting helps ensure a better readability of the design, according to different headings, pieces of text & infographics in containers. Plus formatting is such an integral part of the website, and without which the design would only look like a basic layout, or represent a skeletal of the project. Formatting helps make the design lively & interactive.

Text Formatting Features in Figma

Create a frame and select the option of text to create a textbar and add text in that. Add a text in the container of choice. Here are the following formatting features that can be applied on Figma:

1. Font Family

In the right side bar, the font family can be chose, as in how the font looks like & what is the typography. A relatively subtle font family is chosen for simple websites. Here, we have chosen the font family “Poppins”.

Font family

2. Font Size

Beside the regular type of font family, a font size can be chosen which is mentioned in pixels. Here we have chosen a font size of 50 pixels.

Font Size

3. Font Weight

The font structure can be altogether changed according to the type of text. If it is a heading, it is supposed to have a greater font size with greater font weight, a sub-heading consists of a relatively smaller font size with bold font weight. Whereas a paragraph does not consist of any font weight, and a relatively much smaller size & is of regular type.

Font weight

4. Line Height

Line height is referred to as the vertical space between different lines in a paragraph. Suppose a text container consists of Line 1, Line 2 & Line 3. all separated in new lines with an enter key, they are called different lines. And all these lines can be separated by increasing the spacing between them, by providing line height’s value. It is represented by a symbol of capital A above and under which there lies a horizontal line.

For eg. Line Height = 87%

Line height

5. List Spacing

Suppose there are different lists, and even those lines, which are separated by enter key tap are referred to as lists. The vertical spacing between them helps in formatting and is known as list spacing. It is represented by a symbol of arrow above which there lies a horizontal line, and under that there lie 2 horizontal lines, thus specifying list spacing.

For eg. List spacing = 73

List spacing

6. Letter Spacing

The spacing between letters in any word is called Letter spacing. It is represented by the symbol of A beside which, both left & right side, there lies vertical lines, representing margin between every letter from every other letter at the left and right side.

For eg. Letter spacing = 21%

Letter spacing

7. Alignment

A proper alignment falls under formatting of text and this is very essential in order to make creative & easy to understand & lively websites. Several options of alignment are possible, such as left aligned, right aligned & centre aligned. In the left side there are options of alignment of text according to the frame. And in the right side, there are options of alignment of text according to the text container.

1. Left alignment

Left align

2. Right alignment

Right align

3. Centre aligned

Centre align

4. Proper alignment

Aligned

8. Type settings of Text

In type settings, we have different formatting features such as the following have been applied in the text given below.

Type settings

1. Resizing: The text element’s container can be resized according to the amount of text that is placed in the container. For eg If the container’s width is 100 pixels, and the text completely covers that and we want to add more text, then we can set the resizing property to auto height that would set the height according to the text content.

2. Alignment: Here also we have three options: left align, centre align & right align.

3. Decoration: The text decoration means, bold, italics and underline. Here we are provided with two types to decorate our text, one is underline and other one is strikethrough.

4. Case: The casing of the text can be specified as to whatsoever we want, such as uppercase, lowercase, capitalize etc.

5. List Style: We can also set the list style of the paragraph elements and can convert them into bullet points or numbering.

Bullets:

Bullets

Numbering:

List style + spacing

9. Color fill

We can also add colors to the text which is probably the most basic, yet most essential feature of Designing. Here we have added a red color to the text.

Text fill

Conclusion

Learning formatting features are essential in Figma as they are much needed during designing. A simple web design file with no effects & features may sound boring and would not impress the client. But a file with good infographics features, better text and their properties would fascinate the buyer to a very great extent. Using the above screenshots, one can learn all the basic required formatting features in Figma.