Users should Not be able to Import Styles with . as Grouping

[keeganedwin]

Describe the bug
When creating Figma styles and importing them to the plugin, users are unaware that the naming convention in Figma has to follow a Style/name format in order for the styles and tokens to sync.

To Reproduce:

1. Create styles in Figma following the plugin naming convention style.name.
2. Import styles, then change the reference of any style
3. Token in plugin updates but style in Figma does not

Key Information:
user created the style following the plugin's naming convention style.name, and on importing and changing the token reference from the plugin, the style in Figma would not update

Screen.Recording.2023-04-03.at.3.36.01.PM.mov

Proposal:
On importing styles the first screen should have a model informing that the correct naming conventions for the styles should be used in order to sync with the plugin

And then proceed to the screen with the modal to import the type of styles:

[six7]

What if, instead, we'd

• Only show this modal when there's . in the style names
• Show this modal after picking which styles to import
• Give the user an option to Rename styles from . to / and Cancel
  • Rename styles would rename the styles for the user and then import them
  • Cancel cancels and lets the user manually rename

[SamIam4Hyma]

Added to Featurebase Roadmap as a known issue to test and track with V2 beta testers - ❖ 🪄 Sync variables and styles is now Export to Figma

[SamIam4Hyma]

@keeganedwin I'm not able to replicate this issue anymore in the V2beta build. Can you test please and if you also can't replace we can close this issue.

[keeganedwin]

@SamIam4Hyma @six7
I'm still able to replicate this in both Published 38.9 and rc8.
Since the plugin imports style.1 and style.2 as a group, it has a different structure than the styles setup in Figma, and so if you try to create styles (sync does not work) it creates a color group called Style with 1 & 2.

[keeganedwin]

Reproducible in 2.2.2:

1. Create color-styles named style.1 and style.2 in Figma.
2. Import these into the plugin
3. Apply the token on a frame
4. Change the reference of the token
5. Export back to Figma
6. See error

The plugin uses . as the grouping syntax but Figma uses /. So users shouldn't be able to create styles with . Think we could follow Jan's fix for this

CleanShot.2024-12-04.at.15.28.36.mp4