Back to Plugins
Slot Editor

Slot Editor

Make re-usable components that you can slot modular content into

web componentsslottemplatecomponents

Plugin Preview

Slot Editor preview

About this plugin

Much like how components work on the web, Slot Editor lets you make any content within a component a slot, allowing you to make changes without effecting other instances.


Making a slot


  1. To make a slot, select one or more objects within a component.
  2. Run the plugin command Make Slot. This will turn the content into an instance.


Editing a slot


  1. Select one or more slots or instances with slots
  2. Run the plugin command Edit Slot. This will make all slots editable in place.
  3. When you're done making changes, click Done in the notification below.


Alternatively you can edit any slot by selecting an instance or slot and clicking Edit Slot from the the Properties Panel.


Removing a slot


  1. Select one or more objects with slots within them.
  2. Run the plugin command Remove Slot. This will not remove the object itself.


The plugin won't remove nested slots. To remove these, run command again until there are no slots left.


Things to know


When you select any content inside a component and make it into a slot the plugin replaces it with an instance of that content. It first creates a component with the content inside, then replaces that with an instance of that component.


When you edit a slot it creates a unique instance of the content inside that slot. Any changes you make will be private to that instance.


Because of this you should be aware that if you make changes to the contents of slots inside a component, they will not be reflected in any instances created from that component (unless they haven't been edited). For this reason, it is best to make a placeholder for your slot, rather than turn existing content into a slot.


If you delete a slot from a component, it will remove the respective slot from any instances that were using that slot.

Plugin Details

Version13
CreatedSeptember 9, 2021
Last UpdatedNovember 14, 2024
Categorydesign-tools-other
CreatorGavin McFarland
Stats713 installs, 89 likes
PricingFree

Technical Details

  • API:1.0.0
  • main:main.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • http://localhost:6322Dev
    • none
    • ws://localhost:9001Dev