Locofy Docs
PluginLegacy (Classic)Ui libraries design systemsWorking with Material UI

Working with Material UI

Learn how to use Material UI inside your design system.

Tagging a Material UI element

To tag a Material UI element:

  1. Select the Material UI element from your Figma file.

  2. Choose the tag from the Locofy plugin. Available tags will be highlighted based on your selection.

Taggingfig 2 11A Material “Checkbox with Label”

  1. Select Material UI.
Image 341
Note: Some tags are not supported Material UI. In such cases, Material UI will not be shown as an option.
  1. Select a Variation: Choose the variation of the element you are using
Image 181
  1. Select Palette: Choose the palette you want to use for this element.
Image 51
  1. Edit Properties: You can further define how this element should work.
Image 201

  1. Check the interactive preview: Play with the interactive preview to verify your element is correctly set up

  2. Click Done.

Locofy provides an interactive preview for you to visualize your element while tagging.

Image 212

Any changes made to your properties settings will update and refresh the interactive preview.

Properties auto-detection

When tagging your Material UI element, Locofy reads your Figma design to automatically populate properties for you.

Image 301

Change or cancel Variation

You can switch to a different variation or cancel the variation by clicking the ‘Change’ or ‘Cancel’ button respectively.

Image 321
Note: Similary, if you Change or Cancel the variation, all the changes you have made in the properties section will be discarded.

To switch between your palette choice, click on the palette dropdown and choose a different option.

Image 53
Note: Palette option only applies to the selected element. To edit your theme across all elements, see the Theming section below.

Theming

Theming allows for a customized, consistent look across all your Material UI elements.

Editing your theme

When tagging your Material UI element, you are required to choose the palette to use for the tagged element.

Click the pen icon to edit your theme settings.

Image 511

Theme settings

Image 52

Mode

Toggle easily between light and dark mode.

Palettes

For each palette, you can define the colours and contrast text individually.

Background Palette

Define the colours used for background in elements such as Select and Autocomplete dropdown menus

Typography

Define typography settings that will be used across all Material UI elements

Shape

Define the border radius to use across Material UI elements

Note: Changes to the theme settings apply to all the Material UI elements on the Figma page.

MUI Version

Material UI package will be imported as a dependency for the generated code base.

  • @mui/material: 5.13.4

Working with React Native UI Libraries

Working with Boostrap

On this page

Tagging a Material UI elementProperties auto-detectionChange or cancel VariationThemingEditing your themeTheme settingsModePalettesBackground PaletteTypographyShapeMUI Version