Before you start...
- Duplicate this Figma file to your drafts.
- Install Contrast plugin
- Install Chroma Colors plugin
- Reopen the GuidesLab plugin in the file you've duplicated.
Step 1. Creating test color samples
In this step, we'll create test samples to adjust and quickly set up our color palette.
- Press [R] on your keyboard to select the Rectangle tool.
- Click inside the Step 1 frame to create the rectangle.
- Change the rectangle's fill color to #000000. Pro tip: You don't need to type '000000' in the hex input. Just type '0' and press [Return] and it will automatically set all digits to 0.
- Click on the rectangle, and while pressing [Option] + [Shift] move, it 20 px to the right.
- Press [Command] + [D] to duplicate it, so there are ten rectangles.
- Select all rectangles.
- Press [Command] + [R] to open Rename modal.
- Rename to: Test sample / $N0 and press [Return]. We'll have 10 rectangles named Test sample / 10 to Test sample / 100.
Step 2. Setting up the opacity
Let's set up the opacity for each color rectangle to create a neutral palette. In this step, you'll learn my way of doing this. The opacity values that I provide in this lesson will make the UI accessible, and we will confirm that in the next step. These are the opacity values I normally use. I've found them through experimentation and then tweaked them to be accessible. Don't worry, though. You will be able to set up your values in Step 5 if you need them.
- Select Test sample / 10 and set its color to #FFFFFF. (Psst! Type in 'F' in the hex input and press [Return], remember?)
- Add stroke color #d9d9d9 so you can see it. ('D9' + [Return] in the hex input)