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

Working with Chakra UI

Learn how to use Chakra UI inside your design system.

Note: This guide teaches you how to tag an existing Chakra UI element on your file. For new designs, you can also learn how to Drag & Drop pre-built Chakra UI elements to accelerate your design.

Tagging a Chakra UI element

To tag a Chakra UI element.

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

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

Image 46A Chakra UI “Checkbox with Label”

Image 442
Note: Some tags are not supported by Chakra UI. In such cases, Chakra UI will not be shown as an option.
  1. Select a Variation: Choose the variation of the element you are using
Image 443
  1. Edit Properties: You can further define how this element should work.
Image 444

  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 445

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

Properties auto-detection

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

Image 30

Change or cancel Variation

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

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

Theming

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

Customizing your theme

When tagging your Chakra UI element or using drag & drop, you are required to choose the palette to use for the tagged element.

Click on “+ Add Custom Color” to create a new theme

Rectangle 29810

Theme settings

Rectangle 29811

Create a custom color theme by clicking “Add more”

You will need to enter a name for your theme and choose a base color. Locofy will then generate the color palette for you. You can further customize the individual tones for each shade of color.

Rectangle 299

Greyscale

You can customize your grayscale palette to ensure accessibility

Typography

Define typography settings that will be used across your Chakra UI elements

Note: Changes to the theme settings apply to all the Chakra UI elements on the Figma page using the same theme.

Chakra UI Version

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

  • @chakra-ui/react: v2.2.6

Working with Ant Design

Working with Vuetify Components

On this page

Tagging a Chakra UI elementProperties auto-detectionChange or cancel VariationThemingCustomizing your themeTheme settingsCreate a custom color theme by clicking “Add more”GreyscaleTypographyChakra UI Version