What's New: Fluid Breakpoints & More

This month, we’re rolling out Variables, a powerful feature that acts as the backbone of your design system, along with a new UI flow for Interactions.

1. Variables

A variable is a named value that can be reused throughout your project and managed from one place. Change the value once, and it updates everywhere that variable is used, making your workflow much, much more efficient. Check out our guide for setting up and managing variables.

Currently, we support three types of variables:

• Number (with units like px, %, or vw)
• Font family
• Color HEX codes

The best part? Variables can work with Interactions. This means you can set a variable as a target and trigger a new value as the outcome, opening up all kinds of creative possibilities, such as showcasing different product versions or creating light/dark mode for your site.

2. Interactions UI Update

We’ve also revamped the Interactions UI to improve readability and cut down on extra clicks.

• New List View: Quickly see the trigger, target, and action at a glance, without diving into each Interaction.
• Inline Interaction Form: Interaction settings are now embedded in the right panel, keeping your canvas clutter-free.
• Reworked Flow: Set your trigger, then select the action before choosing a target. It’s faster and more intuitive.

Give these updates a try and see what you can create with them. 🙌