Figma's new variable feature is a game-changer for design, allowing designers to hold values that interact with code more naturally. However, the system struggles with how these values relate to one another, particularly when it comes to creating design systems. Many established design systems utilize a base value and adjust it across different states—like using one color and changing its opacity for various states instead of defining separate colors. Figma variables allow value swapping but lack the functionality to derive values based on relationships, which creates a disconnect for designers trying to implement more complex systems. The article dives into the limitations of Figma's variables when it comes to composition and structure. For instance, shadows in Figma are treated as separate entities rather than a composite object that includes properties like x-offset, y-offset, blur, and spread. Each shadow must be managed individually, leading to duplication without any underlying logic. The author suggests that if Figma allowed for composite shadow variables, designers could define shadows as structured objects, reducing redundancy and creating a more cohesive design system. A proposed solution is to create a "shadow object" that encapsulates the concept of depth without tying it to specific rendering. By introducing a generic modifier for state, such as scaling factors for different interaction states, designers could derive values like elevation, y-offset, and blur from a set of rules instead of manually adjusting each shadow. This approach not only simplifies the management of shadows but also scales effectively as design requirements grow. The focus shifts from handling individual values to managing a clear system that defines relationships, ultimately streamlining the design process.