Installing
The first thing you’ll need to do is install the plugin. Figma has made this incredibly simple.
- Go to the Componentizer for Figma installation page.
- Press the Install button on the top-right of the page and follow the instructions.
- Head back over to Figma and open the Plugins menu item. You should see Componentizer in the list.
Running Componentizer
Componentizer was designed to be simple. It has one basic command, but it will perform different operations based on your selection.
With Frames Selected
- Open a document and select at least one frame.
- From the menu, select Plugins → Componentizer → Create and Replace All.
- A component will be created for each of the frames you had selected. The masters will be placed on a separate page in your Figma doc named “Components” and the original frames will be replaced with instances of them.
- Componentizer will then search your document for other frames that match the ones you had selected. They will also be replaced with instances of the new master components.
With No Selection
- Open a document that contains frames, but make sure no selection is active.
- Run Plugins → Componentizer → Create and Replace All.
- Componentizer will now automatically run the process described above on every non-root frame in the document (ie, every frame nested within at least one other). This is a very simple way to clean up an entire file.
Advanced Usage
Most of the time, you’ll only need the primary Create and Replace All command, but there is also an Advanced… command available, which allows you to customize how Componentizer works. Here’s a run down of the available settings.
Match Within
This setting allows you to define the scope of layers Componentizer will search through to find matches.
- All Pages - Search through every page in the document. This is the default setting for the Create and Replace All command.
- Current Page - Search to the current page only.
- Current Selection - Restrict search to layers within the selection.
Also Run on Selected Child Frames
By default, Componentizer runs recursively on selected child frames. You can turn this setting off to only create components out of directly selected frames. Note: This setting is only shown when there is an active selection.
Include Root Frames
Root frames are those that exist directly on the artboard (ie, they are not nested within any other frames). These root frames are not processed by default. Enabling this feature means that every single frame in your document will be converted to a component.
Allow Overrides
This setting helps reduce the number of components created by reusing them and relying on overrides to manipulate the instances to match the original frames. This may not always be desired. Disabling this feature means that instances will require strict matching of the component.
Optimizing Results
There are a few things you should understand about Componentizer to help maximize your results.
- The Create and Replace All command is recursive. It will create a component for every frame selected AND every frame nested within the selected frames. If you do not want to convert child frames, use the Advanced… command.
- Componentizer will attempt to make the fewest number of master components possible to recreate your frames. It achieves this by using overrides where possible. It’s important to note that not Figma only allows overrides on certain properties including text, images, and nested component swapping.
- The performance of Componentizer is affected by the number of layers in a document and how many of those layers are frames. Please be prepared to wait if you run it on a large document.
- The Componentizer algorithm identifies matches based on structural similarities (eg, geometry, hierarchy, etc). Properties like layer names have no influence over matching and will be blown away when swapped for instances.
- Componentizer has certain tolerances built in to its matching algorithm to account for subtle inaccuracies that occur during the design process. For example, if text layers are slightly misaligned, Componentizer will adjust and consider them a match anyways. If two frames didn’t match but you expected them to, it’s possible there are subtle variations in the coordinates or properties that these tolerances didn’t account for.
- There are certain restrictions in Figma that will prevent Componentizer from executing. For example, if a master component is nested within a frame that is being processed, Componentizer will not be able to convert it to a component and will fail silently.
Help & Feedback
If you’re having trouble or would like to send me feedback, please email me or shoot me a DM.