<?xml version="1.0" encoding="utf-8"?>

Groups and collections of variables

Groups and collections of variables Bad Practice
Groups and collections of variables Best Practice

In Figma, both groups and collections serve as organizational tools for variables, with slight differences in their usage.

Let's consider a design system with various colors. Creating a color collection allows you to keep all color variables in one organized place. For example, you can have variables for primary, secondary, and accent colors within this collection. This ensures consistency and easy access when applying colors throughout your design.

Additionally, you can create a color group called "Primary Colors" to group variables like "Primary Red," "Primary Blue," and "Primary Yellow."

Similarly, you can create a text group to manage text variables across your design system. This group can include variables for headings, paragraphs, and captions, allowing you to easily apply consistent typography styles.

By utilizing color collections and groups, as well as text groups, you can maintain an organized design system, ensuring consistency and efficiency in your designs.

Improve your UX & Product skills with interactive courses that actually work