Hi there, I’m a developer with a bit of Figma experience. For a new project I need to use the PrimeNG UI Kit. I have not used third party libraries before but managed to import the UI Kit, publish it and add it to my design file. So far, so good.
I really love Figma, but there is one thing I cannot get my head around. When I create an instance of a panel/card or a panel/panel I’m stuck with a content frame that contains a text. I need to change the contents of the content frame to something else (non-text). So when I try to replace the text with any other component Figma objects and says: “Pasting inside the current selection is not possible”.
I can only get this done by detaching the instance from the master component. But then changes to the master won’t propagate to the detached instance anymore and I loose all variants. And if I’m not mistaking that is the main benefit of using components. What’s the use of a component that is so limited?
Creating a variant in the library also doesn’t make me happy because I will loose my customizations in the next update.
I have spent hours on Google, Figma community and Chat-GPT and still don’t have a workable solution.
Does anyone have a solution to this challenge? Or is a panel exclusively designed for containing one text? Or do I lack a basic piece of understanding how UX design works in Figma
The correct way in this scenario is to create a new variant/component. There is no feature for slots in components yet but you can vote for this suggestion: Fully Editable Component Instances. If you have a container that can fit multiple types of contents, another way is to create instances of different types of contents and place them in a single container component and then swap between them.
I will change the relevant components in the PrimeOne library by replacing the Text in the content frames with placeholder components. But this means I will be in trouble when we need to upgrade to a newer version of this library and have to redo all my customizations.
What I don’t understand is why PrimeTek doesn’t create their components in such a way from the start. That would make much for sense to me.
It’s very easy for you as a dev to understand these concepts but in a large org with a lot of designers not everyone would know how to handle such components without detaching. Design systems are built to be usable firstly, so some things like this can be simplified like this. It’s not too hard for a DS maintainer to make a couple of changes manually, especially if that means better usability and adoption of the DS.
