Figma + Gutenberg + JointsWP Design System – Configuring the color styles / palette

Here we go. Finally jumping into Figma and Gutenberg and making this thing happen.

But first…

If you haven’t opened up a new Figma file, do so.

Make a frame that’s 1240 wide by 660. And then type like… “Tech Haus Design System” (or whatever you want). This page/frame is going to be your “thumbnail” when you are looking at the overview of your Figma files. So put whatever you want on there – whatever makes it easy for you to recognize your project quickly. Throw images or logos on if that makes it feel better. It’s your project, friend.

Add a second page. Rename the first page “Cover” and the second page “Styles”.

Now we can move onto the first Figma style we’re going to conquer here – Colors. Luckily colors are probably the easiest to set up for this design system.

Default Foundation color palette

JointsWP 5 is based on Zurb’s Foundation framework. And under “Global Styles” in their docs, things are made pretty easy for us. 

Screen cap of the Foundation Docs Colors section

I’ve definitely seen similar naming conventions before, with Primary and Secondary colors defined. So even if I move away from Foundation, I think this can still be the basis of my designs with some small tweaks because it’s quite common. By using Primary and Secondary instead of say Blue – if I want to change everything to purple, they won’t be mislabeled with “Blue”.

Some thoughts are: will I need a third or fourth color? And what about different shades of a color within the design. Lighter or darker shaders. These will be handled on a site by site basis, I guess, but I’ll cross that bridge when I have to. For now I’m just starting this basic template for my future builds.


Setting up color styles in Figma

Ok, if you checked out my last post about Figma, you should have no problem recreating something like above.

In short, on my new page called “Styles”, which I created above, I made a new Frame called Colors, and then I made what you see above. I have them labeled with the name of the color, my Sass variable that I can use to propagate this color through-out my stylesheet, and the hex color just in case I need it for something (what’s the best way to get rgba and hsla values from a hex code? I wouldn’t mind including all of those within this color frame, just to make it that much easier to work with those values if I need them for something).

Now that I got the colors laid out, I can create color styles. What are styles? I posted a video from Figma about them in my last post that I linked to above, but here’s the video again.

And once you set up the color styles, you will get a color styles section in the side panel that looks like this. Now you can use these colors throughout your design. Any changes you make to the Primary color style, for example, would change everywhere else in your design.


Programming the Foundation color defaults into Gutenberg

“Easy Mode”

Now that we’ve got the Figma part figured out, we’ve got to add a function to add theme support for our new color palette defaults. Rich Tabor has an amazing article outlining how to accomplish this – basically you register the colors in your functions.php by declaring theme support, and then you add the css for the options in your style sheet. I’ll call this “easy mode”.

function th_gutenberg_default_colors(){
	add_theme_support(
		'editor-color-palette',
		array(
			array(
				'name' => 'Primary',
				'slug' => 'primary',
				'color' => '#1779ba'
			),
			array(
				'name' => 'Secondary',
				'slug' => 'secondary',
				'color' => '#767676'
			),
			array(
				'name' => 'Success',
				'slug' => 'success',
				'color' => '#31db75'
			),
			array(
				'name' => 'Warning',
				'slug' => 'warning',
				'color' => '#ffae00'
			),
			array(
				'name' => 'Alert',
				'slug' => 'alert',
				'color' => '#cc4b37'
			),
			array(
				'name' => 'White',
				'slug' => 'white',
				'color' => '#ffffff'
			),
			array(
				'name' => 'Light Gray',
				'slug' => 'light-gray',
				'color' => '#e6e6e6'
			),
			array(
				'name' => 'Medium Gray',
				'slug' => 'medium-gray',
				'color' => '#cacaca'
			),
			array(
				'name' => 'Dark Gray',
				'slug' => 'dark-gray',
				'color' => '#8a8a8a'
			),
			array(
				'name' => 'Black',
				'slug' => 'black',
				'color' => '#0a0a0a'
			)
		)
	);
}

add_action('init', 'th_gutenberg_default_colors' );

That’s basically the first part. Now when I look at my color palette in the Gutenberg block editor, the choices look like this:

Great – we’ve got the Foundation colors!

As for the necessary CSS – I used Foundation’s color variables which can be customized in the /assets/styles/scss/_settings.scss file in JointsWP. After adding them to the proper Gutenberg classes, it looks like this:

/* Color Classes
--------------------------------------------- */

.has-primary-background-color {
  background-color: $primary-color;
}
.has-primary-color {
  background-color: $primary-color;
}
.has-secondary-background-color {
  background-color: $secondary-color;
}
.has-secondary-color {
  color: $secondary-color;
}
.has-success-background-color {
  background-color: $success-color;
}
.has-success-color {
  background-color: $success-color;
}
.has-warning-background-color {
  background-color: $warning-color;
}
.has-warning-color {
  color: $warning-color;
}
.has-alert-background-color {
   background-color: $alert-color;
 }
.has-alert-color {
  background-color: $alert-color;
}
.has-white-background-color {
  background-color: $white;
}
.has-white-color {
  color: $white;
}
.has-light-gray-background-color {
  background-color: $light-gray;
}
.has-light-gray-color {
  background-color: $light-gray;
}
.has-medium-gray-background-color {
  background-color: $medium-gray;
}
.has-medium-gray-color {
  color: $medium-gray;
}
.has-dark-gray-background-color {
  background-color: $dark-gray;
}
.has-dark-gray-color {
  background-color: $dark-gray;
}
.has-black-background-color {
  background-color: $black;
}
.has-black-color {
  color: $black;
}

So for now there are two places I have to remember to change colors – in the _settings.scss file and in that function above. One is defining a variable and the other is using a hex code value.

Bill Erickson shares a way to use sass to define an array of colors and loop over it to create something like the css above, but with about 1/2 the typing. So there’s that if you want to go one step further.


Harder mode.

If you think your site / theme users are going to be adding a lot of custom colors, and won’t be programmatically changing them in those two steps above, Richard Tabor has you covered again, with a post on how to add colors to the color palette right form the WordPress customizer.

Is this necessary? I read in the comments that someone said it helps them speed up development – and also maybe if i released a theme, this would be of value to users?


So now I have this matching color palette across Figma, JointsWP / Foundation, and Gutenberg. Up next…Typography, I think.

Leave a Reply

Your email address will not be published. Required fields are marked *