Swap Component
Replace one component instance with another while maintaining its position, size, and overrides.
Components
No shortcutIntermediate5 min readQuick Reference
Swap Component
FigmaKeyboard Shortcut
N/A
Toolbar Location
Figma toolbar
Best Used For
- ▸Refer to the tutorial content for specific use cases
- ▸Practice with sample projects to build experience
- ▸Combine with other tools for advanced workflows
Intermediate⏱ 30–60 minutes to master
Key Settings
Select:Swap:Choose:
Swap Component lets you replace a component instance with a different component. The new component keeps the same position and properties where possible. This is essential for A/B testing and design exploration.
Where to Find It
Select an instance and click the component name in the Design panel, or click the swap icon in the Layers panel.
How to Use
- Select: Click on a component instance on the canvas.
- Swap: Click the component name in the Design panel to open the component picker.
- Choose: Select a different component from the picker. The instance updates to the new component.
Pro Tips
- Swap is great for trying different button styles or icon sets without rebuilding layouts.
- Use Instance Swap properties to let other designers swap components without detaching.