End of Manual Spacing Adjustments but big problems with Number variables in Figma

Introduction:

As a designer working to build Branch’s design system, I faced a common challenge: spacing. Although we had defined spacing guidelines beforehand, strict adherence was lacking. The process of adding empty blocks for consistent spacing became confusing and rigid. To address these issues, I embarked on a journey to explore the power of number variables and auto layout. In this article, I’ll share my experiences and how these tools transformed our designs, making them more friendly, quick, and flexible.

The Spacing Struggle

As a designer committed to maintaining consistency and brand identity, I encountered challenges with spacing. Despite having a spacing system based on multiples of 4, it was difficult to enforce these guidelines. The use of empty blocks for spacing disrupted the flow and caused confusion among the team. A new solution was needed to simplify the process and foster flexibility.

The Birth of Number Variables

A better spacing solution as recently offered by Figma was Number Variables, I discovered the power of number variables. These invaluable tools allowed me to store and reuse values like padding, gap, and corner radii.

With number variables, I could define spacing values once and apply them consistently throughout my designs. Excited by the possibilities, I decided to integrate them into my workflow.

A Paradigm Shift

Implementing number variables and auto layout brought about a significant paradigm shift in my design process. By separating spacing from individual components and defining them as variables, I found that modifying designs became more efficient. Rather than tweaking spacing within each component, I could now update spacing values in one place, knowing that auto layout would handle the rest. This approach led to more consistent and cohesive designs that were easier to maintain.

The Power of Reminder

Using number variables also served as a powerful reminder for me to adhere to the defined spacing guidelines. With clear values assigned to variables, it became evident when spacing deviated from the system. This reminder empowered me to prioritize consistency and fostered a shared understanding among team members.

But, as I implemented it everywhere, I started to face challenges too, so it is not the ultimate solution yet that I was looking for. The first challenge I faced was, it is difficult to change the spacing as clicks are tougher, then it was automatically getting updated everywhere without me disturbing it and the biggest was why am I supposed to name it when Figma doesn’t show me what the name is so why is necessary, I prefer seeing the name and values both together so I don’t have to cross-check everything.

Farewell to Manual Adjustments!

My journey to learning spacing with number variables and auto layout revolutionized my design process. I bid farewell to the confusion and rigidity caused by manual spacing adjustments. Instead, I embraced the simplicity and power of number variables, enabling me to define spacing once and consistently apply it throughout my designs.

Paired with the flexibility of auto layout, my designs became more friendly, quick, and adaptable. As a designer, I learned the importance of being open to new approaches and continuously improving my design system.

But this is not the end of growth, we need a lot more developments here, the space has improved but it is not stable enough to be applied everywhere currently.