Typography and Colors Variable

Variables

Variables in Figma, often referred to as "design tokens," are reusable values that can be applied across various properties of a design system, such as colors, typography, spacings, and more. They allow designers to maintain consistency and scalability within their projects by enabling quick updates and ensuring uniformity across all components and layouts. For example, you can define a color variable for your brand’s primary color and use that variable across all your designs. If you decide to change the primary color, you can simply update the variable, and all instances where it is used will automatically change, saving time and reducing the potential for errors. This makes managing and iterating on designs more efficient and cohesive.

Variables for Solo Projects

For solo projects, variables are still very useful, though the benefits might not be as immediately apparent as in team settings. Even when working alone, using variables can greatly enhance your workflow efficiency. They allow you to quickly experiment with different design choices and make broad changes easily. For instance, if you're working on a personal project and decide to change the color scheme or adjust the typography, having these properties tied to variables means you can make those changes globally in just a few clicks, rather than manually adjusting each element. This saves time and ensures that your design remains consistent, which can be particularly helpful as projects grow in complexity or evolve over time.

Explore Design Systems in Figma Community

You can explore design systems in the Figma Community that utilize variables, such as the "Ant Design System," "iOS 17 UI Kit," or the "DesignCode UI," and many more. These systems benefit beginners who want to jump straight into designing without setting up everything from scratch. By adopting these established systems, beginners can observe how professionals structure their design systems and employ variables effectively. This access is an invaluable learning tool, providing insights into best practices in UI design and showcasing the practical application of design principles in real-world projects.

Types of Variables

Figma uses four main types of variables: color, number, string, and boolean. Each serves specific functions to enhance design flexibility and control. Today, we'll be focusing on color and number, and string variables.

1. Color Variables: These are used to define and apply consistent colors to elements like fills and strokes. Changing a color variable updates the color across all linked elements.
2. Number Variables: Number variables assign numerical values to properties such as width, height, padding, and spacing. This helps maintain consistent dimensions across different design elements.
3. String Variables: These variables control text content within designs, useful for localization and dynamic text updates. String variables ensure text consistency across multiple instances and components.
4. Boolean Variables: Boolean variables manage visibility states with true or false values. They are currently limited to component instances, allowing for the toggling of element visibility on different device layouts.

Typography Variables

Typography variables in Figma come in two types: string and number variables. String variables are used for text attributes that require specific names, such as font family, style, and named weights (e.g., "Bold" or "Regular"). Number variables are utilized for numerical attributes like font size, line height, and numeric font weights (e.g., 400, 700).

• Navigate to the Variables panel in Figma.
• Click on Create New Collection and name it ‘Typography’.
• This collection will house all your typography-related variables.

Add Font Family Variables

For this design, I'm using two fonts: Space Grotesk and SF Pro. I will create two groups: one for the font families and another for title and body text. Using a slash separates these into groups.

• Within the Typography collection, create a new string variable.
• Name it according to the font family it represents, such as Font/Family/Title for title.
• Assign the actual font name as the value, “Space Grotesque”.
• Duplicate the variable, and change the name to Body and the value to SF Pro.

Add Weight Variables

Let's create variables for font weight. You can use either number or string variables. For numeric values, you might use 300 for 'Light' and 800 for 'Extra Bold.' However, I prefer using string variables, which use descriptive names like 'Regular' and 'Bold.' Remember, lower numeric values result in thinner text, while higher values produce thicker text.

• Create a new string variable.
• Name them clearly and systematically, for example, Font/Weight/Light and set the value to 'Light'.
• Duplicate the variable, change it to Font/Weight/Semibold, and add another for Font/Weight/Regular.

Add Font Size

Next, we're going to create variables for font size, using number variables this time. Follow these steps to set up each font size:

• Create a number variable for each size.
• Name them clearly and systematically, such as Font/Size/xs.
• Assign the values accordingly: XS for 11, SM for 13, MD for 15, LG for 17, XL for 20, 2XL for 34, 3XL for 40, and the largest, 4XL for 60.

Line Height

We're going to add number variables for line height, a crucial element of typography. Typically, line height is set at 1.2 to 1.5 times the font size to enhance both readability and aesthetic appeal. This ratio varies depending on the font and its application; for body text, a multiplier of 1.4 to 1.5 is common, while headings might benefit from a tighter spacing of 1.2 to 1.3, ensuring legibility and a visually pleasing layout.

Add Line Height

Next, we're going to create variables for line height, using number variables. Assign each font size a line height using the following multipliers and round to the nearest whole number:

• For a font size of 11, a line height of 1.5 results in 16.5, so round it to 17.
• For a font size of 13, a 1.5 multiplier gives a line height of 19.5, rounded to 20.
• For a font size of 15, a 1.5 multiplier results in 22.5, rounded to 23.
• For a font size of 17, a 1.5 multiplier results in 25.5, rounded to 26.
• For a font size of 20, a 1.5 multiplier results in 30.
• For a font size of 34, a 1.4 multiplier gives a line height of 47.6, rounded to 48.
• For a font size of 40, a 1.4 multiplier results in 56.
• For a font size of 60, a 1.3 multiplier for a tighter fit as a heading results in 78.

Applying Typography Variables to Text Styles

Let's integrate these new variables into our existing text styles. Hover over the style and click on 'Edit Style'. From the font family dropdown, click on the variable icon. A panel will appear displaying the available string variables for selection. Choose 'Title', and you will see its name appear below the properties.”

• Select a Text Style to Edit: Go to your Text Styles library. Choose a style where you want to apply the variable, like a heading or body text.
• Apply the Font Family Variable: Click on the ‘Edit Style’ button. In the font family dropdown, select Apply Variable. Choose the appropriate font family variable from your collection.
• Apply Font Size and Weight Variables: For font size and weight, follow the same steps. Ensure each text style is linked to the correct variable for consistency and ease of management.

Color Variables

We're now going to convert our color styles into variables, which can streamline the process of applying and managing colors across our design project. Instead of converting these manually, we'll use a plugin called 'Styles to Variables Converter.' This tool automates the conversion of your color styles into variables and updates the properties of each color style accordingly.

• Install and Use the Plugin: First, ensure that the 'Styles to Variables Converter' plugin is installed in your design tool. Once installed, run the plugin with your color styles open.
• Check the Conversion: After running the plugin, go to your collection of styles. You should see your newly created variables listed. The group or label 'Colors' should appear at the top of the list, indicating that your color styles have been successfully converted into variables.

Modes

I've initially created color styles for light mode. Now, I'd like to expand the palette by adding colors for dark mode. This involves defining new values specifically tailored for dark mode visibility and contrast.

• Create Dark Mode Colors: Begin by defining a new set of color styles intended for dark mode. These should complement or contrast effectively with the dark backgrounds for optimal readability and aesthetic balance.
• Testing Light and Dark Modes: After setting up the dark mode colors, test the full layout to ensure both light and dark modes switch seamlessly. Select the full layout and toggle between light and dark modes. If you've applied the color styles correctly, all elements should adapt without issues.
• Organize Color Styles: To keep the design system organized, group the text color styles under the name 'Foreground.' Place the other color styles in a separate group called 'Colors.' This categorization helps maintain clarity and ease of use in your design project.

Weight Entry Screen

We'll continue from where we left off, creating the weight entry screen that allows users to input their weight. This feature is essential for setting up profiles or tracking fitness progress. The screen includes toggles for weight measurement in pounds (lbs) and kilograms (kg), and a visual gauge to indicate the weight range.

• Create the Outer Gauge: Start by drawing an ellipse with a diameter of 630 pixels. Add a stroke with a width of 30 pixels, set the dash to 2, and the gap to 9. This will create the first dashed line of the gauge.
• Duplicate and Modify the Dashed Line: Duplicate the first dashed line. Change the stroke width to 40 pixels, but keep the dash at 2 and increase the gap to 53. This alteration helps differentiate the gauge's layers.
• Create Central Circles: Draw a large circle with a diameter of 700 pixels and align it with the dashed lines. Then, create another, smaller circle with a diameter of 500 pixels and center it within the larger circle. These circles will serve as the base for the visual gauge.
• Mask Excess Elements: To clean up the design, create a frame around the circles and use it to mask and hide any portions of the circles that extend beyond the desired gauge area.

Color Variables to Gradients

While you cannot create variables specifically for color gradients, you can incorporate color variables at various stops within a gradient. This approach maintains flexibility in your design, allowing for easy updates across your project. When you change a color variable, it automatically updates every instance where that variable is used within the gradients.

• Setting Color Stops: If you want a color to appear prominently at a certain point in your gradient, place two color stops close to each other using the same color variable. This technique is useful for emphasizing a color in the middle of a gradient.
• Create and Use Gradient Styles: To maintain consistency across similar elements without repeating the gradient setup, create a style for your gradient. Once the style is created, apply it to other elements like the second dashed line.
• Apply Color Variables to Other Elements: Select the two other ellipses and apply the 'Container Color' variable to them. This ensures that they match the broader design theme and adapt to any future changes in the container color.

Cursor Indicator

We will create a cursor indicator which will include a central cursor line, two polygons, and text labels.

• Draw the Cursor Line: Use the 'Line' tool to draw a vertical line 60 pixels long. Color it bright green (#00FF00) and slightly elevate it for visibility.
• Create the Cursor Polygon: Select the 'Polygon' tool and draw a 38x38 polygon. Round the corners with a 2px radius inside and a 4px radius on the bottom.
• Duplicate and Modify Polygon: Duplicate the first polygon and resize it to 24x24. Fill it with blue (#0000FF) and ensure the background color matches the container.
• Group the Elements: Select the line and both polygons. Group them into a frame to maintain layout integrity.
• Add and Style Text: Use the 'Text' tool to add text '90', set in 'SF Pro' light, size 16. If the text feels cramped, adjust the background size to 500 pixels to fit the text better. Duplicate the text, rotate it to 40°, and update to '70'. For additional information, duplicate the text again, rotate it to -40°, and change the text to '120'.

Segmented Control

This design features a segmented control where each segment corresponds to a different unit of measurement for weight — pounds (lbs) and kilograms (kg). The segments are visually connected, emphasizing that they are part of the same control but can be selected independently. When a user taps on one of the segments, the system recognizes it as a separate action, allowing the user to toggle between units. This approach not only provides a clear visual distinction between choices but also supports a quick and efficient interaction.

• Add the segmented control and the liquid button from the asset page.

Data Cards

The last step is to create data cards, each displaying a specific type of user information—one for age and the other for height—in a clear and minimalistic design.

• Type "AGE" in uppercase using the Subheadline style and add the gear icon. Implement auto layout for these elements.
• Type "21" using the Title 1 style. Apply auto layout to both containers. Fill the containers with the designated color style and set the width to 166. Ensure the fill extends across all child containers.

Conclusion

Congratulations on completing the course! You've learned key skills in flat design and light mode, including how to use visual hierarchy, information architecture, variable typography, and colors. These tools will help you maintain consistency and enhance your design projects. Keep applying what you've learned and continue to innovate in your designs!