I’m looking for a way to add meta data to component instances. So like instance specific documentation, which is available in the inspect panel to viewers.
Is there any way to do such a thing in Figma?
Thanks in advance!
You can add a description and documentation link to the components. Developers will be able to get these details in the Inspect panel.
Yes, I know. But what I’m after is adding meta data/documentation to specific instances of a component.
As an example: I have 2 button instances of the same component. But I want to add specific information/documentation/meta data… to one of these two buttons. However; I see no way how this is currently possible. Or am I overseeing something here?
Anyway,
@tank666
, thanks for you reply
Me and my colleagues are requesting the same thing: a “proper” or let’s better say “figma roadmap aligned way to do so”.
Today, we solve this problem in a non-satisfying way by adding invisible text layers to a component, link them with a “text” property, name it like the meta data attribute and fill it up with the meta data content. Unfortunately this causes some problems:
components get heavier
the hidden layer is there and at least editors can interact with it in the workspace
search for metadata (e.g “SEARCH attribute_xyz” does explicitly NOT reveal these items, perhaps because they are hidden
In order to enable Viewers to easily inspect these things, you MUST map it to a “Text” property that is then presented under “inspect”
Hey, I stumbled upon your comment and I think that’s a feature I can easily add to the plugin I’m working on. My question is: how would you like to see that metadata? Here are a couple of options I can think of:
Have the plugin open to see the metadata
Run a plugin command to toggle metadata layers visibility in the current document
I built the plugin, but did not add the metadata feature yet. For now, it allows you to generate all possible variants for a component based on the rules you set.
Here’s the plugin if you want to take a look:
https://www.figma.com/community/plugin/1263631854497422865/cva-component-variance-authority
And here’s a tutorial on how to use it:
https://www.figma.com/file/qIQmi9QAY7sG0CNwjFltm4/Component-Variants-Generation-Tutorial-with-CVA?type=design&t=vNh5RtVxlJVFH1pc-6
