How to Change Text Color in Figma: Simple Steps

To change text color in Figma, select the text layer, then go to the right sidebar under Text section and click the color square next to Fill. Choose your desired color from the color picker or enter a hex code to apply it.

Syntax

In Figma, changing text color involves selecting the text layer and adjusting the Fill color property in the right sidebar.

• Select Text Layer: Click on the text you want to change.
• Fill Color: Found under the Text section in the right sidebar.
• Color Picker: Click the color square to open the picker and select or input a color.

text

1. Select the text layer
2. In the right sidebar, find the 'Fill' color box
3. Click the color box to open the color picker
4. Choose a color or enter a hex code
5. The text color updates immediately

Example

This example shows how to change the text color of a heading to a bright blue using the color picker in Figma.

text

1. Click on the heading text layer named 'Title'
2. In the right sidebar, under 'Fill', click the color square
3. In the color picker, enter the hex code <code>#007AFF</code> or select a bright blue
4. The heading text color changes to bright blue immediately

Output

The text 'Title' changes color to bright blue (#007AFF) in the design canvas.

Common Pitfalls

Common mistakes when changing text color in Figma include:

• Not selecting the text layer first, so the color option is disabled.
• Trying to change color on a group or frame instead of the text layer.
• Overlooking multiple fills on text layers, which can cause confusion.
• Using very light colors that are hard to see on the background.

Always ensure the text layer is selected and visible before changing color.

text

Wrong:
- Selecting a frame and trying to change text color

Right:
- Select the actual text layer before changing the fill color

Quick Reference

Step	Action
1	Select the text layer you want to edit
2	Locate the 'Fill' color box in the right sidebar
3	Click the color box to open the color picker
4	Pick a color or enter a hex code
5	Text color updates immediately on the canvas

Key Takeaways

Always select the text layer before changing its color in Figma.

Use the 'Fill' color box in the right sidebar to pick or enter colors.

Avoid selecting groups or frames when changing text color.

Use visible colors that contrast well with the background.

Changes update immediately, so you can see results in real time.