Adding Text in Figma is the process of creating text layers on the canvas to communicate information such as headings, paragraphs, labels, buttons, navigation items, descriptions, prices, form fields, messages, and other interface content. Text is one of the most important elements in UI and visual design because it communicates information and helps establish visual hierarchy.
Figma provides the Text tool for creating text layers. You can select the Text tool from the toolbar or press the T keyboard shortcut. You can click once to create a text layer that grows horizontally or click and drag to create a text layer with defined dimensions. Figma also provides controls for fonts, size, weight, line height, alignment, resizing, text styles, links, lists, OpenType features, and other typography properties. JustAcademy Figma Training can help you learn Figma systematically, and you can use Register for Figma Course Demo to explore the course.
Adding text means creating a text layer and entering content directly onto the Figma canvas. Text layers can then be formatted, positioned, resized, styled, and combined with other design elements.
Figma Canvas
|
v
Select Text Tool
|
v
Click or Click + Drag
|
v
Create Text Layer
|
v
Type Content
|
v
Format Text
|
v
Position Text
|
v
Use in UI Design
Text is essential because most digital interfaces depend on written information to guide users and communicate actions. A button, navigation menu, form, card, dashboard, landing page, and mobile application all require carefully designed text.
The Text tool is the primary tool used to add text to a Figma design. It can be accessed from the toolbar or by using the T keyboard shortcut.
Toolbar
|
+-- Move
+-- Frame
+-- Shape
+-- Pen
+-- Text
|
+-- Press T
|
v
Add Text Layer
After selecting the Text tool, click anywhere on the canvas and start typing. You can also click and drag to create a text area with specific dimensions.
The keyboard shortcut for the Text tool in Figma is T. Using keyboard shortcuts can make the design workflow faster because you can activate the tool without repeatedly selecting it from the toolbar.
Keyboard
|
v
Press T
|
v
Text Tool Activated
|
v
Click Canvas
|
v
Start Typing
Open Figma File
|
v
Select Text Tool
|
v
Press T
|
v
Click Canvas
|
v
Type Text
|
v
Format Text
|
v
Position Text
|
v
Review Design
When the Text tool is active, clicking once on the canvas creates a text layer. This text layer uses automatic horizontal resizing, allowing its width to grow as additional text is entered.
Click Canvas
|
v
Text Layer
|
v
Type:
Hello
|
v
Type More:
Hello World
|
v
Text Width Grows
This method is useful for short text such as headings, labels, navigation items, badges, and button content.
Clicking and dragging with the Text tool creates a text layer with defined dimensions. This is useful when you want text to wrap within a specific width.
Click + Drag
+--------------------------+
| |
| Text Area |
| |
+--------------------------+
|
v
Type Long Content
|
v
Text Wraps Automatically
This approach is commonly useful for paragraphs, descriptions, cards, articles, forms, and other content blocks.
| Method | Text Behavior | Common Use |
|---|---|---|
| Click once | Text grows horizontally | Labels, headings, buttons |
| Click and drag | Text stays within defined dimensions and wraps | Paragraphs, descriptions, cards |
Headings are one of the most common uses of text layers in Figma. A heading introduces a section and helps users understand the content hierarchy.
Welcome to Our Website
Our Products
Latest Articles
Contact Us
After adding the heading, you can adjust its font family, size, weight, line height, letter spacing, color, and alignment.
Paragraphs provide detailed information about a product, service, feature, article, or screen. Paragraph text usually benefits from a controlled width and comfortable line height.
Our platform helps teams create,
organize, and manage digital
experiences from one collaborative
workspace.
For paragraphs, click-and-drag text boxes are often useful because they provide a controlled width and allow the text to wrap across multiple lines.
Labels identify interface elements such as form fields, categories, settings, filters, and controls.
Email Address
Password
Phone Number
Country
Date of Birth
Labels should be concise and visually distinguishable from surrounding content.
Buttons use text to communicate actions. Examples include Submit, Save, Continue, Cancel, Buy Now, Add to Cart, Sign In, and Create Account.
+----------------------+
| Add to Cart |
+----------------------+
Button text should clearly describe the action that will occur when the user interacts with the button.
Navigation menus use text to help users move between pages or sections of an application or website.
Home | Products | Services | About | ContactNavigation text should remain short, consistent, readable, and easy to scan.
After creating a text layer, you can edit its content by entering text editing mode. Double-click the text layer or press Enter when the text layer is selected, then modify the content.
Select Text Layer
|
v
Double Click
|
v
Text Editing Mode
|
v
Select / Replace Text
|
v
Type New Content
Existing text can be replaced by selecting the text layer and entering text editing mode. You can then select the existing characters and type new content.
Old Text:
Welcome User
↓
Edit Text
↓
New Text:
Welcome Back!
Figma allows you to select specific characters or words within a text layer. This makes it possible to apply different formatting to different portions of the same text layer.
Welcome to Figma Design
^^^^^^^^^^^^
Selected Text
You can then change properties such as weight, color, decoration, or other supported text properties for the selected range.
After adding text, you can format it using the Typography section in the right sidebar. Common properties include font family, weight, size, line height, letter spacing, alignment, case, decoration, and other type settings.
Text Layer
|
+-- Font Family
+-- Font Weight
+-- Font Size
+-- Line Height
+-- Letter Spacing
+-- Alignment
+-- Case
+-- Decoration
+-- Text Style
The font family determines the visual character of the text. Select the text layer and choose a font from the Typography section.
Figma provides access to available fonts including fonts supplied by Figma, Google Fonts, and fonts available through the appropriate local or shared font setup.
Font size controls how large or small the text appears. Larger sizes are commonly used for headings, while smaller sizes are generally used for supporting information.
| Text Type | Example Size |
|---|---|
| Display | 48px |
| H1 | 36px |
| H2 | 28px |
| Body | 16px |
| Small Text | 14px |
| Caption | 12px |
These values are examples rather than fixed rules. The appropriate size depends on the design system, font family, platform, and content.
Font weight changes the visual thickness of characters and can help create hierarchy.
| Weight | Typical Use |
|---|---|
| Regular | Body text |
| Medium | Labels and controls |
| Semibold | Subheadings and buttons |
| Bold | Important headings |
Text color can be changed using the Fill property. Different colors can be used to establish hierarchy, indicate interaction, communicate status, or support branding.
Primary Text
Secondary Text
Link Text
Success Text
Error Text
Disabled Text
Always ensure that text color provides appropriate contrast against its background.
Text can be aligned horizontally within its text box. Common options include left, center, right, and justified alignment where applicable.
| Alignment | Common Use |
|---|---|
| Left | Body content and most UI layouts |
| Center | Hero sections and promotional content |
| Right | Numerical and data-oriented layouts |
| Justified | Some editorial layouts |
Line height controls the vertical distance between lines of text. It is particularly important for paragraphs and multi-line descriptions.
Small Line Height
Line one.
Line two.
Line three.
Comfortable Line Height
Line one.
Line two.
Line three.
Appropriate line height improves readability and helps create visual rhythm.
Letter spacing controls the horizontal space between characters. It can be useful for headings, uppercase labels, navigation items, and branding.
Normal
DESIGN
Increased
D E S I G N
Tighter
DESIGN
Letter spacing should be used intentionally because excessive spacing can reduce readability.
Text can use different capitalization styles depending on the design requirements.
| Case | Example | Common Use |
|---|---|---|
| Original | Welcome Home | Normal content |
| Uppercase | WELCOME HOME | Labels and short navigation |
| Lowercase | welcome home | Specific branding styles |
| Title Case | Welcome Home | Headings and labels |
Text decoration adds visual treatment to characters. Common examples include underline and strikethrough.
Normal Text
Underlined Text
Strikethrough Text
Underlines are frequently used to communicate links, while strikethrough can represent deleted, replaced, or previous values.
Text resizing controls how a text layer responds when its content changes. Choosing the correct resizing behavior is important for responsive design.
| Behavior | Description | Use Case |
|---|---|---|
| Auto Width | Width grows as text is added | Labels, buttons, short headings |
| Auto Height | Width is controlled and height grows | Paragraphs and descriptions |
| Fixed Size | Width and height remain controlled | Specific layout areas |
Auto Width allows the text layer to grow horizontally as more content is added. It is particularly useful for short strings.
Before:
[ Submit ]
After:
[ Submit Order ]
The text layer can expand horizontally as the content becomes longer.
Auto Height is useful when the text needs to wrap inside a controlled width while the height expands according to the amount of content.
+----------------------+
| This is a paragraph |
| that wraps when the |
| content becomes |
| longer. |
+----------------------+
|
v
Height expands
Fixed Size text maintains a defined width and height. This can be useful for controlled layouts but requires careful testing to prevent content from becoming hidden or overflowing.
Text overflow occurs when the content does not fit within the available text area. Designers should test short, normal, and unusually long content.
Text Content
|
+-- Fits
|
+-- Wraps
|
+-- Expands
|
+-- Truncates
|
+-- Overflows
Text layers can be placed inside frames to organize the structure of a screen. Frames can contain headings, descriptions, labels, buttons, images, icons, and other layers.
Frame
|
+-- Logo
+-- Heading
+-- Description
+-- Input
+-- Button
+-- Footer Text
Using frames helps designers create organized layouts and makes responsive behavior easier to manage.
Cards commonly use several text layers such as a title, description, metadata, price, and action.
+--------------------------------+
| Product Name |
| |
| Short product description. |
| |
| ₹999 View More |
+--------------------------------+
Each text layer should have a clear hierarchy and consistent spacing.
Button text should describe the action clearly. Examples include Save, Submit, Continue, Learn More, Buy Now, and Add to Cart.
+----------------------+
| Buy Now |
+----------------------+
Button text should be short enough to fit comfortably within the button and should be tested with longer translations or content where relevant.
Forms require several types of text including labels, placeholders, helper text, validation messages, and button labels.
Email Address
Enter your work email.
Password
[ **************** ]
Minimum 8 characters.
[ Create Account ]
Clear typography helps users understand what information is required and how to complete the form.
Navigation text communicates the structure of a website or application and helps users move between different sections.
Home
Products
Services
Pricing
About
Contact
Navigation labels should be concise and consistent across screens.
Mobile applications commonly use text for titles, tabs, navigation, forms, buttons, messages, and content descriptions.
+----------------------+
| Profile |
| |
| Welcome, User |
| |
| Account Settings |
| Notifications |
| Security |
| |
| [ Save Changes ] |
+----------------------+
Mobile text should be tested at the actual target screen size to ensure that labels and buttons do not overflow.
Landing pages usually contain a hero heading, supporting paragraph, call-to-action buttons, feature headings, descriptions, testimonials, and footer content.
Landing Page
|
+-- Hero
| +-- Main Heading
| +-- Description
| +-- CTA
|
+-- Features
| +-- Heading
| +-- Description
|
+-- Testimonials
| +-- Quote
| +-- Customer Name
|
+-- Footer
+-- Links
+-- Copyright
Dashboards contain many text elements including page titles, metrics, labels, table headings, chart labels, filters, and action buttons.
| Dashboard Element | Text Example |
|---|---|
| Page Title | Analytics Dashboard |
| Metric | ₹8,45,000 |
| Metric Label | Total Revenue |
| Table Header | Customer Name |
| Action | View Report |
Text is frequently included in reusable Figma components. Buttons, cards, inputs, navigation items, modals, alerts, and tabs can all contain text layers.
Component
|
+-- Icon
+-- Text
+-- Background
+-- Border
+-- Interaction State
Reusable components help maintain consistency across multiple screens.
Text layers can be used inside Auto Layout containers. This is especially useful for buttons, cards, navigation items, chips, tags, and responsive content blocks.
Auto Layout Button
+----------------------+
| Add to Cart |
+----------------------+
|
v
Text Width Changes
|
v
Container Adjusts
When text content changes, a properly configured Auto Layout component can adjust its dimensions according to the content and layout rules.
A common workflow is to create a button using Auto Layout and place a text layer inside it.
Button
|
+-- Padding
|
+-- Text Layer
| |
| +-- Save
|
+-- Padding
Text can be combined with icons to improve recognition and communication.
+----------------------+
| [Icon] Download |
+----------------------+
Icons should support the meaning of the text rather than unnecessarily replacing clear labels.
Text can be placed over or beside images depending on the layout. Common examples include hero sections, banners, promotional cards, and social media designs.
+--------------------------------+
| |
| [ IMAGE ] |
| |
| Create Better Designs |
| Start Your Journey |
| |
| [ Get Started ] |
+--------------------------------+
When placing text over an image, ensure sufficient contrast and readability.
Figma can use the text content as the initial layer name. Renaming important layers can improve organization, especially in larger projects.
Text Layer
|
+-- Heading
+-- Description
+-- Button Label
+-- Navigation Item
+-- Error Message
Meaningful layer names make the file easier to understand and maintain.
When several text layers need the same content update, Figma provides multi-edit text functionality for supported workflows. This can be useful when repeated text appears across multiple instances or layers.
Select Multiple Text Layers
|
v
Multi-edit Text
|
v
Change Content
|
v
Apply Update
Text layers inside components can represent editable content such as button labels, card titles, navigation labels, and form messages. This allows component instances to use different text while maintaining the overall component structure.
Main Component
|
+-- Icon
+-- Text Layer
+-- Background
|
+----------------------+
| Get Started |
+----------------------+
Instance
|
+----------------------+
| Sign Up |
+----------------------+
Text styles allow designers to reuse consistent typography properties. Instead of manually formatting every text layer, designers can define styles such as Heading/H1, Heading/H2, Body/Regular, Label/Medium, and Caption/Small.
Text Styles
|
+-- Display/Large
+-- Heading/H1
+-- Heading/H2
+-- Heading/H3
+-- Body/Large
+-- Body/Regular
+-- Body/Small
+-- Label/Medium
+-- Caption/Small
Text styles improve consistency and make typography systems easier to maintain.
Using reusable text styles is especially useful for large websites, applications, and design systems.
Figma supports adding hyperlinks to text. This can be useful when creating prototypes, documentation, content designs, or interfaces where clickable text needs to be represented.
Select Text
|
v
Add Link
|
v
Enter URL
|
v
Clickable Text
Links can be applied to selected text or appropriate text objects depending on the workflow.
Figma supports bulleted and numbered lists for structured text content. Lists are useful for feature descriptions, instructions, documentation, and content-heavy designs.
• Fast performance
• Easy collaboration
• Reusable components
• Responsive layouts
1. Select tool
2. Add text
3. Format text
4. Review design
Text layers can contain emojis and other supported symbols. These can be useful in social designs, dashboards, messages, onboarding screens, and informal interfaces.
Welcome 👋
Great job 🎉
Settings ⚙
Messages 💬
When using special characters, always check that the selected font supports the required glyphs.
Font availability affects how text appears across different computers and environments. Figma provides access to available fonts, while local and shared font setups may require appropriate configuration.
Font
|
+-- Available
| |
| +-- Apply Font
|
+-- Missing
|
+-- Replace Font
+-- Install / Provide Font
Consistent font versions are important when multiple designers collaborate on the same file.
A missing font occurs when a text layer uses a font that is not available in the current environment. This can cause text to look different or become difficult to edit as intended.
Adding text is only the first step. After creating the text layer, designers should format it according to the design system.
Add Text
|
v
Choose Font
|
v
Choose Weight
|
v
Set Size
|
v
Set Line Height
|
v
Set Letter Spacing
|
v
Set Color
|
v
Set Alignment
|
v
Apply Text Style
Text must be tested with different screen sizes and content lengths. A heading that looks good on desktop may wrap differently on mobile.
Desktop
+--------------------------+
| Create Better Products |
+--------------------------+
Tablet
+----------------------+
| Create Better |
| Products |
+----------------------+
Mobile
+----------------+
| Create Better |
| Products |
+----------------+
Responsive designs should preserve readability and hierarchy even when text wraps onto additional lines.
Designers should test text layers with longer content instead of testing only ideal short strings. Long text can reveal overflow, wrapping, alignment, and component-sizing problems.
Short:
Save
Long:
Save Changes and Continue
Very Long:
Save Changes and Continue to Next Step
This is especially important for buttons, cards, navigation, forms, and mobile interfaces.
Text should be designed for readability and accessibility. Designers should consider font size, contrast, spacing, hierarchy, and the ability of content to adapt to different screen sizes.
Adding text is closely connected to visual hierarchy. Different text elements should communicate different levels of importance.
WELCOME BACK
Display / Bold
|
v
Your Dashboard
Heading / Semibold
|
v
View your latest activity.
Body / Regular
|
v
View Details
Button / Medium
Spacing between text elements helps users understand relationships between pieces of content.
Heading
|
| 24px
v
Description
|
| 16px
v
Button
Spacing should be consistent with the overall spacing system of the design.
+--------------------------------+
| Product Name |
| |
| This product provides useful |
| features for modern teams. |
| |
| ₹1,499 |
| |
| [ Add to Cart ] |
+--------------------------------+
Welcome Back
Email Address
Password
[ **************** ]
Forgot Password?
[ Sign In ]
Don't have an account?
Create Account
This example demonstrates how different text roles can work together in a single interface.
Featured Products
Wireless Headphones
₹2,499
★★★★★
Free Delivery
[ Add to Cart ]
Smart Watch
₹3,999
★★★★★
In Stock
[ Buy Now ]
Product interfaces require clear hierarchy between product names, prices, metadata, ratings, and actions.
Analytics Dashboard
Total Revenue
₹8,45,000
Total Orders
3,240
Active Users
12,450
Pending
128
[ View Reports ]
Dashboard text should be designed for quick scanning and clear relationships between metrics and labels.
Build Better Digital Products
Design, prototype, and collaborate
with your team in one workspace.
[ Get Started ] [ Learn More ]
The hero heading should have strong visual emphasis, while the supporting paragraph and actions should have clearly defined secondary hierarchy.
Delete Account?
Are you sure you want to permanently
delete your account? This action cannot
be undone.
[ Cancel ] [ Delete Account ]
Modal typography should clearly distinguish the title, message, and actions.
Password Incorrect
The password you entered is not correct.
Please try again.
[ Try Again ]
Error messages should be clear, concise, and placed close to the related interface element.
Payment Successful
Your payment has been processed
successfully.
[ Continue ]
Success messages should communicate the result clearly and provide an appropriate next action when required.
Company
About
Careers
Contact
Resources
Blog
Documentation
Help Center
© 2026 Company Name
Footer text usually uses smaller typography while maintaining sufficient readability and clear grouping.
| Approach | Description | Example |
|---|---|---|
| Text Layer | Standalone text object | Heading or paragraph |
| Text in Component | Text used inside reusable UI | Button label |
| Text with Shape | Text positioned over or with a shape | Badge or card |
| Text in Auto Layout | Text participates in responsive layout | Dynamic button |
Create a complete login screen using Figma text layers.
Create an e-commerce product card containing multiple text layers.
Create a landing page using a complete hierarchy of text layers.
Landing Page
|
+-- Navigation
| +-- Logo
| +-- Menu Items
|
+-- Hero
| +-- Heading
| +-- Description
| +-- CTA
|
+-- Features
| +-- Heading
| +-- Description
|
+-- Testimonials
| +-- Quote
| +-- Customer Name
|
+-- Footer
+-- Links
+-- Copyright
Create a mobile application screen using text layers for navigation, headings, content, labels, buttons, and messages.
Understand Content
|
v
Select Text Tool
|
v
Press T
|
v
Click / Click + Drag
|
v
Enter Text
|
v
Choose Font
|
v
Set Size and Weight
|
v
Set Line Height
|
v
Set Letter Spacing
|
v
Set Color
|
v
Set Alignment
|
v
Apply Text Style
|
v
Place in Layout
|
v
Test Responsive Behavior
|
v
Check Accessibility
| Task | Figma Method | Example |
|---|---|---|
| Create text | Text tool / T | Heading |
| Create flexible short text | Click once | Button label |
| Create wrapped text | Click and drag | Paragraph |
| Edit text | Double-click / Enter | Change heading |
| Change font | Typography section | Inter |
| Change size | Font size control | 32px |
| Change weight | Font weight control | Semibold |
| Change color | Fill | Primary text |
| Reuse typography | Text styles | Heading/H1 |
| Make responsive | Resizing / Auto Layout | Dynamic button |
Select the Text tool from the toolbar or press the T keyboard shortcut, click on the canvas, and start typing.
The shortcut is T.
A text layer is created that can grow horizontally as content is added.
A text layer with defined dimensions is created, allowing longer text to wrap within the specified area.
Double-click the text layer or press Enter when the text layer is selected, then edit the content.
Select the text layer or text range and choose a font from the Typography section in the right sidebar.
Auto Width text grows horizontally as its content increases.
Auto Height text maintains its width while its height adjusts as the content wraps into additional lines.
Text styles provide reusable typography properties and help maintain consistency across a design system.
Long text can reveal wrapping, overflow, spacing, and component-sizing problems that may not appear with short placeholder content.
Yes. Text layers can be included in reusable components such as buttons, cards, navigation items, forms, and modals.
Yes. Figma supports adding links to text, which can be useful for prototypes, documentation, and interactive content.
Create a complete e-commerce home page in Figma using text layers.
Adding Text is one of the first and most important skills every Figma designer should learn. Text layers form the foundation of headings, paragraphs, buttons, navigation, forms, cards, dashboards, landing pages, mobile applications, and many other interface elements. Figma makes it easy to create text using the Text tool, edit content, customize typography, control resizing behavior, and organize text within components and layouts.
A professional workflow should go beyond simply typing words onto the canvas. Designers should choose appropriate fonts, establish typography hierarchy, use reusable text styles, manage text resizing, test long content, maintain proper spacing, and check responsive behavior. When text is combined with Auto Layout, components, design systems, and accessibility considerations, it becomes a flexible and maintainable part of the overall interface.
To learn professional Figma design through structured training and practical projects, visit JustAcademy Figma Training and use the Register for Figma Course Demo option.
