What's New: Variables & Interactions UI Update
October 21, 2024
Words by Yujin Jo
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.
Here are a couple of use cases to get you started:
Example 1: Showcasing different product versions
If your digital product has multiple styles or variations, you can set up a default style using Variables, and use Interactions to seamlessly switch between versions.
Computer Doctorz
Whether it’s a frozen screen or a slow modem, our team of tech pros is ready to get your machine back on track. From software installs to hardware upgrades, we’ll keep your system running like new—without breaking the bank!
Original Version
New Version
Example 2: Light/dark mode
Thinking about adding light/dark modes for your content? With Interactions, you can set Variable values to create an instant theme switch. Say your default font color is white—just define black as the alternative for dark mode, and do the same for your background colors.
Bonus: Dark mode isn’t just stylish; for some, it enhances readability.
Now, here’s the cool part: Hit the button below, and watch this blog go dark.
Dark mode 🕶️
Light mode 🤍
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. 🙌