How to Resize Elements of a Component Instance

Component instances don't allow you to change nested elements' dimensions. This handy little workaround will let you resize anything in your instances.

Figma Component Instances don't let you change the size of their inner elements. Dimensions can only be set on the main Component. For instance, if I click on this icon placeholder in my card Instance, the Width and Height fields are greyed out.

Width and Height are greyed out for Component Instances' nested elements in Figma.

Trying to toggle between Nested Components in my Instance doesn't work either. The original dimensions persist despite changing the props.

A handy workaround is that Auto-Layout settings can always be adjusted in Component Instances, so we can use Auto-Layout Gap between two objects to control the width and height of the parent.

We can create a Resizer Component that is made up of two Auto-Layout containers pushing shapes apart, one in Horizontal mode, and the other in Vertical mode. Then, set the Parent container to Hug its contents so that your two Auto-Layout containers will drive it's dimensions.

Figma Resizer Component that is sized using Auto-Layout Gap.

In this above example, I have placed two circles in each Auto-Layout controllers and set their size quite large to be able to see them. In your file, you should set those two shapes to 0. Figma does not let you set the size to 0, so try setting it to 0.0001 and Figma will round it down so that your Resizer is completely invisible.

In your Master Component, paste your Resizer anywhere you might need to control dimensions from Instances. In my case, I have an Icon Component that I nested in my Card component. I want to be able to control its dimensions and so I include the Resizer directly in the Icon, and set the icon vector itself to be in Absolute Position to float on top of the Resizer.

Pasting the Resizer in containers that require control of dimensions.

Now, from Instances, you'll be able to change element sizing. You can click within the icon to change the Auto-Layout Gap of your Resizer and see it resize, or you can set it to change the size with a prop.

Got a project in mind?

Contact me and let's work together!