Beginner
How to add text to designs on Figma
Quick Answer
Add text to Figma designs by selecting the Text tool from the toolbar or pressing T, then click anywhere on your canvas to create a text box. You can then type your content and customize formatting using the properties panel.
Prerequisites
- Figma account
- Basic familiarity with Figma interface
- An existing Figma file or new project
1
Select the Text Tool
Click the Text tool (T icon) in the toolbar on the left side of your screen, or press the
T key on your keyboard as a shortcut. The cursor will change to indicate text mode is active.Tip
Press T anywhere on the canvas to quickly activate the text tool without clicking the toolbar.
2
Create a Text Box
Click anywhere on your canvas where you want to add text. This creates a text box that will expand automatically as you type. Alternatively, click and drag to create a fixed-width text box for paragraph text.
Tip
Dragging creates a text box with defined boundaries, while clicking creates auto-width text perfect for headings.
3
Type Your Text Content
Start typing immediately after creating the text box. Your text will appear in the default font and size. Press
Enter to create new lines, or press Escape when finished typing to exit text editing mode.4
Access Text Formatting Options
Select your text box and open the Design panel on the right side of the screen. Here you'll find all text formatting options including font family, size, weight, and color. You can also access these options while editing text.
Tip
Double-click any text to quickly enter edit mode and make changes.
5
Customize Font and Size
In the Design panel, click the Font family dropdown to choose from available fonts. Use the Font size field below to adjust the size, or use the Font weight dropdown to change from regular to bold, light, etc.
Tip
Use Ctrl+B (Cmd+B on Mac) to quickly toggle bold formatting for selected text.
6
Adjust Text Color and Effects
Click the Fill color swatch in the Design panel to change text color. You can apply solid colors, gradients, or even images as text fills. Use the Effects section to add shadows, blurs, or other styling.
Tip
Hold Alt while clicking a color anywhere in your design to quickly apply it to selected text.
7
Position and Align Your Text
Drag your text box to reposition it on the canvas, or use the alignment options in the Design panel. Use Text align buttons to align text left, center, right, or justify within the text box.
Tip
Use the arrow keys to nudge text positioning by 1 pixel, or hold Shift+arrow keys to move by 10 pixels.
Troubleshooting
Text appears blurry or pixelated
Check your zoom level and ensure text is positioned on whole pixel values. Avoid scaling text boxes - instead, change the
font size directly in the Design panel.Can't find the font I want to use
Install the font on your system first, then restart Figma. For team sharing, consider using Google Fonts which are available to all users, or upgrade to Figma Professional for custom font sharing.
Text is getting cut off in the text box
If using a fixed-width text box, drag the corner handles to resize it. Alternatively, switch to Auto width in the Design panel under the Text section to let text expand naturally.
Unable to edit text after creating it
Double-click the text element to enter edit mode, or select it and press
Enter. If text is inside a component, you may need to Go to main component to make edits.Ready to get started with Figma?
Put this tutorial into practice. Visit Figma and follow the steps above.
Visit Figma →