How to Edit Text in Figma: Best Practices

Text in Figma lives in one panel. Select a layer and the right sidebar hands you font, size, spacing, alignment, and the resizing rule that decides what the box does when the words change. There’s no separate text mode to switch into.

The Figma text tool is a text editing feature inside Figma’s browser-based interface design platform that resizes, formats, and syncs a line of type across every collaborator viewing the file at once.

That last part is why writers and PMs end up in the same panel as trained designers. A text layer is a shared object sitting in a file, not something one person exports and emails around.

Figma’s own 2025 IPO filing puts adoption at 95 percent of the Fortune 500 as of March 2025. At that headcount, one person’s sloppy line height stops being a personal habit.

What Is the Figma Text Tool

Two things share the name, and mixing them up causes small headaches later.

The tool is the T icon in the toolbar plus the Text section that appears in the right sidebar once something is selected. The text layer is the object itself, sitting in the layers panel alongside your frames and shapes. Tool creates and changes, layer holds.

You get into it two ways. Clicking or dragging on empty canvas spawns a fresh layer. Double-clicking on something that already exists drops you inside it, cursor blinking wherever you clicked.

Most people meet this panel halfway through building an actual screen, not in a tutorial about typography.

Figma’s 2025 prospectus put monthly active users past 13 million, and two out of three of them don’t call themselves designers. Which explains the panel’s flatness. It isn’t a typographer’s control surface, it’s something an engineer can open once a quarter and still understand.

One real difference from file-based tools like Sketch: every keystroke syncs live. There is no save, and no version sitting on somebody’s desktop.

How to Enter Text Edit Mode and Change Content

Press T, then click or drag to start something new. Double-click an existing layer on the canvas. Or select the layer first and press Enter on Windows, Return on Mac. Figma remembers whichever route you used last.

Changing the words is the easy half.

1. Click or drag inside the layer to place the cursor or select a range
2. Type to replace, or highlight a single word to restyle it without touching the rest of the line
3. Adjust font, size, or color for that highlighted range from the right sidebar
4. Click outside the box, or press Esc, to leave edit mode

Each of those has a shortcut behind it. The fuller list of Figma keyboard shortcuts covers a lot more than the four above.

Pasting from outside Figma keeps some formatting and quietly drops the rest, which is worth a glance before you move on. When a paste lands wrong, fixing it works the same way undoing any other change in Figma does.

How Does Text Box Resizing Work

Every text layer carries a resizing property, and it decides how the bounding box reacts once the content inside it changes. The setting lives in the Layout section of the right sidebar.

A single click with the text tool gives you auto width by default. Drag any edge by hand and the layer flips to fixed size right then, which catches people out constantly.

What the layer represents usually tells you which one to pick.

• A tag or a button label wants auto width so it hugs the text instead of trailing dead space
• Body copy inside a card wants auto height, so the card stretches rather than clipping a sentence at the ankle
• Anything locked into a strict grid, or driven by a responsive frame built with auto layout, usually needs fixed size to hold its edge

Get this wrong and the text looks cramped or cut off after the design ships. It’s the most common reason, by some distance.

Font, Weight, Line Height, and Letter Spacing

Everything type-related sits in the Text section of the right sidebar, which opens as soon as a layer or a range inside it is selected. Click the font name at the top to open the picker. Search rather than scroll if the list runs long, because it will.

The properties you’ll actually touch:

• Font family pulls from your system, a shared team library, or Google Fonts
• Weight gives you Regular, Bold, or a point along a variable font’s weight axis when the file supports one
• Line height sets the vertical space one line occupies, as a percentage or a fixed value
• Letter spacing is tracking between characters, and it moves independently of line height
• Paragraph spacing handles the gap between blocks, which is not the same thing as the space inside one

Most fonts shipping today are OpenType. Figma treats a variable font as one file carrying every weight, instead of ten separate installs cluttering the picker.

Missing fonts get substituted until the real file loads, or until somebody finishes adding the missing font to Figma properly.

Alignment

Horizontal alignment gives you left, center, right, and justify. Vertical gives you top, center, bottom, and it only does anything once the box is taller than the text inside it.

Justify is the one that interacts badly with truncation later. Worth remembering before you combine them.

Underline, Strikethrough, and Text Case

Underline and strikethrough both toggle from the decoration menu. There’s a longer walkthrough on underlining text in Figma if the basic toggle isn’t doing what you want.

Case is the interesting one. Uppercase, lowercase, and capitalize change how the text displays without editing the characters stored in the layer. Switch case back to none and your original letters come back exactly as typed, because nothing was ever overwritten.

Bulleted and Numbered Lists

List formatting is in the same Text section as everything else. No separate tool, no special layer type.

The bulleted and numbered buttons sit next to each other, so flipping a line between them is one click. Tab indents a line to nest it under the one above, Shift and Tab pulls it back out. Nest a few levels deep and each level can carry its own bullet style.

A list built this way stays one text layer rather than a chain of separate objects, which makes positioning far less annoying.

The convenience stops at the handoff, though. A nested list in Figma doesn’t map one to one onto real HTML list markup, so developers generally rebuild the structure instead of copying it.

Text Truncation and Vertical Trim

Two settings hide under the three-dot menu in the Text section, and both control empty space you probably didn’t know you had.

Truncate text caps a layer at a set number of lines and drops an ellipsis once the content runs past it. There’s a documented gap here: truncation miscalculates when paragraph spacing is active on the same layer, and text can still spill past the box. Annoying, and not obvious until you see it happen.

Vertical trim strips the extra leading a font carries above its cap height and below its baseline. That leading is why default line height leaves visible padding even when you haven’t asked for any.

Spacing isn’t purely a taste question either. The W3C’s WCAG 2.2 guidelines put numbers on it, under Success Criterion 1.4.12.

• 1.5x the font size, minimum line height
• 2x the font size, minimum spacing after a paragraph
• 0.12x the font size, minimum letter spacing a user needs to be able to set

Vertical trim mirrors the CSS text-box-trim property that browsers are starting to support. Penpot’s community has asked for the same behavior, pointing at Figma’s version as the thing to match.

These decisions feed straight into accessible typography later, so they’re worth more attention than a padding tweak normally gets.

Text Styles and Typography Variables

A text style saves several properties under one name, and applying the name applies all of them at once. Font family and weight, size, line height, letter spacing.

Typography variables go further than a style can.

Figma shipped typography variables, letting font size, weight, and other type properties swap by mode, in April 2024 at its Framework design-systems event, according to the feature’s own product-update thread on Figma’s community forum.

A style applies one fixed set of values wherever it lands. A variable holds different values per mode, light against dark or mobile against desktop, and swaps on its own.

Detaching a style breaks the link permanently. Right call for a genuine one-time exception, wrong call for anything you expect to stay in sync.

Variables are also what make responsive typography workable inside Figma, rather than something you bolt on with a plugin and hope.

Editing Text Inside Components and Instances

Put a text layer inside a component and the words now live in two places: the main component and the instance.

Edit the main and the text updates on every instance that hasn’t touched that property. Edit an instance and you create a local override, which sticks around even after the main changes.

Instance edits stay local. The change hits that one copy, survives future updates to the main, and works well for a single card that needs different button text.

Main component edits go everywhere. Any instance already carrying its own override on that property will skip the update quietly, so structural or brand-wide changes belong here.

Figma’s own blog describes how Squarespace’s design platform team tracked adoption while retiring an older shared library in favor of one built with Auto-Layout, using a feature called Design System Analytics.

That same analytics layer started tracking styles and variables data, not just component data, for Organization and Enterprise customers starting February 2025, per Figma’s own product blog.

Overrides don’t announce themselves on the canvas. Finding out which instances quietly stopped listening is exactly the problem that tracking exists to solve.

Text Specs in Dev Mode

Dev Mode is the inspect view. Whatever you set in the Text section comes out the other side as numbers a developer can copy.

Figma announced it at Config and ran it as a free beta for everyone through the rest of 2023.

For each text layer, a developer gets font family, weight, and size, plus line height and letter spacing already converted into CSS values. The truncate text setting shows up as a line-clamp attribute.

Roughly one in three Figma users are developers, and among paid seats developers actually outnumber designers. CTO Kris Rasmussen first gave that ratio to The New Stack in 2023, and the outlet reported it unchanged when it checked back in 2024.

Pinterest’s design systems team stopped clicking through panels by hand entirely. They built a dashboard called FigStats on Figma’s REST API to track component and style usage across the company, a project documented on Figma’s own developer handoff resources.

Not everything translates cleanly. A few type spacing settings still have no one-to-one CSS equivalent, which is why a fuller Dev Mode walkthrough is worth having open the first few times you inspect a type-heavy screen.

Finding and Multi-Editing Text Across a File

Editing one layer at a time falls apart the moment the same label appears forty times in a file.

Native find and replace opens with Cmd+F on Mac or Ctrl+F on Windows, and it searches every text layer on the current page or across the whole file.

• Match case and whole word filters cut the results down before you replace anything
• Clicking a result jumps the canvas to that layer
• Replace runs on one layer, on several held with Cmd or Ctrl, or on a full range held with Shift

Multi-edit is a different move. Select several text layers, right-click, and choose the option to edit them together. Type once, and every selected layer changes in step. Beats opening each one when a batch of labels all need the same correction.

When Text Editing in Figma Does Not Work as Expected

Text editing breaks in a small number of predictable ways. Knowing them saves you a debugging session.

• Locked layers won’t enter edit mode, and neither will a text layer sitting inside a locked group
• Font mismatches show up when a teammate hasn’t synced the same fonts, whether through a shared library or something like Adobe Fonts, so the same layer renders differently on each machine
• Detached styles stop receiving updates, meaning a team-wide typography change can skip that layer without telling anyone
• Multi-edit across mismatched layers still runs, but the change only lands on properties every selected layer actually shares
• Variable mode mismatches make a bound layer look broken when it isn’t. It’s showing whatever value the current mode holds

None of that makes the tool fragile. The failure points are just specific enough that checking them beats assuming a bug.

FAQ on How To Edit Text In Figma

What Is the Difference Between Adding New Text and Editing Existing Text

Both use the same Figma text tool and produce the same kind of layer.

New text starts with default font settings. Existing text opens with whatever font, size, and color somebody already picked, which is why an edit sometimes looks nothing like what you expected to type into.

What Keyboard Shortcuts Speed Up Text Formatting in Figma

Cmd or Ctrl plus B bolds a selection, I adds italics, U adds underline.

Font size nudges up or down with Cmd or Ctrl plus Shift and the > or < key. Much faster than clicking into the sidebar for a one point change.

How Do You Spell Check Text Inside Figma

There’s a native spell checker now. Misspelled words pick up a red underline as you type, based on your operating system’s or browser’s language settings.

Coverage is narrower than a dedicated tool, so for broader language support or a sweep across every layer in a file at once, plenty of people still install a Community plugin like Spelll.

Can You Edit Text in Figma Without an Internet Connection

No dedicated offline mode exists, in the browser or the desktop app. Figma’s help center is explicit that both behave the same way here.

Drop your connection mid-edit and the page you already have open stays editable, with changes stored locally until you’re back. Opening a file you hadn’t already loaded, or pulling components from a shared library, waits.

How Do You Check Text Color Contrast While Editing in Figma

Figma added a native contrast checker to its color picker in March 2025. Pick a fill on a text layer and it reports the contrast ratio against whatever sits behind it, scored against WCAG thresholds, right on the canvas.

It only works when the color is set directly rather than through a shared color style, which is a real limitation. Teams doing a proper audit still cross-check with something like Stark.

Does Text Editing in Figma Sync in Real Time Across Multiple People

Yes. Every keystroke inside a text layer broadcasts to everyone else in the file, using the same multiplayer engine that moves cursors and shapes around.

Two people typing into the same layer at the same moment can still cause a brief conflict, though it sorts itself out within a second.

What Should You Fix First in How To Edit Text In Figma?

The Figma text tool rewards a strict fix order once a file gets messy: resizing settings first, then text style and variable consistency, then truncation and spacing, since each later fix depends on the one before it working correctly.

• Resizing on labels and buttons
• Style and variable consistency
• Truncation and spacing before handoff

Skip the order and you pay for it. Fixing resizing after variables are already wired in means redoing the binding, not just the box.

Spacing has a floor worth knowing. WCAG 2.2’s Success Criterion 1.4.12 sets minimum word spacing at 0.16 times the font size, and tightening past that stops helping anyone read.

The next thing worth learning on top of this is bending type along a path, covered in the guide to curving text in Figma.