This name should be descriptive of its use, like ‘Header 1’. Step 4: A dialogue box will appear where you can name your new text style. Step 3: In the text style menu, you’ll see an option to ‘Create new style’ represented with a plus icon. Click on the four-dot icon next to the ‘Text’ label to open the text style menu. Step 2: With the text selected, navigate to the right-hand side properties panel in Figma. You can do this on any text element in your project that has the settings you want to reuse. Step 1: Start by selecting the text layer you want to create a style for. Want to start learning Figma today? Check out this list of the Top Courses in Figma.īy defining text styles, you ensure that your fonts, sizes, colors, and other typographic elements remain uniform, making your designs more professional. How do you create a text style?Ĭreating text styles in Figma is not just about saving time it’s about maintaining consistency across your design. You can either select a color from the palette, enter a specific hex code, or adjust the sliders for more precise control. From here, you can choose a new color for your text. Click on this square to open the color palette. It’s represented by a small colored square. Step 4: For changing the color, find the color picker in the properties panel. Click on this number and either type in the desired font size or use the up and down arrows to increase or decrease the size. It’s usually represented by a number, indicating the size in pixels. Step 3: In the properties panel, locate the font size option. Here you’ll find various options to customize your text. Step 2: With the text selected, look to the right side of the Figma interface where the properties panel is located. If you’re working on a new project, use the Text tool (shortcut ‘T’) to create a text box and enter your text. Step 1: Open your Figma project and click on the text element you want to modify. How do you change the size and color of your font? Figma will now be able to use the fonts installed on your computer, just like the desktop version. Step 3: After installing the Font Helper application, restart your web browser. This application allows Figma’s web version to access the fonts installed on your computer. Step 2: Once the download is complete, open the installer and follow the instructions to install the Font Helper application on your computer.

Head over to Figma Downloads and select the appropriate installer for your operating system (Windows or macOS).įigma’s web version to access the fonts installed on your computer. Step 1: First, you need to download the Figma Font Installer. Alternatively, you may need to re-download the font and repeat the above steps. If you can’t find the font in the list, try logging out and back into your account. Your newly installed font should now appear in Figma’s font list. Step 3: Once the font has been installed, simply restart Figma. If it appears as a suggestion, this means it has been correctly installed on your system. Navigate to the search field in the top right corner and type in the name of the font you just installed. Step 2: After clicking ‘Install’, a window will pop up displaying all the fonts installed on your computer. This will add the font to your computer, making it available for use in your applications, including Figma. To do this, open the TTF file and click on ‘Install’. Step 1: The first thing you need to do is install the font you’ve recently downloaded. Lets see the different methods to add this font into your Figma. You’re excited to see how it will improve your project. Picture this: You’ve stumbled upon the perfect font and downloaded it. If you’re using Windows or other platforms, the interface may have slight variations, but the process remains the same.

Note: The screenshots and steps provided in this guide are based on the Mac version of Figma. Let’s get started and make your designs even better! 2 Ways to Add Fonts in Figma We’ll cover one method for the desktop app and another for the web version, so you can easily use new fonts in your designs, no matter how you access Figma. In this article, we’ll show you two simple ways to add fonts in Figma.

Whether you’re working alone or with a big team, Figma has some neat ways to handle fonts.Ĭheck out this article on How to Prototype In Figma. Figma makes this part of my job easy and fun. I’ve spent a lot of time playing around with different fonts in Figma to make sure my designs stand out. It’s a tool that lots of designers use, not just because it’s easy to work with others on it, but also because it’s really good with fonts. Choosing the right font might seem like a small thing, but it can make a huge difference.

Figma font styles