Skip to main content

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”.

image


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.

Thanks for helping me out @Gleb!


I do support the idea of Fully Editable Component Instances. This would fix my problem. So I gave it my vote.


In the thread about Fully Editable Component Instances I stumbled on a video about Placeholder Components — Editable components without detaching in Figma - YouTube - www.youtube.com. It doesn’t match all my requirements but for now I think this is enough to get me going.


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.

Reply


Terms & ConditionsCookie settings