Creating design system library for Figma is an exciting journey. It allows not only to rethink every tiny element to serve designers in their future work, but also learn dozens of tricks & techniques.

Here is a bunch of them I learn while preparing my design system library.

Tip 1 — Don’t limit yourself to 1 Variable Collection

Create separate variables collections for color foundations (primitives), semantic (components), spacing, radius.

Color foundations collection gives you flexible palette as basis

Semantic colors make easy to attach them to existing and new components. Having dedicated tokens, for text, border, background or icons make the kit super flexible and ready to act as design system library.

Tip 2 — Variable modes adds flexibility & automation

Having separate collections allows you to build dedicated modes — for colors dark & light, for spacing, for radius etc.

Tip 3 — Control collection visibility

If you want to make collection private (some don’t want to expose primitives), you may simply add “.” or “_” as the prefix — just like with components. This prevents entire collection from being shared as library.

Tip 4 — Scope your variables to increase ease of use