What is this icon and for what it is use for?

I’m working in making my own portfolio and i used a plugin in order to make it, but i want to change the default order of the template but it doesn’t let me do it.

What appears on the right ribbon are these icons [adtached image] and I think that it means the auto layout or something like that doesn’t let me change the order or add more things to it. I want to know what’s the meaning of those purple icons and how can I edit them?

Screenshot 2023-02-18 at 14.22.04

The object you want to edit is an instance of a component. You can see that by the purple color. You can’t change the order of elements in a component. You have to detach the instance with alt + cmd + b (or ctrl + b in windows), than you can change the order of auto-layout objects and other stuff.

Empty diamond shape in purple is representing that the component is a instance/child of parent component. You can right click on that component and select ‘Detach Instance’ or use shortcut keys ‘Ctrt+Alt+B’ so that the component will no longer be associated with the parent component and changes can easily be done according to your needs.

Coming to 3 vertical lines, this represents that ‘Auto layout’ property applied to the elements within that layer. You can change these properties from the property panel located on right side of the screen or select ‘-’ option, next to auto layout property, to remove the property of selected element.