Design System Organizer

Easily reorganize and analyze giant design systems

🆕 Check outour new Design System Graph app for analyzing library and mockup files. It creates audits with a detailed dependency graph, tables, and metrics on usages, detaches, and overrides.

Features

I. Extended swap for variables, styles and components

II. Copy variables and styles between files and collections

III. Manage components with folder-like interface. All in one place for comps, styles & variables

Cases

📄 Swap local variables, styles, and components within one file (e.g., swap variables between collections in the same file)

🚚 Transfer styles and variables between files/collections while preserving all internal references to other variables

🔁 Batch swap nested variables inside styles and variable collections

📦 Import .fig design system files from another account and restore all connections between variables, styles and components

✂️ Split a monolithic design system file that takes too long to open into separate modular files (by platform, brand, or architectural layer)

🔗 Combine scattered design system files (e.g., colors, typography, components) into a single unified DS file

🌳 Swap overrides for nested instances and layers

► Complete Video Guide

◇ Playground File

I.Extended swap libraries for 🚀 variables, styles and components

Compared to native Figma swap libraries:

✅ Selectively apply scope: selection, current page, or all pages

✅ Swap variables inside styles and other variables

✅ Iterate through all nested instances and overrides

✅ Swap by name only, not just by full path

✅ Restore links for imported .fig files from another account

✅ Split a single file into several library files

❌ Does not work very fast

How to?

Step 1:Go to new target library file select master variables, styles or components and click "Mark as Swap Targets" (Cmd+A to select all)

Step 2: Go to "Instances" file, select apply region and click "Swap"

Apply region:Layers, Styles, Variables (all or selected)

[✔️] Iterate nested instances & overrides

► Video Guide

II.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

Between files

Step 1: Navigate to File A. Select items and click "Export" (Cmd+A to select all)

Step 2: Navigate to File B and click "Import"

Between collections

Step 1:Select varibales, select "MoveTo" and choose collection to move (or use drag & drop)

Step 2: Confirm "Duplicate" action in the Figma alert

☝️You will need to republish the variables/styles and then swap variables/styles in the design files

☝️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

► Video Guide

III. Manage components, styles and variables with folder-like interface

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

✅ Duplicate items, groups and collections

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

✅ Manage component path names like "toolbar/nav/back"using folder-like interface (useful for huge librarieswhere 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