From the course: Designing Accessible Components In Figma

Style your components - Figma Tutorial

From the course: Designing Accessible Components In Figma

Start my 1-month free trial Buy for my team

Style your components

“

- [Instructor] You might want to work alongside me through this LinkedIn Learning course. To simplify your learning journey, I've created a Figma file with color and textiles for you to apply to your accessible components. In this way, you don't have to think about choosing the right color and font settings. You can download the Figma file in the exercise files under this video. To open the file in Figma, it is important that you have a Figma account and that you are logged in. In your personal dashboard, click on import files, and select the earlier downloaded files from your folder. It takes a few seconds for Figma to process your file. When it's ready, you can click on Done. To open the file, simply click twice on it. And right here on the right side, you can see all text and color styles that we will later apply for our accessible components. Let me quickly show you an example of how to apply text and color styles. Simply let's create the frame with desktop dimensions. I'm going to zoom it in and I will just draw a simple rectangle right here. So instead of going to fill as you would normally do, just to select your color, you can simply click on this icon that is called style and select the color styles from this file. Easy as that, you already have an applicable color that we are going to use later on. The same goes with text. If you would like to type in something, for example, hello, instead of changing the font settings, the size, and so on, you could again click on style icon and select any of the styles that is available in the dropdown, for example, the header one. Finally, color and textiles should speed up your learning journey and your design work.

Contents