The Library panel lets you link external design libraries, browse shared components and styles, and keep your design system synchronized across files.
Panel Tabs
Libraries Tab
Manage linked library connections:
- View all linked libraries
- Enable/disable libraries
- Check for updates
- Review pending changes
Components Tab
Browse components from enabled libraries:
- Search components by name
- Preview component variants
- Drag to canvas to instantiate
Styles Tab
Access styles from linked libraries:
- Text, color, effect, grid styles
- Apply to selected elements
- View style details
Variables Tab
Access variables from linked libraries:
- Browse variable collections
- View modes and values
- Bind to element properties
Linking Libraries
Add a Library
- Click "Add Library" button
- Browse available libraries
- Select library to link
- Library assets become available
Remove a Library
- Find library in list
- Click the menu (three dots)
- Choose "Remove Library"
- Confirm removal
Note: Instances remain but lose library connection.
Library Updates
Checking for Updates
- Click refresh button to check all libraries
- Update badge shows available updates
- Orange indicator for pending updates
Reviewing Changes
- Click on library with updates
- Review what changed
- Accept or dismiss changes
- Changes apply to your document
Update Types
- Modified - Component/style changed
- Added - New assets available
- Removed - Assets deleted from library
Swapping Libraries
Replace all references from one library to another through name-based matching:
How to Swap
- Find the library you want to swap from
- Click the menu (three dots)
- Choose "Swap Library"
- Select the target library
- Review compatibility preview
- Confirm the swap
What Gets Swapped
Library swapping uses name-based matching to update:
- Components - Component instances switch to matching components in target library
- Styles - Style references update to target library styles
- Variables - Variable bindings remap to target library variables
Match Preview
Before swapping, you'll see:
- Number of matched components, styles, and variables
- Items that couldn't be matched (won't be swapped)
- Color-coded compatibility indicator (green = full match, orange = partial)
Best Practice
Use consistent naming conventions across libraries (e.g., "Button/Primary", "Button/Secondary") to ensure smooth swapping between design systems.
Use Cases
- Rebranding - Switch from old to new brand library
- Design System Migration - Move from Material to custom design system
- A/B Testing - Test different design system variations
- Theme Switching - Swap between light and dark theme libraries
Using Library Components
- Go to Components tab
- Find desired component
- Drag onto canvas
- Instance created with library link
Publishing Libraries
Share your design system with others:
Publish a Library
- Open document with components/styles
- File menu > Publish as Library
- Configure library settings
- Add description and version
- Publish
Updating Published Library
- Make changes to source document
- File menu > Publish Updates
- Review changes
- Publish new version
Best Practices
- Link libraries before starting design work
- Check for updates regularly
- Review changes before accepting
- Use one source of truth for components
- Version your libraries with changelogs