Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Contact Us
  • Home
  • Courses, tutorials, projects – Figma Learn
  • Courses
  • Figma Design for beginners

FD4B: Build your bio using text layers

Written by Figma Man

Updated at June 19th, 2025

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Administration – Figma Learn
    Manage files and projects Manage a team Manage your account Manage a Figma organization Manage Enterprise plan settings and permissions Billing Manage Figma in a school
  • Figma Design – Figma Learn
    Create prototypes Import and export Create designs Tour the interface Dev Mode Work together in files Build design systems Figma Draw
  • Get started – Figma Learn
    Set up your account Layers 101
  • FigJam – Figma Learn
    Import and export Run meetings Work on boards Tour the interface
  • Community – Figma Learn
    Explore the Community Creator tools and resources
  • Help – Figma Learn
    Troubleshoot Common questions Work with support
  • Work across Figma – Figma Learn
    Figma AI Work across Figma
  • Courses, tutorials, projects – Figma Learn
    Courses Projects
  • Figma Slides – Figma Learn
    Create and edit slides Present slide decks Tour the interface Import and export
  • Figma Buzz – Figma Learn
    Templates in Figma Buzz Create and edit assets in Figma Buzz Overview
  • Figma Make – Figma Learn
    Tour the interface Work with Figma Make
  • Figma Sites – Figma Learn
    Design a site Create webpages and breakpoints Make your site interactive Preview and publish a site Tour the interface
+ More

Table of Contents

Write your bio Add text layers Align your layers Style the text layers Check your knowledge

Write your bio

Now that our avatar is complete, we'll use text layers to build our greeting and bio.

Text is a crucial component in design, and can be used to communicate information for encourage action. The way we style text within our designs can also help support visual hierarchy, convey the appropriate tone, and even make or break the accessibility of a design.

We'll use the Text tool to add text layers to the canvas.

Add text layers

  1. Select the Text tool in the toolbar or press T.
  2. Click on the canvas below the avatar and type your name. If you take a look at the left sidebar, you'll notice that the layer name reflects the string of text on the canvas. It will continue to do this until we rename the layer. 
  3. With the Text tool still selected, click and drag your cursor to create a text box below the other layers. Make sure the text box is large enough to fit your content. Don't worry about its exact size; we'll refine that in a future lesson.

Add two text layers below your avatar.png

As you type, you'll see that the text content stays contained within the text box, automatically wrapping to the next line instead of flowing off to the side. Why is this different from the other text layer?

Text resizing

Text layers have a resizing property that determines how the layer’s dimensions, indicated by the bounding box, will respond when its contents change. There are three text resizing options:

  • Auto width: The text layer's width will grow and shrink as its contents change
  • Auto height: The text layer's height will grow and shrink as its contents change
  • Fixed size: The text layer's width and heigh will stay the same, regardless of its contents. Figma will wrap any additional text to prevent it form extending beyond the layer's horizontal bounds. 

The text resizing property is automatically set based on how the text layer was created but you can update the setting in the Layout section of the right sidebar at any time. Learn more about text resizing. 

Align your layers

If your layers are looking a little wonky, you can align them using Alignment section in the right sidebar.

  1. Click on a blank area of the canvas to deselect all layers.
  2. Click and drag your cursor to select your avatar and the two text layers.
  3. Click Align left to align the layer's left-most edge.

Align the left edge of all three layers.png

Style the text layers

The default text styling is a bit small, and hard to read. We can use the text properties to create some visual hierarchy and help draw attention to a few key areas. 

Note: We'll be sticking with Figma's default font family, Inter, throughout this course. Feel free to browse through the available fonts and choose something else but keep in mind, the font family you choose may not offer the same weight options we'll be using. 

  1. Select the text layer with your name, and take a look at the Typography section in the right sidebar.
  2. To add more weight to this text layer, change the font weight to a bolder choice, like Black.
  3. Change the font size to to 40.

Tip: If your layers start to overlap, you can use your nudge options to quickly reposition them.

There are two nudge types in Figma:

  • Small nudge uses arrow keys to reposition layers and moves layers in increments of 1 by default.
  • Big nudge uses Shift with arrow keys, and moves layers in increments of 10 by default.

You can change your nudge values from the Preferences menu. Learn more about the nudge settings.

We'll update the bio text layer next:

  1. Select the text layer that contains your bio.
  2. Update the font weight to Medium and the size to 28.
  3. Change the text resizing to Auto height to prevent content from bleeding over the bottom edge of the bounding box.
  4. To give the content some room to breath, set the line height to 38 and the paragraph spacing to 16.
  5. You can also use text formatting like bold or italics to draw attention to your career highlights or other achievements.

Style your text layers.png

Check your knowledge

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • FD4B: Advocate sidebar: The differences between sections, groups, and frames
  • FD4B: Advocate sidebar: Auto layout tips and tricks
  • FD4B: Create a frame using frame presets
  • FD4B: Create the section heading, paragraph text, and quote block
  • FD4B: Prototyping fundamentals
  • Blog
  • Best practices
  • QR code generator
  • Color wheel
  • Colors
  • Color picker
  • Color palettes
  • Color palette generator
  • Color contrast checker
  • Font Library
  • Templates
  • Developers
  • Integrations
  • Affiliate program
  • Resource library
  • Reports and insights
  • Support
  • Status
  • Legal and privacy
  • Modern slavery statement
  • Climate disclosure statement
  • COMPARE
  • Sketch
  • Adobe XD
  • Framer
  • Miro
  • COMPANY
  • Events
  • Customers
  • Careers
  • Newsroom
Expand