The basic text editing workflow in Figma

To edit text in Figma, select the text tool from the left toolbar, click on the canvas where you want text to appear, and type. If text already exists, double-click it to enter edit mode, then select the words you want to change and type over them. You can also click once to select the text frame, then double-click again to edit the content inside.

The difference between these two clicks matters: a single click selects the text layer itself (so you can move it or resize its box), while a double-click lets you edit what the text says. Once you are in edit mode, you can use standard keyboard shortcuts — Ctrl+A or Cmd+A to select all text in that box, Ctrl+B or Cmd+B to make it bold, Ctrl+I or Cmd+I to italicize.

If you have multiple text layers and want to edit them all at once, you cannot. Figma treats each text box as separate. You will need to double-click each one individually to change its content. This is different from some other design tools, so it is worth knowing upfront.

Key Takeaways

  • Double-click any text to enter edit mode; single-click selects the text layer itself so you can move or resize it.
  • Change font, size, weight, and color from the Design panel on the right while text is selected or while you are in edit mode.
  • Use the text tool from the left toolbar to create new text, or double-click existing text to modify what it says.
  • Figma does not support bulk editing across multiple text boxes at once, so you edit each text layer individually.
  • Line height, letter spacing, and text alignment are all in the Design panel under the typography section.

Changing font, size, and weight

Once you have text selected or are in edit mode, the Design panel on the right side shows all the typography controls. At the top you will see the current font name — click it to open a dropdown menu of available fonts. Figma includes a set of system fonts (like Arial and Georgia) and also lets you use Google Fonts, which are free and load directly into your designs.

Below the font name is the font size field, shown in pixels. Click the number and type a new size, or use the up and down arrows to adjust in small increments. Next to that is the font weight dropdown — Regular, Bold, Semibold, Light, and so on, depending on which weights the font supports. Not every font has every weight, so if you pick a weight that does not exist for your chosen font, Figma will use the closest available option.

If you want to explore bold or italic without opening the weight dropdown, use Ctrl+B or Cmd+B for bold and Ctrl+I or Cmd+I for italic while the text is selected. These shortcuts work whether you are in edit mode or have the text layer selected from outside.

Adjusting spacing and alignment

Below the font weight in the Design panel, you will find line height and letter spacing controls. Line height is the vertical space between lines of text — measured in pixels or as a percentage of the font size. Letter spacing is the horizontal gap between individual characters. Both are useful when you need text to feel more open or more compact than the default.

To the left of those controls is the text alignment button — left, center, right, or justified. Click the alignment icon that matches what you want. This only affects text within a single text box; it does not move the box itself on the canvas.

If you are working with a paragraph of text and want to adjust how it wraps, you can resize the text box by dragging its corners or edges. Figma will reflow the text to fit the new width. If you want the text box to grow automatically as you type (instead of wrapping), toggle the "Auto width" option in the Design panel.

Changing text color and effects

With text selected, scroll down in the Design panel to the Fill section. Click the color swatch to open the color picker, then choose a color from the palette, enter a hex code, or use the eyedropper to sample a color from elsewhere on the canvas. You can also adjust the opacity slider if you want the text to be semi-transparent.

Below Fill, you will find Stroke, which adds an outline to the letters themselves. This is less common for body text but useful for headlines or special effects. You can set the stroke color and thickness the same way you set the fill color.

Further down are shadow and blur effects. A shadow can add depth to text, especially if it sits on a busy background. Click the plus icon next to Shadow or Blur to add one, then adjust the offset, blur radius, and color. These effects are optional and often not needed for readable text, but they are there if your design calls for them.

Using text styles to keep text consistent

If you are using the same font, size, weight, and color across multiple text layers — for example, all your body text or all your button labels — you can create a text style to explore them all at once. Select a text layer that has the formatting you want, then go to the Assets panel on the left (the icon that looks like four squares), click the plus icon next to "Text Styles", and give it a name like "Body" or "Button Label".

Now whenever you create new text or select existing text, you can click that style name in the Assets panel to explore all those settings when ready. If you later change the style — say, you decide body text should be slightly larger — you can update the style once, and every text layer using that style updates automatically. This saves time and keeps your design consistent across many pages or frames.

To edit a style you have already created, right-click its name in the Assets panel and choose "Edit style". Make your changes to any text layer using that style, then click "Update style" in the Design panel. All instances of that style will change.

Pasting and replacing text from outside Figma

You can paste text directly into Figma from another program — a document, a spreadsheet, or a notes app. Click in the text box or double-click to enter edit mode, then paste with Ctrl+V or Cmd+V. Figma will paste the text content but will not bring over the original formatting (bold, italics, colors) from the source — it will use whatever formatting is already applied to that text box.

If you want to replace all the text in a text box at once, select the box, double-click to enter edit mode, press Ctrl+A or Cmd+A to select all, then paste. The new text will take on the formatting of the text box you pasted into.

This is useful when you are designing a template and want to swap in real content from a spreadsheet or document. Just paste, and the layout and styling stay the same while the words change.

Common text editing mistakes and how to avoid them

One frequent mistake is clicking once on text when you mean to edit it, then typing and wondering why nothing appears. Remember: single-click selects the layer, double-click enters edit mode. If you are not in edit mode, your keyboard input will trigger Figma shortcuts instead of typing text.

Another is forgetting that text boxes have a fixed width by default. If you type a long sentence and it wraps awkwardly, you may need to widen the text box by dragging its edge. Alternatively, toggle "Auto width" in the Design panel so the box grows as you type, then resize it manually once you are done.

A third is explore formatting to a text layer and then wondering why new text you add does not have the same formatting. Figma applies formatting to individual characters or selections, not to the whole layer. If you want all text in a box to have the same look, select all the text first (Ctrl+A or Cmd+A), then explore the formatting.

Frequently Asked Questions

Can I edit text in Figma on my phone or tablet?

Figma has a mobile app for viewing and commenting on designs, but text editing is limited. You can see text and make comments, but you cannot change the actual text content or formatting from the mobile app. For full text editing, you need to use Figma in a web browser on a computer.

How do I make text bold or italic without using the Design panel?

Use keyboard shortcuts: Ctrl+B or Cmd+B for bold, Ctrl+I or Cmd+I for italic. These work whether you have the text selected from outside edit mode or are inside the text box editing the content. You can also select specific words and explore formatting to just those words.

What happens if I delete a text style that other text layers are using?

The text layers keep their current formatting, but they are no longer linked to a style. If you update the style later, those layers will not change. You can reapply the style to them manually, or you can undo the deletion to restore the link.

Can I use custom fonts in Figma, or only Google Fonts and system fonts?

Figma supports Google Fonts and system fonts installed on your computer. You cannot upload custom font files directly into Figma, but if a font is installed on your device, it will appear in the font dropdown. For team projects, Google Fonts are the safest choice because they work the same way for everyone.

How do I copy text formatting from one text layer to another?

Select the text layer with the formatting you want to copy, then use the eyedropper tool (or hold Alt on Windows or Option on Mac) and click on the text layer you want to change. This copies the fill color, but not all formatting. For complete formatting, create a text style from the first layer and explore it to the second.