Support for forward slash (`/`) in Element naming (e.g. `MyButton / primary / :hover`)

[tomsoderlund]

Is your feature request related to a problem? Please describe. The forward slash (/) has a special meaning in Figma components (also for names of color/text/effect styles). It allows you to create groups of similar components that can be easily swapped out.

With multiple /, you can create nesting of components, e.g. Button / primary / :hover.

Describe the solution you'd like

• A component on Elements page named MyButton / primary / :hover should be exported to CSS MyButton.primary:hover { … }.
• A component called MyButton should be exported to CSS MyButton { … }

Nice-to-haves:

• Support components with inheritance, e.g. if component MyButton / :hover is just an instance of MyButton with some color overrides, CSS values for MyButton:hover should still be exported.

Describe alternatives you've considered Current structure e.g:

᠅ MyButton (component)
    ⬚ Normal (group)
        ▭ Normal (e.g. text, rectangle – NOT a group)
        ▭ Normal (e.g. text, rectangle – NOT a group)
        ▭ :hover (e.g. text, rectangle – NOT a group)

works but enforces a structure which is not optimal for Figma’s component system.

Update: I see now that Figmagic is parsing the slashes, but creates completely separate components for each group.

[mikaelvesavuori]

This may be problematic because of Unix/Mac and how the slash can be a folder separator. I'll probably have to add some amount of logic to handle that.

I will investigate when I have time!

[tomsoderlund]

@mikaelvesavuori I see now that Figmagic is indeed parsing the slashes, but creates completely separate components for each group, e.g. Button\Normal, Button\Primary.

[tomsoderlund]

From Figma’s documentation on how to use slash in layer naming:

[mikaelvesavuori]

This will probably not be supported, since the Figmagic mental model is different enough from the Sketch/Figma "slash names" concept. Combined with the problems of Node and cross-platform parsing of slashes I don't see this as an immediate candidate for v4.

[mikaelvesavuori]

With a tiny bit of extra mental effort, I see that the main implication of changing this is that the entire behavior and structuring of (in Figmagic's case) classes will change. I will postpone this until at least after Figma Variants have been publicly available.