This summary of the video was created by an AI. It might contain some inaccuracies.
00:00:00 – 00:13:04
The video discusses creating Figma spacing variables by categorizing naming conventions into six types. It explores different approaches like t-shirt sizing, numerical order, and value multiplier, with examples from various design systems such as Atlassian, Shopify Polaris, and Salesforce. The importance of prefixes, word structures, and variations in naming conventions is highlighted. The speaker also delves into the concept of REM units in web design, common REM values, and their relationship with pixel values. Utilizing values like 28 plus can simplify decisions for larger spacing, beneficial for layout margins. The significance of testing and sharing spacing variables through Figma's professional plan is emphasized, along with encouraging viewers to explore Figma.
00:00:00
In this part of the video, the speaker discusses creating Figma spacing variables, focusing on naming conventions. They categorize naming approaches into six types: t-shirt sizing, numerical order, value multiplier, pixel values, directional, and scale. The most common approach is t-shirt sizing, followed by numerical order. Examples and observations from various design systems are provided to illustrate these naming conventions. The video highlights insights on naming conventions such as prefixes, word structures, and variations among different systems.
00:03:00
In this segment of the video, three main approaches to spacing systems are discussed. The first approach involves using the value multiplier method, where a base unit like 4 or 8 pixels is chosen and a spacing scale is created based on multiples of this unit. Atlassian is used as an example where they set their base unit at 8 pixels and create a scale from 0 to 80 pixels. The second approach involves spacing increments based on actual pixel values, which was the least used method. Lastly, the third approach uses pixel values with a set spacing increment. Shopify Polaris and Intergalactic are examples where value multipliers are written in decimal form.
00:06:00
In this part of the video, the speaker discusses spacing approaches used in design systems. The directional approach is combined with 11.90% of references, grouping spacing values by horizontal or vertical directions. The scale approach is used in 9.52% of systems, dividing spacing values into groups based on scaling. Examples from Salesforce, gov.uk, and Friday design systems are provided. The speaker also calculates the average number of spacing units per naming convention. T-shirt sizing averages 8 units, pixel units average 13, and value multiplier naming averages 21. Assumptions are made about the relationships between spacing units and naming conventions.REM values are briefly mentioned in the context of system documentation.
00:09:00
In this segment of the video, the speaker discusses the concept of the REM unit in web design. They explain that one REM is determined by the font size of the root element, typically 16 pixels. The most common pixel value for one REM is found to be 16 pixels, a default font size in many web browsers. Common REM values include 0, 0.125, 0.25, and others. The speaker explores the relationship between common REM values and how they may follow certain scales, such as the octave scale. Additionally, they analyze common pixel values, noting patterns like the frequent use of multiples of four and eight in pixel sizing.
00:12:00
In this part of the video, the speaker discusses how using values like 28 plus can reduce the number of decisions to consider when designing for larger values such as 80, 96, and 128 pixels. These values are found useful for creating larger layout margins or padding. After testing and finalizing spacing variables, they can be published locally in the current file or shared with a team using Figma’s professional plan to sync across multiple files. The speaker also mentions their affiliate link for starting with Figma for free and encourages viewers to like the video. Joining the waitlist in the description will provide access to a table used for video content containing data on typography and more.