Auto-Tagging By Layer Name

With our new "Auto-Tagging by Layer Name" feature, the Locofy plugin further minimises any manual tagging work you need to perform – accelerating your design to code workflow further.

With this feature, you can follow simple naming rules for your Figma layers, and Locofy will automatically tag those layers – without any manual intervention from your side.

Note: Auto-Tagging is only available for web frameworks at the moment.

Layer Naming Syntax

Simply follow this naming syntax to have your elements automatically tagged (added spaces for readability):

[tag name] / [OPTIONAL: tag subtype OR UI library OR "none"] / [OPTIONAL: UI library element variation]

Example:
checkbox/bootstrap/default-checkbox-label

Once you have named all your layers correctly, in Step 2 – Tag interactive elements in the Locofy plugin, you can just toggle the checkbox called "Auto-tag using the layer name" and click "Auto-Tag".

All your correctly named layers will automatically be tagged, and appear under the Tagged tab. You won't need to first accept the recommendation for tagging – Locofy already took care of that.

Examples

Below are some examples on how to automatically tag your elements using Figma layers names.

Example 1 – Button
Tagging a button. Simply name the respective Figma layer as such:

button

Example 2 – Input with Library
Tagging an input, using Material UI's outlined input with an icon. Simply name the respective Figma layer as such:

input/mui/outlined-with-icon

Similarly, tagging an Chakra UI checkbox with a label would work as such:

checkbox/chakra/default-with-label

Note: If you update the layer's name later on (e.g. from _button_ to _input_), and then click on "Auto-Tag" again, the tag will be updated accordingly.

Note: Any changes you make to the tag in the Locofy plugin will permanently override the tags assigned by the layer name.This means that if you manually change the tag in the Locofy plugin by clicking "Change", the tag will be updated accordingly. From now on, if you update the layer name again, the tag **will NOT** be updated based on the layer name. Instead, the manually updated tag from the Locofy plugin will now be maintained, until you untag and change the layer name again in the Locofy plugin.

Appendix – Currently Supported Tags

The following tags are supported in HTML, React, Angular, Vue, Next.js, and Gatsby.