Design System Organizer

About this plugin

Easily reorganize giant design systems

► Complete Video Guide

◇ Playground File

I. Copy variables and styles between files and collections

✅ Save aliases to local and remote variables

✅ Copy variables between collections

✅ After copying you can do a swap libraries

Copy between files

Copy variables between collections

☝️To save external variable aliases connect library before import

☝️To save local variable aliases copy them before or all together

☝️All font used in styles need to be detected by Figma

⛔️ Color styles with filled image are not supported yet

Use to:

→ Duplicate library for specific clients and quickly update mockups to use new library instead

→ Organize storage of variables and styles without boundaries

► Video Guide

II. Swap libraries for components, styles and even 🚀 variables

✅ Find and swap in selection or entire page

✅ Swap between local groups (e.g. swap between brand1/color100 and brand2/color100 variables)

✅ Swap variable aliases inside styles and variables

✅ Save component variants with additional props (swap instances works better then Figma)

✅ Swap instance layers as applied overrides (toggle option)

Case

Current state

Goal

Swap libraries

ℹ️ Compared to native Figma swap libraries:

- Available for variables

- Swap between local folders by name only (without all path)

- Select specific layers for swapping (not only the entire file)

- No need to turn off multiple checkboxes when you only need to swap a few types of components (Cmd+A to select all)

Use to:

→ Move masters to organize libraries without boundaries (e.g. move local components to library)

→ Selectively swap between master versions (e.g. swap between local folder1 and folder2)

and much more...

► Video Guide

III. Manage all in one place with folder-like interface for Components, Styles & Variables

✅ Duplicate items, groups and collections

✅ Manage library tree for components (like styles and variables in Figma)

✅ Quick jump to component somewhere on pages from library tree (one click)

✅ Manage component path names like "toolbar/nav/back" using folder-like interface (useful for huge libraries where used "/" in component names)

More features:

1. Rename

2. Group / Ungroup

3. Move to (drag & drop)

4. Duplicate

5. Delete

ℹ️ Some parts of the video-tutorials might not match what you see in the product today. We appreciate your patience while we make updates.

► Video Guide

ADDITIONALLY

✅ Right click context menu 

✅ Quick shortcuts

SHORTCUTS

→ Multiple selection: Cmd/Ctrl + Item click

→ Select range: Shift + Item click

→ Select all: Cmd/Ctrl + A

→ Rename: R

→ Group/Ungroup: G/U

find more in context menu

TRIAL

You have a 45-day free trial for each new file with new components, 10 free trials for swap components, styles or variable and 10 free export/import styles. During the trial period, the ability to select target and styles is limited to 10.

☝️ Please do not copy components from the file where the trial period ended, this will decrease the period of the new file.

LICENSE

Pay once, use forever! To purchase a license please visit our Product Page on Gumroad. You can pay by card or PayPal. Feel free to contact us if you need a discount for any reason. 

FEEDBACK

If you have a great idea feel free to contact us by email [email protected]. You can also use this email to report suspected bugs in DSO plugin.