Advanced Library Swap

About this plugin

Overview

Purpose — This plugin helps you safely migrate designs between libraries and design systems by swapping components, styles, and variables without breaking layouts or losing overrides.

Flexibility — You can map any component to any other component, even when libraries differ in structure, naming, or supported properties. Any number of libraries can be included in the swap mapping data, and you can precisely control which components participate in a swap.

Accuracy — Property and value mappings are fully customizable, ensuring the resulting designs remain accurate and consistent across systems.

Features

Component swapping across libraries — Swap components between different libraries or design systems, including major version upgrades.

Multi-library mapping support — Map any number of libraries into a single swap configuration and define how components relate across systems.

Selective component inclusion — Specify exactly which components are included in a swap to avoid unintended changes.

Any-to-any component mapping — Map any source component to any target component, regardless of naming or structural differences.

Custom property mapping — Define how properties, variants, and values should map during the swap.

Style and variable swapping — Swap text styles, color styles, and variables alongside components.

Preserve overrides — Maintain style overrides and customized values during swaps to prevent visual regressions.

Designed for large files — Built to handle full-file or system-wide migrations at scale.

Use cases

Design system version upgrades — Upgrade from one library version to another without rebuilding screens.

Design system migrations — Transition designs to a new or restructured design system.

Cross-platform conversions — Convert React-based design screens to native iOS or Android component libraries.

Incremental adoption — Gradually migrate selected components while keeping existing layouts intact.

Large-scale refactors — Safely update component structure, naming, or behavior across many files.

Instructions

Sync libraries — Open the plugin in each library you want to include in the swap mapping. In the Settings screen, click Sync to register the library and its components.

Select target content — Open the project where components from those libraries are used and select a frame that contains the components you want to swap.

Configure mappings — The plugin will default to a suggested library and property mapping. You can modify the selected libraries, components, and property mappings as needed.

Run and review — Click Swap and review the changes to confirm the results. You can undo the swap using Figma’s undo history if you need to revert changes.