In this video we'll cover the
material theme builder tool for web and Figma plugin.
Here you can
select
inspiration to visualize
the material
Theme
I can also choose to shuffle
a source color, for example,
and I can toggle between
dark mode and light mode
if I want to customize my own, I could simply upload a
wallpaper
and that will give me
my theme based wallpaper.
Let's say I want to customize this further.
I can just go to custom
switch between dark and light.
I want to switch to dark mode, change the primary color to something
I like
and change the tertiary color.
Maybe make the neutral around there.
So this way I can visualize and play around
with ideas for a theme.
I can
add a
custom color
and give
a custom name using the webapp so I can call it
notice
and when I'm ready I can export
I have my export options
and I can take it from here
but I will be using Figma where
I can make use of the plugin
Here I'm working on a design system
so I can simply go to plugins
I already have the material theme plugin installed
to get the plugin I can simply browse
plugins and
I can
select to install the plugin
and here are instructions
on how to use the plugin as well.
So after the plugin is installed
simply
launch the plugin
Open plugin
and I select get started.
Wait for
the theme to generate
That's the theme generated.
I can also choose select image and choose
an image as before and generate from that.
And with that selected it automatically updates.
I can see the tonal palette
generated
100 to 0
representing the 13 tones
and here we have the light and dark theme.
We can visualize our theme
and its design tokens.
It also generated typography, but I won't be covering typography
in this video
here, we have our
Figma styles generated, so that's the text
and color styles which are the design tokens, here
we can see the sys, ref and
the source,
and that's our material theme
we can also
adjust our theme here
So I'll
open the plugin again
and I'll switch to custom
and I'll change the primary to that color
I'll wait for that to update
and that seems to be updated
And then I'll change this
maybe I want to
change this around, if I
want to change the primary and tertiary
that will update
I'll make changes to neutral
using the plugin,
I can add a new theme, import tokens
and I can also reset to the baseline.
I'll show how to use swap
and these light and dark toggles later
here I have export options
If I want to add another color, I can simply select this button
just wait for that to load...
I want to make this an orange, something like that.
And it will generate
I'll add a second custom color.
wait for the toast to disappear
That's when I know it's ready,
that generated
my second custom color
and I want to make this a bright green,
something like that.
And that will update.
I'll close this.
I can change the names
by going to the color
styles, source, and I can
change the name of the colors
and that should update the next time I run the plugin.
I'll launch
the plugin again,
it reset the color
for some reason, I want to keep the tertiary I had before.
So I'll switch that back
And next I will show
how to swap using
the plugin
If I select a component that
uses material 3 tokens or figma styles.
I can simply select that component and
swap out the colors by selecting it.
That magically swaps out
the theme, I can also switch between
the light version or the dark version
and do the same
for this one.
I can swap out the colors,
change it to a light or dark
and that is the material theme builder plugin for Figma
Thanks for watching! Like, comment and subscribe for more videos! Check out the links in the description!