How we kept our spacing and typography flexible in Figma

The large investment firm I was working for had a solid design system that had been used for years across public-facing products such as user dashboards, company websites, and mobile apps. However, the product my team and I are focused on is a Windows application designed for operations associates who process various tasks and assist with customer queries requiring data-dense views. Our goal was to surface key information at a glance, minimizing the need for scrolling or clicking.

After adopting our existing design system, it became clear that the current base font size and spacing scale wouldn't work for our use case. We decided to reduce the base font size from 16px to 12px and adjust the spacing scale accordingly.The reaction to this change was mixed: while some users appreciated the new implementation because they could view more information at once, others reported difficulty reading the smaller text on their screens.

The software we are designing is used daily by associates who typically spend 6–8 hours working on the platform. Each associate has their own workflows and requirements based on their department’s needs. To better accommodate these differences, our team decided to offer users the flexibility to control their views by adjusting font sizes and spacing scales according to their preferences.

Currently, it’s not possible to use mathematical operators with Figma variables. I would love to have the ability to do something like this in Figma (see screenshot). It would be extremely useful not just for managing type modes, but also for setting line heights automatically without having to manually input values for each font size, and for supporting multiple device sizes more efficiently in designs.

I found a great plugin by Neil Akhmetov called Dynamic Variables, which allows you to make your variables dynamic using simple JavaScript expressions. If you'd like to explore it, you can find the plugin here.

To start using this, you’ll need a few simple steps. Begin by setting up your base variables along with modes, think of this step like defining the base rem size for your website. We'll use this as the foundation for dynamically setting the values of the remaining variables.

The plugin uses simple JavaScript expressions written between double curly braces {{ expression }} in the description field of variables.Let’s take an example of dynamically calculating the body line-height variable. Start by creating a number variable, but don’t assign it a value just yet, we’ll do that in a minute.

In the description field of this variable, add the following expression. Once it’s added, you’ll see two options: update variables once, or let the plugin monitor changes in value (note: the free version has some limitations).

We’ll use the same method to create spacing variables and make them dynamic based on the spacing mode and base font size.