Another quick way to open the Text tool is to press the T key on your keyboard. All text in Figma, like other objects, is created on layers. You’ll see all text layers in the Layers panel on the left side of Figma prefaced with a “T” icon.
If you don’t want to change the look of the text but instead want to add, delete, or correct something, click the cursor to place it at the desired position instead. Now you can modify as needed. You can also select the text by clicking the text layer in the Layers panel on the left. Additionally, if you want to change the look of multiple text layers at once, you can hold down the Shift key as you select multiple text layers.
Click the three horizontal dots at the bottom-right corner of the Text panel to expand the Type Details window. Here is where you’ll find your alignment, decoration, and spacing options. Use the Stroke panel to add an outline (or inner line) to your text and adjust its size and color. The Effects panel lets you add text effects like drop shadow, inner shadow, and blurring. If the Text panel is grayed out and you see a yellow icon with “A?” next to the font’s name, the font is not installed on your computer. [2] X Research source You can’t edit the text unless you install the missing font or choose a replacement. To choose a replacement font, click the A? to open the Missing Fonts screen, and then select a font you have installed.
Press the M key on the keyboard to select the Move tool. Click the text layer you want to move in the Layers panel. This surrounds the text with a bounding box. Click and drag the text to the desired position.
Press the K key on the keyboard to open the Scale tool. Click the text layer in the Layers panel on the left. Drag any of the corner bounding boxes on the text outward to expand it, or inward to make it smaller.
One is to click the location where you want to add text. This creates a new text layer with text resizing set to Auto Width, which means that as you type, the width of the text box expands as you enter more text. [3] X Research source The other is to click and drag your mouse to draw a text box with the desired dimensions. This not only defines the size of the text layer before you start typing, but also sets the text resizing to Fixed Width, which lets you enter more text. It also automatically wraps the text so it overflows onto the next line.
Your text layers appear in the Layers panel with a “T” before them.
For example, if you’re designing a website and want all section headers to be 36pt and right aligned, you can create a Header style with those properties and apply it to every header on your website. When you make changes to a Text Style’s properties later, such as its typeface, alignment, or spacing, the changes will affect all text to which you’ve applied that style. This is a great way quickly change text all across your entire design without tediously editing multiple text layers separately. Text Styles do not include color. You can add color using the Fill panel, or by creating a Color Style, which we’ll get to later.
Give the style a name that’s reflective of the content you’re applying the style to (such as “body” or “links”), or descriptive of the style itself (such as “red header”).
Select the layers you want to apply the style to in the Layers panel. To select multiple layers, hold down the Shift key as you click each layer’s name. Click the four dots at the top-right corner of the Text panel in the right sidebar. Click the name of the Text Style to apply it. When you try to modify text that has a style applied to it, you won’t see a Text panel on the right—you’ll just see “Ag” and the style’s name.
Either select the text layer(s) you want to remove the style from in the Layers panel, or press T to open the Text tool and highlight the text. Hover your mouse cursor over the name of the Text Style on the “Ag” panel in the right sidebar. You’ll see a small link icon appear. Click the link icon to unlink the style from the text. The Text panel will then reappear in the right sidebar so you can edit the text separately.
Press T to activate the text tool, but don’t select any text. Click the four dots at the top-right corner of the Text panel to open the Text Styles window. Hover your mouse cursor over the style’s name. If you’re editing a local style (one you created in this project), you’ll see all of your options for editing the style now. You can also click the three dots to expand more options. If the style is in your Team Library, it will be marked a such, and editing it will be a little different. Click Go to style definition to view all styles in the Team Library, hover your mouse cursor over the style name, and click the two sliders to edit it there.
Select some text and choose a color from the Fill panel. Click the Style icon on the Fill panel (the four dots). Click the + to create a new style. Type a name for the style, such as its color, and click Create style. You can now apply that color style to any layer in Figma, including text layers.
Click the Assets tab in the left sidebar. Click the Library icon (the open book) at the top. Click Publish. Type a description of the changes you’re making, such as “Adding header style,” for the version history. Click the down arrow next to “Styles and components” to view and select styles to publish. Click Publish. Anyone working on the project in Figma will be prompted to receive the update.
