How to Edit Text in Figma: A Complete Guide

Figma has become one of the most widely used design tools for UI/UX work, prototyping, and collaborative projects. Whether you're tweaking a button label or overhauling an entire layout's typography, understanding how text editing works in Figma saves significant time and frustration.

Getting Started: Selecting and Entering the Text Tool

To edit any text in Figma, you first need to activate the Text tool. You can do this in two ways:

• Press T on your keyboard (the fastest method)
• Click the Text icon (the "T" shape) in the toolbar at the top left

Once the Text tool is active, clicking anywhere on the canvas creates a new text box. But if you want to edit existing text, you have two options:

1. Double-click directly on the text element on the canvas
2. Single-click to select the element, then press Enter to enter edit mode

When you're inside a text element in edit mode, the cursor becomes a standard text insertion point — familiar to anyone who's used a word processor.

Basic Text Editing Operations

Once you're inside a text element, standard editing shortcuts apply across both Mac and Windows:

To select a specific word, double-click it. To select an entire line, triple-click. These are the same conventions you'd find in most text editors, so the learning curve is minimal.

Editing Text Properties in the Right Panel ✏️

Editing the content of text is only half the picture. Figma's real power comes from how it handles text properties in the right-side design panel. When a text layer is selected (not necessarily in edit mode), the panel surfaces:

• Font family — searchable dropdown listing all available fonts, including Google Fonts
• Font weight — thin, regular, medium, bold, and variations depending on the typeface
• Font size — set in pixels, adjustable by typing a value or scrolling
• Line height — controls vertical spacing between lines; can be set as a fixed pixel value or a percentage
• Letter spacing — adjusts spacing between individual characters, in pixels or percentage
• Paragraph spacing — adds space between separate paragraphs within the same text box
• Text alignment — left, center, right, or justified
• Text decoration — underline or strikethrough

Changes here apply to selected text within the layer if you're in edit mode, or to the entire text layer if you've simply selected the element without entering edit mode. This distinction matters when you want to style just one word differently from the rest.

Working With Text Boxes: Fixed vs. Auto

One thing that trips up new Figma users is the difference between text box sizing modes. These control how the text container behaves when content changes.

• Auto width — the text box expands horizontally as you type; text never wraps
• Auto height — the width is fixed, but the box grows vertically to fit content
• Fixed size — both width and height are locked; text may overflow if it exceeds the bounds

You can switch between these by resizing the text box manually. Dragging a handle converts it from auto to fixed. Double-clicking a corner handle reverts it to auto. This behavior is tied to your workflow: auto height suits most UI text blocks, while fixed size is common when you need precise layout control.

Mixed Styles Within a Single Text Layer

Figma supports mixed formatting within one text element — something that's essential for designs where, say, a headline needs one word bolded or colored differently.

To apply mixed styles:

1. Double-click the text layer to enter edit mode
2. Highlight the specific characters or words you want to change
3. Adjust font, size, color, or weight in the right panel

The panel will display mixed in any property field where values differ across selected text — a helpful indicator that your layer contains varied formatting.

Using Text Styles for Consistent Editing 🎨

If you're working on a larger project or within a team, Text Styles are worth understanding. These are saved style definitions (font, size, weight, line height, etc.) that can be applied to any text layer.

To apply a text style, select a text layer and click the style icon (four dots) next to the text section in the right panel. Editing a saved style updates every text element using it across your file — which is powerful for maintaining consistency but also means accidental edits can have wide-reaching effects.

Finding and Replacing Text

For larger design files, Figma includes a Find and Replace function:

• Mac: Cmd + H
• Windows: Ctrl + H

This lets you locate specific text strings across all layers and replace them in bulk — useful when a product name changes or a URL needs updating across dozens of screens.

Variables That Affect Your Text Editing Experience

How smoothly text editing works in Figma depends on a few factors that vary by user:

• Plan type — free Starter plans have limits on the number of editors in a file, which affects collaborative text editing
• Browser vs. desktop app — the desktop app generally offers more stable font rendering and system font access; browser-based Figma may behave differently depending on your OS and installed fonts
• Font availability — if a design file uses a font not installed on your system, Figma flags it as missing and substitutes a fallback, which can affect how text renders and reflows
• Component and instance structure — text inside a component instance may be locked or constrained by the main component's properties, limiting what you can edit without detaching the instance
• Auto Layout frames — text elements inside Auto Layout containers behave according to the layout's rules, so resizing or editing content can shift surrounding elements

Text in Prototypes and Components

Editing text inside components introduces another layer of complexity. Figma allows text overrides on instances — meaning you can change the text content of a component instance without affecting the master component. However, some style properties (like font or size) may be restricted depending on how the component was built.

If you find you can't edit a text element, it's worth checking whether it sits inside a locked layer, a component with restricted overrides, or a frame set to clip content in a way that hides the text entirely.

The specifics of what you can and can't freely edit often depend on how your file was structured — whether by you, a teammate, or a third-party design system — and that structure varies considerably from project to project.