Figma is a powerful, cloud-based design tool that’s widely used for user interface (UI) and experience (UX) design. Whether you’re crafting web designs, mobile interfaces, or interactive prototypes, Figma gives you the freedom to create beautiful, functional visuals with ease. One common task you’ll find yourself doing is changing the color of text — an essential step in customizing your design and ensuring accurate branding.
TL;DR: To change text color in Figma, select the text object, open the right-hand design panel, and choose your desired fill color. You can use solid colors, gradients, or even styles for consistency across your designs. Figma also allows for real-time collaboration and updates, so color changes can be instantly visible to everyone on your team. With a few simple steps, you’ll master text color adjustments and elevate your design workflow.
Why Text Color Matters in Design
Text color is more than just a stylistic choice — it plays a major role in accessibility, branding, and user experience. Using the right color can help:
- Improve Readability: Ensuring sufficient contrast between text and background enhances readability for all users.
- Establish Visual Hierarchy: Different colors can be used for headings, subheadings, and body text to guide user attention.
- Reflect Branding: Using brand-specific color palettes in text helps maintain consistency across your design assets.
Changing Text Color in Figma: A Step-by-Step Guide
Let’s dive into how you can change the text color in Figma. Whether you’re working on web UI or mobile app mockups, these steps will be the same.
1. Select the Text Layer
Click on the text object you wish to modify. You can either use the Selection Tool (keyboard shortcut V) or click directly on the text. Make sure you’re not inside a grouped object, or you might select the group instead of the text.
Pro Tip: Double-clicking the text allows you to edit the content, whereas single-clicking selects the entire text box as a layer.
2. Locate the Fill Section in the Right Panel
Once your text layer is selected, look to the right-hand panel. This is where all of your layer’s properties are shown. Under the “Design” tab, scroll down until you find the Fill section.
If there’s no color box visible, you might need to enable the fill by clicking the + icon next to “Fill.”
3. Choose a Color
Click on the color square in the Fill section. A color picker will open, giving you several options:
- Solid Colors: Use the color field or enter a hex, RGB, or HSL value manually.
- Gradients: Select from linear, radial, angular, or diamond gradients for more vibrant text styles.
- Styles: If your team has shared color styles, you can apply a saved color style from the panel.
4. Apply the Color
Once you’ve picked your color, it’s instantly applied to the selected text. You can preview your changes live, so you can adjust based on how it looks against your design background or other text elements.
5. Adjust Opacity (Optional)
Right below the color picker, you’ll find an Opacity slider. This lets you make your text more transparent, which can be useful for creating subtle effects or managing emphasis.
Changing Text Color for Part of the Text
What if you only want to change the color of certain words or characters within a text box? Follow these steps:
- Double-click into the text to enter editing mode.
- Highlight the specific part of the text you want to color.
- While the text is highlighted, go to the Fill section in the right panel.
- Select your new color, and it will only apply to the highlighted portion.
This is especially useful for emphasizing words or creating dynamic text styles within a single block of text.
Using Color Styles in Figma
If you’re working with a team or on a brand with strict color guidelines, it’s wise to use Color Styles. This allows you to apply standardized colors across multiple text and UI components easily.
How to Create a Color Style
- Select a text element and open the Fill color picker.
- After choosing the color, click the four dots next to the Solid/Gradient option.
- Click “+” Create Style at the bottom of the dropdown.
- Give the color style a name, such as “Primary Text” or “Secondary Accent.”
Now you can apply this color style to other text elements with a single click, ensuring consistency across your design files.
Keyboard Shortcuts for Faster Work
For power users, keyboard shortcuts can make changing colors even more efficient.
- V: Select tool
- T: Text tool
- Control (or Command) + / : Quick action menu — type “fill” to go straight to the Fill section
Tips for Better Color Choices
When choosing or customizing text colors, consider the following:
- Contrast Ratio: Always check contrast between text and background to meet accessibility standards (WCAG AA or AAA).
- Readability: Avoid using overly light or saturated colors for body text—save these for headings or callouts.
- Semantic Use: Use color purposefully. For instance, green for success messages, red for errors.
Collaborating and Sharing
One of the great things about Figma is that everything happens in real-time. If you’re collaborating with team members, changing the text color of a button or heading will instantly update on their screens. If you’ve used shared styles, they’ll automatically update across every instance in your file. This makes design iteration smooth and efficient.
Fixing Common Issues
Here are a few common hiccups designers experience when trying to change text color in Figma:
- Color option is grayed out?
Make sure you’ve selected a text layer and not a frame or group. - Nothing happens after picking a color?
Double-check that the fill section is active and the text isn’t nested within a locked object. - Can’t find your color again?
Create and name a color style so you can easily apply it elsewhere.
More Advanced Use Cases
For designers looking to streamline their workflow even more, Figma also supports plugins and integrations that can help with color management. For example:
- Stark: A plugin for checking contrast and ensuring accessibility compliance.
- Color Palettes: Generate and apply custom palettes usable across styles and projects.
- Design Lint: Automatically detects inconsistent color usage across your designs.
Conclusion
Changing text color in Figma is simple yet incredibly powerful. Whether you’re adjusting a single word or applying a universal style across dozens of screens, Figma’s intuitive tools and collaborative features make it easy. With just a few clicks, you can enhance readability, establish brand identity, and create more engaging designs.
Once you get comfortable with these techniques, you’ll find that color manipulation becomes a fast, creative, and crucial part of your design process. Happy designing!
