Summarize this article with:
Text makes or breaks your design. Learning how to edit text in Figma gives you full control over typography settings, font selection, and formatting across every text layer in your project.
Figma’s text editing tools live in the right sidebar panel. Once you know where to click and which keyboard shortcuts to use, modifying text content takes seconds.
This guide covers everything from entering text editing mode to adjusting line height, letter spacing, and font properties.
You’ll learn the exact steps to change font size, apply text styles, and fix common issues like missing fonts or unexpected text resizing behavior.
How to Edit Text in Figma
Editing text in Figma is the process of modifying text content, adjusting typography settings, and applying formatting within text layers using the right sidebar panel and keyboard shortcuts.
Users need this when creating user interface designs, updating copy in prototypes, or refining font selection for web and mobile projects.
This guide covers 6 core editing methods requiring 5 to 10 minutes and basic familiarity with Figma’s canvas.
Prerequisites
Before you start editing text layers, make sure you have the following ready.
- Figma account (Free, Professional, Organization, or Enterprise plan)
- Figma desktop app or web browser with Figma Font Helper installed
- Required fonts installed on your computer (.TTF or .OTF files)
- Edit access to the Figma file
- Time estimate: 5 to 10 minutes
The Figma Font Helper lets the browser version access local fonts on your system.
Without it, you’re limited to Google Fonts only.
Have you seen the latest Figma statistics?
Discover comprehensive Figma statistics including revenue growth, market share, user demographics, and funding data.
Check them out →Step One: How Do You Enter Text Editing Mode?
Double-click on any text layer or select it and press Enter (Return on Mac) to enter text editing mode.
The cursor appears inside the text layer, and you can now modify the text content directly on the design canvas.
Action
- Layers panel (left sidebar) → click the layer marked with “T” icon
- Double-click the text layer on canvas, or press Enter/Return
- Cursor blinks inside the text box, indicating edit mode is active
Purpose
Entering edit mode allows direct text content modification without changing layer properties.
You can click into any other text layer on the page while in edit mode to switch between them quickly.
Step Two: How Do You Select Text Within a Layer?
Click and drag across text characters to select a specific range.
Use Cmd+A (Mac) or Ctrl+A (Windows) to select all text within the layer.
Selected text appears highlighted in blue.
Action
- Click at the starting character position
- Drag to the ending character position, or triple-click to select the entire paragraph
- Selected text displays blue highlight
Purpose
Text layer selection determines which portion of the content receives formatting changes.
You can apply different font weights, sizes, or colors to specific words within the same text layer.
Step Three: How Do You Change Font Family and Style?
Click the font family dropdown in the Typography section of the right sidebar to browse available typefaces.
Select a font family, then choose a font style from the secondary dropdown.
Action
- Typography section (right sidebar) → Font dropdown → select font family
- Style dropdown → select font weight (Regular, Medium, Bold, etc.)
- Text layer updates immediately on canvas
Figma gives you access to Google Fonts by default.
Local fonts require the desktop app or Font Helper.
Organization and Enterprise plans can upload shared font libraries for team-wide access.
Purpose
Font selection controls the visual identity and readability of your text content.
Consistent typography across your wireframe or mockup builds a stronger design system.
Step Four: How Do You Adjust Font Size?
Enter a value in the font size field or use keyboard shortcuts to increase and decrease size quickly.
Action
- Typography section → Font Size field → enter value in points (pt)
- Increase: Cmd+Shift+> (Mac) or Ctrl+Shift+> (Windows)
- Decrease: Cmd+Shift+< (Mac) or Ctrl+Shift+< (Windows)
The shortcuts adjust size in preset increments.
For precise control, type the exact value directly into the field.
Purpose
Font size determines text hierarchy and visual hierarchy within your design.
Larger sizes draw attention to headlines; smaller sizes work for body copy and labels.
Step Five: How Do You Adjust Line Height and Letter Spacing?
Modify line height using the field below font size in the Typography section.
Adjust letter spacing (character spacing) to control the horizontal distance between characters.
Action
- Line Height field → enter pixel value or percentage
- Letter Spacing field → enter value in percentage or em
- Line height shortcuts: Shift+Option+</></strong> (Mac) or Shift+Alt+</> (Windows) </li>
- Letter spacing shortcuts: Option+</></strong> (Mac) or Alt+</> (Windows)</li>
Figma defaults line height to “Auto” which uses the font’s built-in spacing.
You can switch between fixed pixels and percentage values; Figma converts automatically.
Purpose
Line height and letter spacing control text readability and visual density.
Proper spacing follows accessible typography standards, improving legibility for all users.
Tight letter spacing works for headlines; looser spacing benefits body text in responsive design layouts.
Step Six: How Do You Apply Text Formatting?
Use keyboard shortcuts for quick formatting: Cmd+B (Mac) or Ctrl+B (Windows) for bold, Cmd+I or Ctrl+I for italic, Cmd+U or Ctrl+U for underline.
Access additional options in the Type Settings panel.
Action
- Select text → press Cmd+B / Ctrl+B for bold
- Press Cmd+I / Ctrl+I for italic
- Press Cmd+U / Ctrl+U for underline
- Typography section → Type Settings icon (three dots) → access strikethrough, letter case, OpenType features
The Type Settings menu reveals paragraph spacing, text indentation, and decoration options like dotted or wavy underlines.
Purpose
Text formatting adds emphasis and supports F-pattern reading behavior in interface designs.
Bold and italic styles create visual breaks that guide the eye through content.
Verification
Click outside the text layer or press Escape to exit edit mode.
The text layer displays your changes on the canvas immediately.
Check the Layers panel to confirm the text layer name.
Verify typography properties in the right sidebar match your intended settings.
Quick Verification Checklist
- Font family and weight display correctly
- Font size matches your specification
- Line height and letter spacing values are accurate
- Text alignment (horizontal and vertical) is set properly
- No missing font warnings appear in the file
Troubleshooting
Cannot Edit Text Layer
Verify you have edit access to the file; view-only permissions block text modification.
Check that the required font is installed on your computer.
Download Figma Font Helper if using the browser version.
Font Appears Different Than Expected
Confirm all team members use the same font version.
Check for missing font alerts in the file’s assets panel.
Upload shared fonts through Organization or Enterprise plans for consistency across collaborative editing sessions.
Text Reformats When Editing
Different font versions across editors cause this issue.
Standardize fonts team-wide or switch to Google Fonts for guaranteed consistency.
Variable fonts can also cause unexpected behavior if not all editors have the same version installed.
Text Overflow and Bounding Box Issues
Check the text resizing behavior setting: Auto width, Auto height, or Fixed size.
Fixed size layers can cause text overflow and truncation.
Double-click the bounding box edge to reset to auto width.
Related Processes
Once you master text editing, these related Figma skills will speed up your workflow.
- How to add fonts to Figma for custom typeface integration
- How to underline text in Figma for advanced text decoration
- How to curve text in Figma for text on paths
- How to italicize in Figma for emphasis styling
- How to superscript in Figma for mathematical and trademark notations
- How to use auto layout in Figma for dynamic text containers
- How to create a design system in Figma for text styles and typography tokens
Creating text styles lets you define reusable typography settings across your entire design file.
Publish styles to a team library for organization-wide consistency.
When building interfaces, proper text editing supports better user experience outcomes and cleaner developer handoffs when you export Figma to HTML.
FAQ on How To Edit Text In Figma
How do I enter text editing mode in Figma?
Double-click on any text layer or select it and press Enter (Return on Mac). The cursor appears inside the text box. You can also press T to activate the Text Tool and click anywhere on the canvas.
Why can’t I edit text in my Figma file?
You likely have view-only access to the file. Check your permissions in the share settings. Missing fonts also block editing. Install the required .TTF or .OTF files or download Figma Font Helper for browser use.
How do I change the font in Figma?
Select your text layer, then click the font family dropdown in the Typography section of the right sidebar. Browse Google Fonts or local fonts. Choose a font style (weight) from the secondary dropdown.
What is the keyboard shortcut to increase font size in Figma?
Press Cmd+Shift+> on Mac or Ctrl+Shift+> on Windows to increase font size. Use Cmd+Shift+< or Ctrl+Shift+< to decrease. These shortcuts adjust size in preset increments for quick typography adjustments.
How do I adjust line height in Figma?
Find the line height field in the Typography section below font size. Enter a pixel value or percentage. Keyboard shortcut: Shift+Option+> (Mac) or Shift+Alt+> (Windows) to increase vertical spacing between lines.
Can I edit multiple text layers at once in Figma?
Yes. Select multiple text layers using Shift+click or Cmd+click (Ctrl+click on Windows). Any changes to typography properties apply to all selected layers simultaneously. Content changes require editing each layer individually.
How do I make text bold or italic in Figma?
Select your text and press Cmd+B (Ctrl+B) for bold or Cmd+I (Ctrl+I) for italic. These shortcuts work without breaking existing text styles. Access underline with Cmd+U (Ctrl+U) for additional call-to-action emphasis.
What are text styles in Figma and how do I use them?
Text styles save reusable typography settings like font, size, weight, and spacing. Create them from the Typography section by clicking the four-dots icon. Apply styles across your file for consistent design system implementation.
How do I fix missing fonts in Figma?
Figma displays a missing font alert when required fonts aren’t installed. Click the alert to replace with available fonts. Install missing .TTF or .OTF files locally, or use the Figma desktop app for automatic font access.
How do I change text alignment in Figma?
Select your text layer and use the alignment options in the Typography section. Choose left, center, right, or justified for horizontal alignment. Vertical alignment options position text within the bounding box dimensions.
Conclusion
Knowing how to edit text in Figma speeds up your entire design workflow. You now have the steps to enter text editing mode, modify text content, and apply typography properties with precision.
The keyboard shortcuts alone save hours over manual adjustments. Cmd+B for bold, Cmd+Shift+> for font size changes, Option+</> for letter spacing.</p>
Build on these fundamentals by creating text styles for your design system. Consistent typography across components makes collaboration smoother and developer handoffs cleaner.
Start with one file. Master the text tool, the right sidebar panel, and the Type Settings menu.
Then explore how to use components in Figma to scale your text patterns across larger projects.
Your designs will look sharper. Your process will feel faster.
