Dynamic Variables

About this plugin

We all know how tedious it can be to manually update variables in Figma! Especially when you have a lot of them, and they depend on each other. I feel your pain, like when you have to update all 20 shades of the base primary color for two modes.

But don't worry! There's a solution.

Meet "Dynamic Variables," a plugin that automates the process and saves your precious time! The plugin is really handy because it lets you write code expressions in your variables. These are then updated dynamically based on other variables, which means you can spend less time doing manual work and more time being creative! 🎨

🔑 Key Features:

1. ⚙️ Dynamic Variables: variables that are dynamically updated based on other variables. Use JavaScript expressions between double curly braces {{ expression }} to define the relationship between variables. For example, a variable C can be defined as {{ $A + $B }}, where A and B are references to other variables. Expressions can be any valid JavaScript code written directly in the description field of the variable, making it easy to use.
2. 🕒 Two Working Modes of the plugin to update variables:
3. 1. Start Monitoring Changes. The plugin can continuously monitor changes in the variables and update them in real time. You can manually Pause/Resume the plugin to control the update process. You can set a custom time interval between updates according to your needs.
4. 2. Update Once. Just manually trigger an update whenever needed.
5. 🎨 Color Manipulation: The plugin uses the amazing colord library by Vlad Shilov, which allows you to perform advanced color manipulations like converting color formats, generating random colors, and more. For example: {{ cd($color).lighten(0.2) }} - to lighten the color by 20%. With the latest update, you can also use culori library functions. The plugin uses the shorthand cl for culori and cv for culori.converter() to make it easier to use. For example: #️⃣ luminance: {{ cl.wcagLuminance($brand) }} - to get the WCAG luminance of the color, or 🎨 oklch-clamp: {{ cl.clampRgb(cv("oklch(90% 0.4 135)")) }} - to parse OKLCH and clamp the color to the displayable gamut in Figma. You can also use Figma's built-in rgba() function to parse colors in the same way as in Figma color input fields, for example: 🎨 color: {{ rgba("green") }}.
6. ❌ Error Handling: The plugin provides detailed error messages for a variety of problems, including cyclic dependencies, invalid characters in variable references, and more.
7. 📚 Library Variables: The plugin supports variables from libraries. With the current version you can bring team variables with aliases to your local variables and use them in expressions. Support for direct lookup of team library variables is coming soon.
8. 🔗 Automatic Reference Updates: The plugin automatically fixes references to renamed or moved variables, ensuring that your dynamic variables are always stay up-to-date and error-free.
9. 🛠️ Advanced Features: The plugin offers a number of advanced features, for example, you can reference variable's data, such as name, id, collection, modes, etc. in the expressions. This allows you to create more complex and dynamic relationships between variables. E.g. you can have different logic for different modes: {{ ("$$.mode" == "Mobile" ? 1 : 2) * $base-padding }}. See complete list of possible $$ related properties here.
10. 🗂️ Relative Paths: With the latest update, you can reference variables from the same or neighboring groups without needing to specify the full path to the variable. See examples here.
11. Note: Relative paths are disabled by default. You can enable them in the plugin settings: Dynamic Variables -> Configure -> Toggle Relative Paths. The auto-reference update feature doesn't work with relatively referenced variables yet.
12. 🔄 Pre-Processing: The plugin supports code pre-processing. You can use $( ... ) to define a pre-processed expression. For example:
13. 1. Define color variables 🎨 brand: #FF0000, 🎨 accent: #00FF00, and 🎨 background: #0000FF.
14. 2. Create dynamic color variables 🎨 brand-50, 🎨 accent-25, and 🎨 background-75 with the same expression in the description: {{ cd($( "$" + "$$".match(/[a-zA-Z]+/)[0] )).alpha(parseInt("$$".match(/\d+/)[0]) / 100) }}.
15. 3. Try renaming the color and number parts of them and see how they change automatically!
16. Note: Pre-processed expressions are disabled by default. You can enable them in the plugin settings: Dynamic Variables -> Configure -> Toggle Pre-Process.

You can use the plugin for free with some limitations:

Up to 5 dynamic variables for free forever

More than 5 dynamic variables for free during the 7 or 14 days trial period (depends on the license variant)

To unlock all features and support the development of the plugin, consider purchasing a Pro version. 💳

Buy Pro License

1. Super Early Bird Discount Code: UZNJQYNG (-$50, First 10 buyers of Unlimited License, Sold Out, 0 left)
2. Early Bird Discount Code: A3NDI3OQ (-$30, Next 20 buyers of Unlimited License, Sold Out, 0 left)
3. Subscribe to get notified

Subscribe for updates

Use Dynamic Variables -> Pro License -> Activate key to paste your key and activate after purchase.

You can activate your license on up to 5 instances, or 10 for the Unlimited version. Don't forget to deactivate if you plan to uninstall Figma or reinstall OS, but don't worry I can reset this amount if all activations were done by you.

Please don't hesitate to contact me with any feedback or suggestions. I'd love to hear how you're using Dynamic Variables and what your needs are for future updates!

Here are some common use cases for Dynamic Variables:

1. 🎨 Color Palettes: Create dynamic color palettes that automatically update based on a few base colors. 🎨 primary-600: {{ cd($base-color).darken(0.1) }}
2. 📏 Spacing System: Define a spacing system with a base value and create dynamic spacing values based on it. #️⃣ spacing-s: {{ $base-spacing * 2 }}
3. 🖋️ Typography: Create dynamic typography styles that adjust line height, font size, and other properties based on a base font size. #️⃣ heading-md: {{ Math.round( $heading-sm * 1.2 ) }}
4. 📱 Localization: Use dynamic variables to reuse parts in different texts. For example, you can define a variable 🔤 user-name: Neil and use it in another variables 🔤 welcome-message: {{ "Hello, $user-name" + "!" }} & 🔤 goodbye-message: {{ "Goodbye, $user-name" + "!" }}.
5. 🎬 Live Prototyping: Use dynamic variables to create interactive prototypes. For example, you can display the real current time or date in your design 🔤 current-time: {{ new Date().toLocaleTimeString("en-GB") }}. Or grab some data from the API and display it in your design. #️⃣ btc-price: {{ (() => new Promise((resolve) => fetch("https://api.coinbase.com/v2/prices/BTC-USD/buy").then((r) => r.json().then((v) => resolve(v.data.amount))))) }}
6. 🧠 Conditional Logic: Use dynamic variables to create conditional logic in your design. For example, you can show or hide elements based on the value of a variable ⏺️ desktop-icon-visibility: {{ $max-width > $base-mobile-width }}.
7. 💡 Your Use Case: The possibilities are endless! Share your use cases in the comments below! 💬

🔗 Links (WIP):

1. 🛝 Playground file (Soon)
2. 📖 Documentation (Soon)
3. ✨ LLM Prompt to help building expressions (Soon)
4. 🎨 Figma Forum Post (Soon)