Working with UI Libraries

Learn how to use UI libraries such as Material UI, Ant Design, Bootstrap, Vuetify, or Chakra UI inside your design system.

UI Libraries Supported by Locofy.ai

Locofy currently supports design elements from:

Material UI

Bootstrap

Ant Design

Chakra UI

Vuetify

Note: Material UI, Ant, Bootstrap, and Chakra UI are available for React and React-based framework projects while Vuetify is available for Vue projects.

Tagging a UI Library element

To tag a UI Library element:

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

2. Choose the tag from the Locofy plugin by going to Step 2: Tag your layers: Available tags will be highlighted based on your selection.

3. Select a UI Library: Choose the UI Library that you are working with.

Note: Some tags are not supported by any UI Library. In such cases, that UI Library will not be shown as an option.

4. Select a Variation: Choose the variation of the element you are using

5. Edit Properties: You can further define how this element should work.

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

7. Click Done.

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

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

Tagging your Autocomplete

1. Select the autocomplete frame on your design and tag it as an "Auto-complete".

2. Follow the steps above to customize the properties.

Tagging your Accordion

1. Select the accordion frame on your design and tag it as an "Accordion".

2. You can customize properties such as the headers and content.

Tagging your Dropdown

1. Select the dropdown frame on your design and tag it as an "Dropdown".

2. Follow the steps above to customize the properties.

Properties auto-detection

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

Change or cancel UI Library

You can switch to a different UI Library or to cancel your selection by clicking the ‘Change’ or ‘Cancel’ button respectively

Note: If you Change or Cancel the UI Library, all the changes you have made in the properties section will be discarded.

Change or cancel Variation

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

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

Theming allows for a customized, consistent look across all your elements from the same UI Library.

Currently we support theming for Material UI and Chakra UI which offer a robust theming system.

Theming for Ant Design and Bootstrap libraries are on the way.