I just implemented a token naming system to a Design System and there are a whole bunch of issues of how the components are now showing up & grouping in the assets panel.
For example, this is how this component is named and structured:
Field Kit/Desktop/Interactives/Component/Primer/Accessibility Controls
But this is how it shows up in the assets panel:
You can see in the assets panel the naming is not showing up 1:1 and none of the nesting is working. I have a feeling from another post here that may be because these components live on one page (the UI Components page you can see) of our DDS and there are components on other pages. But, I am not sure how that would mess up the naming structure from the component as it is published to an asset.
To add, some of these components are nested inside auto layout sections of the DDS and the names of those sections are making their way into the asset structure, how is this possible?
I wish I could share a screenshot but I am not allowed to embed more than one as a new poster.
Hey there, sorry for the confusion!
This is currently the expected behavior. We can break down each part of the naming for you here:
- UI Components: Page name
- Interactives: Name of the frame in which the component is contained (containing frames of assets are included in the asset panel organization)
- The rest of the parts are just the component name, but specifically Component / Primer are like that because there are no other folders in Component other than Primer, so that is to illustrate that all the components directly below this header (including Accessibility Controls), belong to the Component / Primer path.
- If you added a “Component / Example / My Component” component, then you would have separate sections for both “Primer” and “Example”
**What exactly are you expecting to see in the assets panel? **
Thank you for the reply! I was expecting to see the nesting of my token naming system which goes like:
System>Theme>Domain>Category>Page>Group>Component>Element So system opens up to theme opens up to domain, etc.
That is the structure of how I named all of my components (like the example in my original post). That is how I have done it in the past but wasn’t sure how much of these issues were me applying this to an existing system or if things have changed in Figma or both.
Does that make sense? Is this not possible anymore with the behavior you described? Is it also not possible to not publish the frame names the components are nested in?
If helpful here is a full screenshot of how my assets panel is looking, nearly none of the nesting is working as you can see since at the highest level you can see the long full component names.
Hey there, thanks for the additional context.
If we’re understanding you correctly, the problem is that some of these path parts are not expanding fully the way you’d want them to. i.e forms / field kit / desktop / visioning tool, etc. But again, that’s simply because there are no other folders in “forms”.
Hm I don’t think that is the problem because I know I renamed several to be in the form folder. I think my bigger issue is that I don’t want the names of auto layouts that components are nested in to show up here, that is what you are seeing my screenshot, the ones that say “UI Components (page)/Data Layers” or “Modals”, etc are all what the auto layouts those components are nested inside of are named. Is that not possible in Figma anymore?
With my naming system I should have a high level folder that says “field kit (my system in my token naming structure)” then in that two folders one that says “Desktop” and one that says “Mobile” (The theme in my naming structure)and so on. That is how it used to work in Figma the last time I did this.
But here you see some of those long component names are showing up as a high level folder and not creating any of the sub folders. Does that make sense? I guess I am looking for most up to date documentation on naming structure since it sounds like things have changed?
I just had this same problem. Quite irritating. I had to remove all of the containing elements like frames so that my components are at the first level of the page’s layers in order for the names and structure to appear how I expected it to.
*how I expected them to,
What I’ve done now is use the frame as part of the naming scheme. To achieve, “Fields / Small Text / Default Required”, instead of naming the component that, I named the frame “Fields / Small Text” and used it to enclose all the field states. By simply naming the component “Default Required”, nesting behaves the way I expect it to when I view the components locally and when I use the library elsewhere.