Instance of component: how to paste an object to it?

You can't add a new element/component to the instance unless you detach it, but that’s not a recommended.
You need to add the element in the main component, then just hide it if you don’t want it to show in other designs.

Hey Arip, thanks for your help : )
 

It's really surprising to me that the concept of a cascade doesn't exist for components. 

Suppose I have a frame as the master component.

Now I add 6 vector graphics to the master.
Than I open an instance of that master.

I manually hide 5 of vector graphics in that instance.

If I now open 5 further instances, I have to hide 5 graphics in each individual instance.

This seems very confusing and very time-consuming.

Have I described the concept of components correctly? Or am I misunderstanding it?

My background: I have been writing CSS code for many years. This makes it very easy to overwrite existing rules with additional rules. 

So, in a highly elegant and concise way, an element can have some properties in common with others and still have its own specific properties.

Hey Arip, that’s a helpful idea with hiding all vectors in the master and than unhide a single vector in the instances. I will give the feature component a try. But it seems, that it will not fit to my needs. 

​@AndreasB You may want to check out the Instance Utils plugin for Figma. It’ll allow you more control over component instances without detaching.

You have a few options though. One option is to use the concept of “component slots”. There are plugins to help like Slot Editor or Instance Utils as mentioned above, or you can create 1 or more “slots” manually. Then, you can create a local component and use instance swapping to swap out the slot for the local component. Then you’re free to edit the local component parent as needed.

Otherwise, as ​@Arip Rusli mentioned, you can determine your maximum number of needed items in a component and hide them by default, then turning on the amount needed in any instance. You can also optionally create variants with different numbers of layers/vectors/etc shown or included.

Hi Bryce. Thanks for your hints. 

I still don't understand the possibilities and concepts of the two plugins. I'll have to take another look at it.

The essential thing for me is that you can somehow realize a concept of parents and children, where the relationship remains and you can still set the properties for a child, which then win over the same property of the parent. Exactly the way it works in CSS.

The normal function of components “Each instance always has completely identical properties to all others” and “You can only make layers of an instance invisible” is not helpful for me. I find that far too confusing and redundant.

Think of Figma components more like templates. Or in some ways similar to react components as opposed to CSS styles. There’s a master component, then instances are copies of it.

One of the main reasons for Figma components is to increase consistency in a design or design system. This is why they feel limited in some ways. It’s by design.

Instances strictly inherit all properties from the master. You can’t add or remove layers, but you can hide or show them or override various properties like text content/fill/layer styles/etc. In that way, with overriding properties, it is similar to CSS. Children inherit the parent’s properties by default, but you can override those.

Component properties and variants will be really helpful for getting what you need out of components as well.

As far as the plugins I mentioned, I recommend checking out this video from the Instance Utils creator. The main thing to know is that it allows you to reorder, add, or remove layers to component instance without needing to detach from the parent component. There are some other helpful videos on their YouTube channel as well.

Some Figma features that are maybe more similar to CSS you should look into:

• Variables: store values like colors, spacing, typography to be applied to objects in a design that can then be edited all in one place. There’s also variable modes that can be used for say, light/dark mode, or mobile/desktop sizing. You can also set variables that reference other variables, so they can kind of cascade in a way.
• Styles: Kind of like CSS classes. They bundle properties like fill, stroke, typography, and effects into reusable styles that can be applied to any layer. The bundled properties can also reference variables if you wish.

If you’re thinking strongly in terms of CSS, maybe start with variables for foundational values like CSS variables, then apply those with styles to be reused easily like CSS classes. These styles and variables can be applied to components or items inside components as well.

Thanks a lot for your infos, Bryce. That helps me to understand the intentions and usefulness of components as they are. 

Variables and Styles are on my todo list since a couple of days : )

I’m more used to write code instead of handling GUI tools. Not easy to check out, what all those news interface elements can do : )

Variables always affect an entire file, right? Or could a variable be limited to a single frame?

You create variables for the entire file (can also publish them), but you can apply them to individual layers/frames/objects as you wish!

For a comparison to CSS/HTML:
 

 

:root { --primary-color: #FFA500; ) 

 

Figma analog: variable called primary-color

  button-element { background-color: var(--primary-color) 

 

Figma analog: primary-color variable applied to Fill property on an object