The California-based tech maker – Google has now brought the support for Figma Variables onto its Material Theme Builder.
Check out how to use it below.
Material Theme Builder Now Supports Figma Variables – How to Use
For the set up, first, users will have to search for the Material Theme Builder within the Figma plug-in search and then click on ‘Run’ or ‘Open in…’ from the Community page. Following this, users can add a playground file on drafts by tapping on ‘+Playground File’. Select ‘Create Theme’ to generate a Material Theme as well as the Material Design tokens as Figma Styles. Also, if users make use of the design kit components, turn on the State Layers option in Settings to generate the needed state layers. Next, MD tokens or Figma styles have to be assigned to custom elements and components, and after this, users can swap to the selected theme. Select the elements too which have styles assigned to them, and then swap in order to update the theme.
Now to create a custom theme, colors can be assigned to the Material You color story and the generated accessible colors can be added to the same color space as dynamic colors. By clicking on ‘Add a color’, users can extend past the user-generated dynamic colors or add semantic colors. With the help of the color picker, the color can be updated. Renaming the custom color is also possible by clicking on the text input and to delete it, simply tap on the trash icon.
To add themes and presets, within the Theme menu, users can change the current theme, add a new theme, and even reset the current theme. Also, ‘Swap’ can update everything selected to the theme. Presets are also made available in the menu. From the plug-in, the font family can be customized too and for this, users can select the ‘Type tab icon’ in the tab bar; select the Display, Headlines, & Titles drop down; and select the Body & Labels drop down.
After making the theme as per the liking of the user, implement it by clicking on ‘Export’ and select the required code format.
