when you're creating figma spacing variables you might be asking questions like should I use 28 or 32 pixels what should I name these or how many variables do I need instead of spending hours just going through trial and error let's dive into the insights distilled from researching top Design Systems like these this is the air table spreadsheet that we're going to use to reference throughout the video to build this I cross referenc data from the available documentation and figma community files for 43 systems and extracted data points for 611 spacing units there's a ton of systems out there so I use Design Systems for figma decom to find the best ones with this data I'll go over insights around naming conventions REM values and pixel values all righty so let's get started with naming conventions so what are some ways to approach naming I found that all these names could be categorized into six approaches starting with t-shirt sizing numerical order value multiplier pixel values directional and scale the most common approach was t-shirt sizing 14 out of 43 or 33. 33% of references were using this this naming approach organized a size by words like small medium large and extra large the first structure contains a prefix then the word space or space followed by a T-shirt size at the end the prefix tends to be either the system's name or an abbreviation of it you can see an example of this with AWS amplify the prefix is amplify followed by the word space and then a T-shirt size like small medium or large the second structure contains the word space or spacing followed by a T-shirt size you can see an example of this with the Kyper design system they use the word spacing followed by the T-shirt size like small medium medium or large I also observed that there are slight variations with the way that these systems WR out the T-shirt sizes some systems use abbreviations like s m l XL like this other systems use full words like this my last observation was that in the context of a spacing scale they would name the base unit as the medium size the second most used approach was numerical order 10 out of 43 or 23. 81% of the references were using this this naming approach uses a sequence of numbers to organize the spacing increments from the smallest all the way up to the largest sizes like 1 2 3 4 5 or 10 20 30 40 50 here are some examples of this when we look at Carbon you can see the names are spacing 01 spacing 02 spacing 03 and so on for decathlon they use spacing 1 spacing 2 spacing 3 for finestra U they use fds spacing 1 fds spacing 2 fds spacing 3 and if we look at toop paste they use space 10 space 20 space 30 and so on the third most used approach was value multiplier 7 out of 43 systems or 16.
67% of the references we're using this this approach starts with finding a base unit like four or eight pixels then you create a spacing scale with the base unit and then you name all the values inside the Scale based on a calculation relative to the base unit this may be confusing so let's take a closer look at a great example like atlassian they defined their base unit as eight pixels they then created a scale with the values ranging from 0 to 80 using the base unit lastly they named the values in the scale with the word space followed by a multiple of the base unit let's break it down one step further if we look at space. 100 the 100 represents 100% of the base unit which is 8 pixels if we look at space. 200 the 200 represents 200% of the base unit which is 16 pixels if we look at space.
300 it represents 300% of the base unit which is 24 pixels if we look at space. 050 it represents 50% of the base unit which is 4 pixel you can basically think of this as a formula that helps you calculate the pixel values let's take another closer look at at an example like shop of five players we start by looking for their base unit or the value multiplier of one for this system the base unit is four pixels if you look at P space one the one represents 1 time the base unit which is four pixels if we look at P Space 2 the two represents 2 * the base unit which is 8 pixels if we look at pspace 3 it represents 3 * the base unit which is 12 pixels if we look at pspace 05 the 05 represents . 5 * the base unit which is 2 pixels one observation you might have noticed already is that the value multiplier is written out like a percentage or decimal form for atlassian they use three digits to write out the multipliers as percentages like 050 representing 50% or 100 representing 100% for examples like Shopify Polaris and Intergalactic they write out the value multipliers in decimal form 05 representing 0.
5 and so on now the least used approach was Pixel values 2 out of 43 or 4. 76% of the references were using this this approach named spacing increments based on the actual pixel values for example if we look at the liquid design system you can see space 8 is 8 pixels and space 16 is 16 pixels the directional and scale approaches were used in combination with the other ones that we just covered the directional approach was used in combination with 5 out of 43 or 11. 90% of the references this combination approach group spacing values by horizontal or vertical directions for example if we look at elastic y the naming structure combines a Direction with a T-shirt size like horizontal X small vertical X small for toop paste they combine a Direction with a numerical order structure like horizontal space 10 vertical space 10 and so on the scale approach was used in combination with four out of 43 systems or 9.
52% this combination approach splits the spacing values into groups based on scaling for various break points or various device sizes if you look at Salesforce lightning design system they split this spacing based on constant and variable values it's also combined with a direction and a T-shirt size if you look at gov. uk they break it down by Static and responsive values and they also combine it with a numerical order if we look at the Friday design system they group the names based on extra small and small screens or extra large large and medium screens and it's also combined with levels that follow a numerical order now that we went over the naming approaches you might be asking yourself is there a relationship between the number of spacing units and the approaches or how many spacing units should I use I calculated the average number of spacing units per naming convention and this is what I found t-shirt sizing had an average of eight numerical order had an average of nine scale had an average of 9. 5 directional had an average of 10.
4 pixel units had an average of 13 value multiplier had an average of 21 since the averages in the middle were so close I only looked at the smallest and then the largest values to make the following assumptions I assume that t-shirt sizing is used when there's not as many values within the scale because the common sizes that we're familiar with tend to be extra small small medium large extra large two extra large which is around 6 es my second assumption is that the value multiplier naming is used when there's a high number of values within the scale since the name isn't bound to any familiar conventions and it relies more on a calculation when we look at these examples you can see that each of them have a lot of values within their spacing scale as I was reviewing the documentation I frequently saw the REM values being listed on there I didn't fully understand this to be honest so I asked chat GPT about it here's what it said REM stands for root M it's a flexible way to measure things on a website the size of one REM is decided by the font size of the root element of the page so if the root font size is 16 pixels then one REM equals 16 pixels so what were the most common pixel values for one REM when I filtered the air table data I found that 100% of one REM values were 16 pixels but why is it 16 here's what chat GPT said the 16 pixel value often associated with REM units isn't something inherently tied to REM itself but rather it's a common default font size in many web browsers therefore when we use REM units they're often calculated based on the 16 pixel default size what are the common REM values if you look at this bar chart the x-axis represents the REM values and the y axis represents the amount of instances a value is used if we use this as a cut off the most common REM values are 0o 0. 125 0. 25 0.
375 0. 5 0. 75 1 1.
25 1. 5 2 2.
