See the screenshot which has two files, so I want to create a button from the left file in another file at the right of Figma for that I have to use Findone or findAll method.
I want to create a plugin for it.
You’ll need to publish the button components to library for that to work (that’s a paid feature).
Then import a published component by key:
But after the publish component in the library, we can access it in any file via file findOne and findAll, right? then do we need to keep open that component in the library to use and find from it? It is the Component set node.
Can we sell that component from the library? because the component is private for sale to our clients
Absolutely not. You need to use the method I linked above (there is also one for component sets if you need it, not only individual components).
I guess yes. Not sure what you mean by that.
So, Once we upload the component to the library then how can we get the key?
Does the key different for each component loaded in a library or key is common for all the component sets in a library for a user?
Can you provide any doc or screenshots? it would be appreciated.
The method you provided will get the component in the file and then can we use the findOne method to create an instance of the children component?
The main thing is we are building a plugin So, how can we know in advance that the key for each component is to find and create an Instance of it?
You get component key by going to the library file, opening the plugin and saving the key somewhere, for example into client storage. But I guess since you are planning on selling the components, you would need to get component keys first, then save them to a JSON on your server or a hardcoded array the plugin.
Screenshot:
Stop being so focused on findOne, this method is used only when you need to search the whole doc or node children tree. It’s very slow and shouldn’t be used unless you absolutely need to search for the very specific kind of node and you don’t know where it is.
Here is how to create an instance of the component:
- Import component by key. Import method returns said component, so you don’t need to search for it anywhere, just save the import result to a variable.
- Create an instance of the imported component by calling
component.createInstance(). Done.
Thanks,
Do we need to keep the library open to create an instance because a user will not know that the component is in the library So, we need directly load the component by the key anywhere or any file without load library content, right?
And for the key we need to hardcode because we don’t know that the user will find which element or component. So, to get the hardcoded key of any component from the library what is the step because component.key will not work before the user choose any component to create an instance.
Or there will be the same key of the component In locally and after publishing in the library? So, we can get the key of the component first before publishing. I am new here so I am asking my doubts.
Also, my main confusion is each user should have paid plan to find components from the library via a plugin.
Can you please, give light on these last doubts?
You don’t need to keep the library open. You only need to have a component key to import it.
I don’t understand the question.
The key of component doesn’t change after publishing. But you can’t import non-published components, it will throw an error.
If you publish components to your own library, users won’t need to have a paid plan — they can import components from your published library. As a side-note, if you are planning on selling something, it’s unlikely a user on a free plan would buy anything before paying for the Figma itself so it’s likely that all paid users of your resource will be on paid plans (not guaranteed, this is just my logic).
One of my team members has published the component to the library, and i have a plugin in my local, How can i find the key from the library because I don’t know that where is key in library.
Also, can any user can access the component from a library if they have a key without an active library in their Figma? Also, if that user is not a member of the team. In short stranger, the user can create or import the component by the key whether he/she is not a team member or using the free plan of Figma?
We are all doing this via a plugin for stranger user to create the component.
I want whole componentSet key as well.
Please, help would be very appreciated.
Open the library file, select the component, open console and write a command to get the key of selected component.
Yes. It worked like this the last time I checked. But could’ve changed, I haven’t checked in a while.