CSS Spacer Variables
Spacer variables are a foundational aspect of any design system. They are used throughout page layouts, typography, elements, and more. Establishing both global and alias spacers ensures a level of abstraction that engineers and designers alike can utilize. Additionally, using spacer variables allows for more attention to accessibility and responsive design; it also allows for theming where one might enlarge or shrink the UI without the help of the browser window.
Variable Structure
For spacers, things like unit type (rem, %, vh, vw, em, and px,) unit value are important modifiers that can be used to better describe the role the variable plays in the repo or Figma library.
Global Variable Naming
Here is an example of the naming convention for a 1 rem spacer. It maps to an expected value of 16px (assuming the default browser text size.)
Global Variable Ramp
For spacers in particular, a ramp ascends at a pre-defined rate. This ramp ensures flexibility and scalability if alias tokens are later added.
Alias Variable Naming
Alias variables are variables that map to certain global variables. By mapping to select global variables, a visual hierarchy is created that impacts the flow of UI designs, typography, and more. It is important for something like an alias spacer to abstract the units. For this reason, t-shirt sizing is a preferred naming convention. For things like VH, VW, and PCT, their values remain universal.
Alias Spacer Rem Ramp
Although there are many global rem spacers, a select few are mapped to the alias variables. The remaining global variables can be later used for things like theming and media or container queries.
Alias Spacer PCT Ramp
For something like percentage, the abbreviation 'pct,' is used. Ramping by units of 10 will suffice for our percentage use.
Examples of Spacer Variables
Padding
Across Figma designs and repos, layouts are built with space. By using spacer variables for things like padding, a unified understanding can be gained. These same variables can be utilized in Figma's variables creating a greater cohesion between designers and engineering.
Gap
Again, Gap is every across designs whether a designer or engineer are creating flex layouts or grids. By using spacer variables for things like gap, a shared understanding can be gained regarding designs.
.png)
Alias Spacer Theming
Few consider the way spacers can later be used for things like theming and responsive designs. Team velocity and attention to accessibility go out the window when designers and engineers alike use PX for everything. Just because Figma only describes in PX, doesn't mean we can't work together to create software that's flexible for our users.
Examples of Theming with Spacer Variables
Buttons
Are users struggling to navigate data dense Ui designs? Do users encounter eye strain from viewing seemingly compact designs? Through a runtime layer, and with spacer variables, users can adjust the application to their preferred visual density.
Dialog
Padding, Gap, Typography, can all scale to better suite different user needs with space theming.
