Text styles in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a business intelligence dashboard.

📋 Request: Your manager wants you to create consistent text styles for the dashboard to improve readability and branding.

📊 Data: You have a dashboard with various text elements like titles, subtitles, labels, and data values. Currently, the text styles are inconsistent in font size, weight, and color.

🎯 Deliverable: Create and apply text styles in Figma for Title, Subtitle, Label, and Data Value text elements to ensure consistency across the dashboard.

Sample Data

Text Element	Current Font Size (px)	Font Weight	Color	Example Text
Title	24	Bold	#000000	Monthly Sales Report
Subtitle	18	Medium	#333333	Sales Overview
Label	14	Regular	#666666	Region
Data Value	16	Semibold	#000000	1500
Title	26	Bold	#111111	Revenue Analysis
Subtitle	17	Medium	#444444	Quarterly Trends
Label	13	Regular	#555555	Product Category
Data Value	15	Semibold	#222222	3200

1

Step 1: Create a new text style named 'Title' in Figma.

Set font size to 24px, font weight to Bold, and color to #000000.

Expected Result

All title texts use the same style with 24px bold black font.

2

Step 2: Create a new text style named 'Subtitle' in Figma.

Set font size to 18px, font weight to Medium, and color to #333333.

Expected Result

All subtitle texts use the same style with 18px medium dark gray font.

3

Step 3: Create a new text style named 'Label' in Figma.

Set font size to 14px, font weight to Regular, and color to #666666.

Expected Result

All label texts use the same style with 14px regular gray font.

4

Step 4: Create a new text style named 'Data Value' in Figma.

Set font size to 16px, font weight to Semibold, and color to #000000.

Expected Result

All data value texts use the same style with 16px semibold black font.

5

Step 5: Apply the created text styles to all corresponding text elements in the dashboard.

Select each text element and assign the matching text style from the styles panel.

Expected Result

The dashboard text elements are visually consistent and follow the defined text styles.

Final Result

Dashboard Text Styles
---------------------
Title: Monthly Sales Report (24px, Bold, #000000)
Subtitle: Sales Overview (18px, Medium, #333333)
Label: Region (14px, Regular, #666666)
Data Value: 1500 (16px, Semibold, #000000)

All text elements use consistent styles for better readability and branding.

✓Consistent text styles improve dashboard readability.

✓Using defined styles saves time when updating text elements.

✓Clear hierarchy is established with different font sizes and weights.

Bonus Challenge

Create responsive text styles that adjust font size for mobile and desktop views in Figma.

Show Hint

Use Figma's Variants and Auto Layout features to create text styles that adapt to different screen sizes.