Working with Vuetify Components

Learn how to use Vuetify inside your design system.

Tagging an Vuetify Design element

To tag an Vuetify element:

1. Select the Vuetify element from your Figma file.

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

3. Select Vuetify UI library.

Note: Some tags are not supported by Vuetify. In such cases, Vuetify 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.

Properties auto-detection

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

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

Customizable theming support for Vuetify is coming soon.

Vuetify Version

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

• vuetify: v3.3.3