Text & Media as Layers

Text in interface design plays a vital role in the user experience, guiding and informing users. Whether it's a call to action, navigation, or content, the right placement, font, and arrangement make all the difference.

To create text in Figma, start with the Text tool found in the bottom toolbar. Press the T key to activate this tool, then click anywhere on the canvas to begin typing. With the Text tool, you can experiment with various fonts, sizes, and alignments, ensuring the text not only conveys the message but also complements the overall design aesthetic.

With the Text tool activated, just click on the canvas, and a new text layer will appear. This layer automatically adjusts its width to fit your content, expanding as you type more, a feature known as Auto width.

This method is often referred to as point text, paragraph text, or area text, allowing for dynamic text entry without the need to predefine the box size. It's perfect for labels, headings, or anywhere your text length varies.

To start:

• Activate the Text tool.
• Click on your canvas.
• Begin typing.
• Hit Return (Mac) or Enter (Windows) to start a new line and format your text as needed.

When you need text to fit within a specific space, Figma lets you create a text layer using the click-and-drag method. This is called area text. It ensures your text wraps and flows neatly within the bounds you define.

This approach works well for paragraphs in blog post layouts, product descriptions, or any content that needs to stay within fixed dimensions. As you type, the text automatically wraps to fit the box.

To create an area text layer:

1. Select the Text tool.
2. Click and drag on the canvas to define the text box size.

Editing text layers in Figma requires minimal fuss. Whether you're refining copy on a landing page or updating labels in a user interface, the process is intuitive.

Here's how edit a text layer:

• For selected layers: Press Return (Mac) or Enter (Windows) to jump straight into editing mode.
• For unselected layers: Double-click on the canvas layer to enter editing.

Once in edit mode, you can seamlessly transition to other text layers for editing by clicking on them. You don't need to exit or reselect.

Even for native speakers, typos are inevitable. Figma's spell check underlines spelling mistakes with a squiggly red line.

To correct these errors:

1. Right-click on the misspelled word to see a list of corrections.
2. Click on the word and press Tab to swiftly choose the first suggestion.

For trickier spelling challenges, you can use a plugin like SPELLL.^[1] Such plugins not only catch complex errors but also allow you to add new words to your dictionary and manage your text efficiently, all without leaving the Figma application.

If you write text in languages other than English or Russian, spell check is disabled by default. To enable spell check, go to Text > Spell check in the Main menu and click Check spelling. Before doing so, ensure you have installed your language via the Figma font installer.

How text layer dimensions adapt to content changes depends on the resizing properties. Here's a brief on each setting:

• Auto width: This setting allows the layer's width to expand to accommodate the text. Pressing Return (Mac) or Enter (Windows) starts a new line, making it ideal for headings or short phrases that adjust horizontally.
• Auto height: With this setting, the height adjusts to fit the content. Text exceeding the layer's width wraps to a new line automatically. It's perfect for paragraph content where vertical space needs to adjust dynamically.
• Fixed size: Both the width and height of a text container remain unchanged, regardless of the amount of text. This type is useful for text boxes when you don't want to alter the overall structure and aim to keep the interface tidy.

You can find those settings in the Design panel in the layout section.

Editing text layers in Figma involves managing the bounding box which frames your text. It defines text position and how it occupies space on your canvas.

To adjust a text layer's bounding box:

1. Choose the text layer you want to adjust.
2. Hover your mouse over the bounding box's edge. Look for the cursor to switch to the Scale icon with arrows on both ends.
3. Click and drag to resize the bounding box to your desired dimensions.

Figma recognizes these adjustments as manual changes, automatically setting the text layer's resizing property to Fixed size. As a result, your text adjusts to fit the new size while maintaining its original alignment settings.

Adding images and videos to your designs in Figma vividly brings ideas to life, showcasing what the final product will look like. Figma supports a variety of media formats including:

• JPG, PNG, HEIC, WebP, TIFF (Safari only), and GIF for images
• MP4, MOV, and WebM for videos

This ensures flexibility in integrating high-quality visuals and animations. To easily identify media types in your layers panel, Figma displays an image icon for static pictures and a video icon for videos and GIFs.

Note that Figma converts SVG files into vector layers, meaning you can edit them just like any Figma-drawn shapes.

To begin enriching your designs with images, first import them to your canvas. You can do this by:

1. Selecting Place image from the Main menu → File → Place image/video.
2. Selecting Place image from the Shape tools dropdown in the bottom toolbar.
3. Using the shortcut:

• Mac: Shift Command K

•Windows: Shift Ctrl K

This action opens your file browser to choose one or multiple images. When selecting images, you have the flexibility to add them individually by clicking on the canvas. It allows precise control over their placement and initial size. A preview rectangle appears, showing the selected image(s) and a badge indicating the quantity chosen.

For a quicker approach, use the Place all button in the toolbar to add all selected images in stacked layers with a single click.

To start adding images as fills to objects in Figma, you can use either a local image or generate one with AI.

Here’s what you do:

1. Select the shape you want to customize.
2. In the Design panel, click the Fill swatch to open the color picker. By default, you’ll see a black and white checker placeholder.
3. Click Choose image in the preview, select your image file from your computer, and hit Open. Your selected shape will now display the image as a fill.

You can also use AI-generated images without leaving Figma. In the Fill settings, choose the AI tab and describe what you want, like “a big red fluffy cat photo,” to generate a custom image fill instantly.

The Make an image tool in Figma uses AI to generate visuals from text prompts. You can use it to fill an existing shape or create a new image layer.

To get started in Figma Design, FigJam, Slides, or Sites:

• Select a layer to fill or deselect everything to create a new layer
• Open the Actions menu and select Make an image
• Enter a detailed prompt
• Choose an available AI model
• Click Make it or press Command Enter

Quick prompt tips:

• Be specific: "a wooden desk with a laptop, coffee mug, and indoor plant" works better than "a desk"
• Add context: include lighting, mood, or color palette if relevant
• Keep it visual: focus on describing what you want to see, not how it should be used

While using images as fills offers convenience for quickly applying visuals to shapes, it limits your flexibility in editing. Masks provide more precise control over the image's visible area, allowing you to move the image to select the exact area you want visible. In contrast, fills are less versatile. When an image is added as a fill to a shape, you cannot specify which area of the image is visible if the image is larger than the object. This makes fills less suitable for detailed design work where the focus is on a specific part of an image.

To add a mask over an image in Figma:

1. Place the image on the canvas.
2. Select both the image and the shape you intend to use as a mask from the Layers panel. Ensure the shape layer is beneath the image layer.
3. Choose Use as mask from the right-click context menu or by clicking the ellipse sun icon at the top of the Design panel.

If you want to add multiple images to multiple objects, Figma supports bulk actions. Start by accessing the Place image setting from the Main menu → File , the Shape tools menu in the bottom toolbar, or using a shortcut Shift Command K.

Figma then opens an upload window, allowing you to select your images. Once you click Open, Figma displays a + cursor and a thumbnail of the first file.

If you've selected multiple files, a badge indicates the number of files left to place, and you can:

• Click on an area in the canvas to add an image. Figma adds the file at its original dimensions.
• Click and drag to define the image's dimensions if you want different dimensions than the original.
• Select an existing object on the canvas to apply the image as a fill, with the Fill mode set to Fill.