“To another figma tutorial in this video. We ll cover the basics of using the the text tool and fonts fonts are a critical component of interface design the font select determines. The readability and the appeal of your text. The color size spacing and width.
All convey a message to the users of your product. Figma comes pre loaded with hundreds of google fonts so you can start designing. Quickly visit fonts googlecom. To learn more about your favorite fonts preview.
A font family or font style or to discover. New fonts through various filters. You can also use your local fonts as long as you re using figma on a windows or a mac computer if you are using the figma web app. You will need to download and install the figma font helper define your fonts.
You can download the font helper from account settings within figma the font helper will allow figma to recognize the fonts you already have on your machine if you are using the figma desktop app. Your local fonts will be ready to go no font helper required if you choose to use your own local fonts. When collaborating with others each editor will need their own copy of that font in order to edit text using that font. I m happy with the google fonts provided so let s get started.
We can access the text tool by clicking the t icon in the toolbar or by using the t keyboard shortcut there are two ways to create a text element single click and start typing by default this creates a text box with the auto resize attribute set to width this allows the width of the text box to grow along with your text..
Another option is to click and drag to create a text box with specific dimensions since we re determining the size of the text box in this scenario. The auto resize is set to fixed this allows longer strings of text to wrap around to the next line once it reaches the edge of the fixed text box you created if it extends below the bounding box the box will not resize vertically to edit an existing text element. Double click inside the text box will change the auto resize value to height the bounding box grows vertically as new text is added. But not horizontally.
We ve covered the auto resize attribute in the advanced type menu. However there are other useful functions in the section of the properties panel first we have a drop down menu. Where we can select a new font you can also type in this field to search let s search for the open sans font below. We have two additional fields change our font size and view and select the font styles.
Available for our selected font. Let s change our font size from 10 to 8. By selecting the field and pressing the down arrow key twice you can also change font styles through common keyboard shortcuts command be too bold our text command. I to italicize our text command you to underline our text next we have line height to change the amount of space between each line of your text.
The default value is set to 100 percent. Which is equal to the default line height for the selected font by holding shift and using our up arrow key. We can increase this in increments of 10 to the right of line height. We find letter spacing.
Which changes the space between characters if we d like to adjust the kerning of certain character combinations..
We can also use letter spacing by default segment values. But if we type in a pixel value we can change the unit to pixel let s change. Some of the spacing to 2 pixels next. We have paragraph spacing and paragraph.
Indentation. Paragraph. Spacing changes the space between paragraphs that are separated by returns and in the same text box let s set that to 10 paragraph indentation. We ll add additional space to the left the first character in each paragraph.
Let s change this to 5. We can adjust the alignment and the justification of our text to determine where it should be placed within the text box our options for horizontal justification are left center. Right and justified our options for vertically aligning text are top middle and bottom you can also use attributes not within the text section of the properties panel to edit text if we would like to change the color of our text add a stroke or add an effect. We can do that by editing the fill stroke and effect properties.
Let s make this text read by changing its fill and we ll add a black one point stroke to this text layer lastly. We ll add a drop shadow to this text by adding an effect let s review what we ve learned today visit fonts googlecom to discover new fonts and see what styles are available install the font helper to use local fonts. If you re using the web app. Auto resize has three values width height and fixed type a number followed by px to change the line height and letter spacing units to pixels use justification and alignment to position your text within its ” .
Thank you for watching all the articles on the topic Figma Tutorial: Text Tool and Fonts . All shares of thetruthaboutdow.org are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.
“Figma is free to use. Sign up here: http://bit.ly/2yst3H7nnIn this video we ll cover the basics of using the text tool and fonts.nnIf you have questions along the way head over to our user forum (https://spectrum.chat/figma) and connect with other Figma users.”,
figma, figma design, ux, ui, text, fonts, typeface, text objects, interface design