Component Pro

About this plugin

To improve my work efficiency, especially in mastering the Component, I made this plugin. It contains many enhancements for Figma’s Component and Instance features.

Just to be clear, I am not very good at HTML and TypeScript, some code was written by chatGPT, so welcome to feedback by sending mail to [email protected].

Here is a detailed introduction to each function of the plugin.

Track Com/Ins

Change the current selection to correspond to the Component/Instance.

You need to select some instances or components first. For instances, run this function will change selection to their main components, but will not change viewport. For components, will select corresponding instances.

Of course, corresponding components/instances need to be in the same page.

Track Brothers

Find instances with the same main component.

Select Instances, and run this function, all instances that has the main component will be selected.

Be aware that if the page has many layers, it may take a lot of time.

Clone & Inherit

Batch replace layers with specific instance.

First, Select a component or an instance named “master”.

Second, select more layers.

Third, run the function, and the layers selected in 2nd step will replace to 1st step’s instance (create by component or clone by ‘master’ instance).

If you choose to select other instances in 2nd step, if it has the same properties as 1st step component/instance, replaced instance will keep the value.

Text2Instances

Batch replace text layers with specific instance.

This function is a lot like ‘’Clone & Inherit’, but the layers be replaced need to be text or a combination of texts.

For example, select a component which has 2 text properties, and select a frame contains 2 text layers, then run this function, the frame will be replace to instance created by component, with text properties being assigned to characters of those 2 text layers.

Fully Detach

Detach an instance and the instance inside

I think the description is simple enough, but just in case, let me give an example.

If you have an instance, it has 2 sub-layer, all is instance. Once you run this function, instance and its sub-instances will all be detached.

By the way, the layer that is hidden will be removed, otherwise it looks to mess.

Update ins Inside

Select all instances can be updated

Select some Frames, Groups, Components or even Instances first. Running this function will find out all instances belong to those that can be updated.

Noticed, It may take a long time to analysis each instance type sub-layers, I still try to improve that.

Comp Selection

Make selection a component

This function will make it a component by your selection, replace the selection with an instance that created by the new component.

Make sure that all selection are belong to the same parent.

--------

Next, some features may not exactly made for component, but they also useful(and I really don’t want to code another plugin).

Auto Rename

Rename selected layers and their sub-layers

Swap Layer

Exchange the position of selected layers

Make Max

Quickly set the size of selected layer to their parents’ size.

Sort Layer

Change the order in left side panel of selected layers by their position.

Perfect Corner

Quickly set selected layers’ independent corners to 60%(iOS like).

Round Pixel

Round layer’s position and width/height to Pixel

Adjust Outer Size

Adjust Component Set, Section, Frame’s size according to their sublayers.

I know Figma has its own official feature, but I made an adjustment, the adjust margin will choose the minimum value.

That's all for now, I guess.