Material Theme Editor is a tool designed to help you get the most out of Material's flexible design system. This editor helps you customize Material components to make your own unique, branded symbol library that you can use to keep your designs consistent.
This DesignLab will show you how to build a custom theme for your brand from start to finish, using the example app, Shrine.
In this DesignLab we'll be using the Sketch application. If you're completing the DesignLab at one of our I/O kiosks, Sketch should already be installed. In Finder, go to Go > Applications and double click Sketch to open it.
Before getting started, you'll need to download the Material plugin for Sketch and the starter layout file.
Locate the Theme Editor plugin on your machine, and double click it to install it in Sketch.
Now you're ready to start! Create a new project in Sketch, then go to Plugins > Material > Open Theme Editor.
Once the plugin is open, you'll see a list of themes. There are prebuilt themes that you can start with and adapt to your own style. Any themes you create on your own will show up here too. For now, click "Start with the Baseline theme" to start with our baseline stickersheet.
Next, save your new library with the name Shrine_DesignLab and hit save.
Now that your theme is saved, let's start customizing it.
You'll find it in the directory
[download location]/material-components-design-codelabs-master/ThemeEditor. You'll see that it's been set up with a few elements to start with, and you'll fill in the rest with Material Components.
In Sketch, go to the menu bar and select Insert. Then navigate down to Shrine_DesignLab. You'll see that our baseline components are all here.
First, navigate to Backdrop > Elements > Back Layer. Then place the component on the Home - Template artboard.
Open the ICONS override at the right and select None to get rid of the app bar's icons.
Position it below the Screen layout group. With the surface selected, find the CONTAINER COLOR override on the right side of Sketch. Open the dropdown and navigate to Shrine_DesignLab > Color / Primary / 300.
Go back to the Insert menu, and select the System bar > Primary component from the Shrine_DesignLab theme. Place it at the top of the Home - Template artboard.
On the right of Sketch, open the System Bar Color override and navigate to Shrine_DesignLab > Color / Primary / 500.
Next you'll insert some text components into the Product - Template artboard. The starter file has a "Placeholder text" layer to help you get started, which you can turn off or delete when you're finished.
Start by navigating to Insert > Shrine_DesignLab > * > Text > H5. There are several specialized H5 styles available, so continue to Black > Medium emphasis > Left to get the right component.
Align it with the placeholder text on the Product Copy artboard. Increase the width of the text component, then use the Headline 5 override at the right of Sketch to make the text match the sample screen to the left. Enter "Flow Shirt Blouse" and hit enter.
Repeat this step for the Body2 and OVERLINE styles as well. The OVERLINE component has left- and center-aligned variants. Be sure to choose a left-aligned variant.
Select the Placeholder text layer in the layer list at the left of Sketch, and delete it.
Next you'll move on to the Product Scrolled - Template artboard. Let's start at the top. Navigate to Insert > Shrine_DesignLab > System bar and place the system bar at the top of the Product Scrolled - Template artboard.
Then navigate to Insert > Shrine_DesignLab > App Bar > Top App Bar > Regular > Raised > Primary Color. Put this component right below the System bar.
In the overrides menu to the right of the Sketch interface, open the Headline 6 Color & Style dropdown. Select Shrine_DesignLab > Text / H6 / Black / Medium Emphasis / Left. This will ensure that the app bar's title is readable.
Next, change the Headline 6 override text to "Flow Shirt Blouse" to match the example screen.
Then you'll need to adjust the icons on the new app bar. By default, the app bar comes with three slots for icons, with the rightmost slot reserved for an overflow menu. For this DesignLab we want just two icons, and no overflow. Find the Icons override and select Shrine_DesignLab > App Bar / Elements / Icons On Primary / Positioned Right / 3 Up with Close.
That gives us three action icons, and automatically changes the action on the left to "close." Let's start updating our icons from the right. Open the Icon 3 override and select Shrine_DesignLab and locate the heart icon. Repeat for Icon 2 with Icon / Add shopping cart / outlined and for Icon 1, simply select None from the override menu.
Ensure that the icon color for each is set to color / icons / selected / on surface / active. Right now this is black but we'll correct that in a bit.
Next you'll add a button to the screen. Navigate to Insert > Shrine_DesignLab > Buttons > Contained > Enabled. Place this button over the gray rectangle on the Product Scrolled - Template artboard. Resize it to 328x48px so it aligns with the gray rectangle.
In the overrides menu, select the Text Color & Style dropdown, and choose Shrine_DesignLab > Text / Button / Selected / On Primary / High Emphasis / Center.
Finally, find the Placeholder components layer on the Product Scrolled - Template artboard and delete it.
Save the file.
We've filled out all the example screens, but they don't have a lot of personality yet. To fix that, return to the library file (Shrine_DesignLab) in Sketch.
In the library file, open the Theme Editor and switch to the Color tab.
You'll notice that the Material Light theme comes with a teal and purple color scheme by default. The Theme Editor automatically uses these colors to generate color palettes that include lighter and darker variations of each color that can be used on components and text across the app to create a harmonious, accessible palette.
Select the primary color and change it to #FCB8AB, the primary color for Shrine. You'll see that Theme Editor instantly generates a 10-shade palette, so you can adjust the primary color to have a lighter or darker value, which will automatically update the other shades in the palette. Shrine's primary color is a 200 value (or the third color in the generated palette).
Click the + icon under "Text Color" to customize how text appears on the primary color. Enter #442B2D and notice that Theme Editor automatically checks to make sure the color is accessible.
Close the Text Color window to return to the color tab.
While you're in the color tab, you can add a secondary color to complement the brand. For now let's put in #FCB8AB again and choose the 100 shade.
If you look around on the "Material Components – Mobile" page in our document, you'll see that components across the sticker sheet have been updated to reflect the new color scheme.
The Material Light theme we started with uses 8px rounded corners by default. However, the Theme Editor lets you manipulate all four corners to create a custom shapes for your app.
Clicking on the shape tab, you'll see controls - you can manipulate all four corners, or just select one at a time. For the Shrine theme, you'll change all four corners at once.
Change the style from "curved" to "angled" and make sure the value is set to 8.
Now take a look at our document to see all relevant components, like buttons, updated with the new custom shape.
On the typography tab, notice that Material Light comes with Android's system font, Roboto, by default. But for the Shrine brand we want to use custom typography. So let's add a typeface.
To edit the current typeface, click on the "Rr" button and select "Rubik" from the menu. Rubik is one of many fonts that come built-in with the Theme Editor.
Once Rubik is selected, you'll see that the typographic scale in Theme Editor has been updated as well.
In the theme document, Theme Editor applies that scale to each Material Component.
Now we've adjusted three Material styles to create a theme with its own unique personality. Save your theme file and return to the starter layout file.
Back in the Shrine project, in the upper right corner of Sketch, a notice displays that the library used in this file has been updated.
Click the notice which will open a comparison dialog.
Click Update Components to accept the changes, and our starter layouts should start to take form with custom colors, type, and shape.
Now that you have a solid theme and starter layout using your customized components, it's time to share your work for implementation.
First, select both the starter layout artboards, then go to Plugins > Gallery > Upload to Gallery.
A window will prompt you to sign in to Gallery. Click "sign in" and continue in Chrome with your Google account.
Back in Sketch, you'll see a window that allows you to input information for uploading to Gallery.
In this case, you'll want to create a new project. Give it a name like "Shrine DesignLab."
Next, you'll need to name the new collection, a set of screens or other assets within a larger project. Give your new collection a name, like "Starter Layouts." Make sure "selected artboards" is selected. When uploading your real projects to Gallery, you can also add a description, so your team understands the context and relevance of each new iteration.
Then click "Upload."
When the upload completes, click View to review in Gallery.
In Gallery, select the Product Scrolled screen. You'll see a number of controls along the top of the Gallery interface.
You can add a frame and background to your designs in "Appearance Settings" . The comment panel allows you and your team to add comments to both a design and specific visual regions of each design, keeping feedback centralized and tied to each design iteration.
Next, click into "inspect" mode.
In the design, hover over elements with Inspect Mode activated to see blue outlines around each component. Click our Add to cart button to view its metrics.
In the pane to the right of your design, a dropdown menu allows selection of the platform of your choice. Select Android for measurements in density-independent pixels.
Because this button comes from the Material sticker sheet, Gallery has picked up the name of the component, and provides references to both the Material Design guidelines and the specific open-source component code for Android.
Once you've inspected your new layout, be sure to sign out of Gallery in Sketch by going to Plugins > Gallery > Sign Out, and sign out of your Google account on the web.
Now you know how to use the Material Theme Editor to create a custom branded design system for your apps using Material components. In the future, Material Theme Editor will continue to gain new capabilities, manipulating elevation systems and icon styles to create an even richer system of reusable components.