Vectorising Text in Figma.

Introduction.

Converting text to vector paths is a powerful technique that can be used to create high-quality graphics that are scalable to any size. This blog will encapsulate how can the user convert text into vector object.

Transform text into vector objects.

Converting text to vector paths makes it possible to edit text as if it were a shape, with the ability to customize the typeface, create logos and wordmarks, prepare assets for printing, reduce file size, and combine multiple paths into a single object.

There are two ways to convert text to vector paths: flatten text and outline stroke .

In other words, converting text to vector paths allows you to edit the text as if it were a vector graphic, which means that the text will be scalable and editable without losing quality. This can be useful for creating logos, wordmarks, and other graphics that need to be used in a variety of contexts.

There are two ways to convert text to vector paths in Figma:

1. Flatten text:  This will convert the text into a single object, which means that you will no longer be able to edit the individual characters of the text. However, you will be able to edit the shape of the text as a whole.
2. Outline stroke:  This will create a vector outline of the text, which means that you will still be able to edit the individual characters of the text. However, the text will no longer be filled with color.

Flatten Text.

1. Select the text layer(s) that you want to flatten.
2. Right-click on the text layer(s) and select Flatten .
3. Alternatively, you can use the keyboard shortcut  Command + E (Mac) or Control + E (Windows).

Once you have flattened the text layer(s), the text will be converted to a single vector object. This means that you will no longer be able to edit the individual characters of the text. However, you will be able to edit the shape of the text as a whole.

Here are some tips for flattening text in Figma:

• If you want to flatten multiple text layers at once, select all of the text layers and then right-click and select Flatten .
• If you want to flatten a text layer that is part of a group, ungroup the group before flattening the text layer.
• If you want to flatten a text layer that is part of a component, you must first detach the instance of the component.

Outline Stroke.

1. Select the layer(s) with the stroke(s) you want to outline.
2. Right-click on the layer(s) and select Outline Stroke .
3. Alternatively, you can use the keyboard shortcut  Shift + Command +  O (Mac) or Shift + Control + O (Windows).

Once you have outlined the stroke(s), the stroke will be converted to a vector object. This means that you will no longer be able to edit the stroke width or color. However, you will be able to edit the shape of the stroke as a whole.

Here are some tips for outlining strokes in Figma:

• If you want to outline multiple strokes at once, select all of the layers with the strokes and then right-click and select Outline Stroke .
• If you want to outline a stroke that is part of a group, ungroup the group before outlining the stroke.
• If you want to outline a stroke that is part of a component, you must first detach the instance of the component.

Conclusion.

Converting text to vector paths is a powerful technique that can be used to create high-quality graphics that are scalable to any size. In this blog post, we have explored the different ways to convert text to vector paths in Figma and discussed the benefits of using vector graphics.

Whether you are a graphic designer, illustrator, or web developer, converting text to vector paths can be a valuable skill to have. I hope this blog post has given you the knowledge and tools you need to get started.

Happy Learning!!!