Diane Cronenwett, UX designer, walks through creating, saving, and loading a color palette using a Sketch plug-in with hex values and color picker.
- View Offline
- [Instructor] For this project, I have a style guide that I'll be working from, so I already have a color palette that I can use. You can access this color palette by opening the 0201 exercise file. The first thing I'm going to do, is duplicate this file, and move it into the InVision Source files folder, so it syncs to InVision. For the purposes of this course, I'm going to remove the previous file that is in here, the 0103 file. It's my personal preference to have a single source file, so that I don't have to manage all the art ports syncing from each file.
I can just focus on the source of truth. Now going back to my Sketch file, notice that I put a minus sign in front of the art board, so it doesn't sync. Because I prefer all the screens that go into InVision to be screens for prototyping. And this isn't to screen for prototyping. Sketch has two different color palette options. One is global, and the other is document. The global option allows you to use the same color palette across all of your Sketch files, while the document colors are just for this file.
Let's imagine that I want to add a document color to my document palette. And I'm going to click on the color that I want to add. In this case, a dark green color. There are two ways to make sure I've selected the right color. The first is the border around the color, and the second is the fill color in the inspector. When I know that I have the right color, I'll click on the fill box, and a popover will come up. I can then add to the document color by clicking this plus sign to add to the preset.
You'll also note that the Hex value is pre populated into the text box. You can manually enter a color here also, if you know the Hex value. I'm going to add the rest of these colors into my document preset. Once your colors are in the document preset, you can access the Sketch palette plug-in from the top menu, select Document Colors, and save the palette. Let's name this palette California.
Next time you wanna use this palette, you can open up a new Sketch file, and you'll see that it's not added. Go to your plug-ins menu at the top menu, select Sketch Palettes, Document Colors, and Load Palette. You can select the palette that we just created, California, choose it, and it should appear in your document colors in the popover menu. Imagine that you're interested in changing the color of this rectangle, and you wanted to match the blue color of the cloud icon in the toolbar on the top right.
Instead of opening up the color picker from the inspector panel, you can select the object that you wanna change the color for, and activate the color picker using Control C. Move your mouse to the color you want to match, and select it. You can exit any of the shortcuts by selecting the Escape key. I use the color picker all the time, so these shortcuts and palettes will be quite useful for your workflow.
- Integrating InVision and plugins with Sketch
- Using symbols
- Setting up a grid and layouts
- Adding tabs
- Creating prototypes with InVision
- Exporting assets for iOS and Android development