Andrej Mlinarević

Zeljko Prsa

Welcome back to our "Designing Complex Interfaces" series. After covering Variables and Styles, we're now exploring Figma Components, a crucial element in creating efficient and consistent designs.

💡 Design system Workflow: Variables → Styles → Components


Understanding Figma Components

Figma Components are reusable elements that form the building blocks of your design system. They act as templates for design elements, allowing you to create a main component (often referred to as the "master") and then use instances of it throughout your design. The key advantage?

When you update the master, all instances update accordingly, ensuring consistency and saving time.


Key Aspects of Figma Components

Consistency and Efficiency:

 * Maintain design coherence across projects
 * Create once, use multiple times, saving significant time

Flexible Control:

 * Easy simultaneous updates across all instances
 * Override properties in instances while preserving core design

Improved Collaboration:

 * Team members use consistent elements, ensuring design alignment

Learning and Complexity:

 * Initial learning curve to understand best practices
 * Risk of overly complex nested components without careful management

Performance Considerations:

 * Large numbers of complex components may impact file performance


Example Application: Creating a Button Component

Let's walk through the process of creating a button component, a common and versatile element in many interfaces. Our example will use a simple button with an icon and text.

Note: This button uses Auto Layout, which we'll explore in depth in our upcoming article. For now, just know that Auto Layout helps create flexible, responsive components.

Create the master component:

 * Design a button with an icon and text. In our example, it's a blue rounded rectangle with a circular icon and "Get Component" text.
 * Select all elements of your button and click the "Create component" button in the top bar.
 * Name your component clearly, such as "Button/Primary/Default".

Define properties:

 * In the Properties panel, create properties for elements you want to be easily changeable:
 * Text: Make the button text a property.
 * Icon: Create a property for the button's icon.
 * Fill: Create a property for the button's background color.

Use your component:

 * Drag your new button component from the Assets panel onto your canvas to create instances.
 * Try changing the text, icon, or color properties in these instances. Notice how you can make these changes without affecting the master component.

Update the master:

 * Make a change to the master component, such as adjusting the corner radius or padding.
 * Observe how all instances update to reflect this change, while maintaining any custom property values you set.

Create variants (if needed):

 * With your button component selected, you could add variants for different states like "Hover" or "Disabled".
 * For each variant, adjust the appearance as needed (e.g., darker fill for "Hover", muted colors for "Disabled").

This button component example demonstrates the power of Figma components: you can maintain consistency across your interface while still allowing for necessary variations and easy updates. The use of properties allows for flexible customization of instances.


The Interplay of Components, Variables, and Styles

As we've progressed through this series, we've covered Variables, Styles, and now Components. Let's explore how components interact with variables and styles to create a robust, flexible design system.

→ Variables can be used within components to create dynamic, easily updatable designs.

→ Styles can be applied to elements within components, combining the reusability of components with the consistency of styles.


Pro Tips for Working with Components

 1. Plan your component structure: Outline your component organization before implementation.
 2. Use descriptive names: Opt for detailed names like "Button/Primary/Large" for clarity.
 3. Leverage variants: Use variants for related components with shared properties but visual or functional differences.
 4. Be selective: Not every element needs to be a component. Focus on frequently reused elements.
 5. Organize your library: Use the Assets panel to create a structured component library.
 6. Document your components: Add descriptions to help your team understand how and when to use specific components.
 7. Utilize instance swapping: This feature allows you to swap one component instance for another, facilitating quick design iterations.
 8. Regular audits: Periodically review and refine your components as your design system evolves.


To conclude Mastering Figma Components

You now have a notion on how to effectively use Figma Components in your design workflow but mastering this skill takes practice and experimentation. Figma components are a powerful tool for creating consistent, efficient, and flexible designs, especially when combined with the Variables and Styles we discussed in previous articles.

In our next article, we'll explore Auto Layout - a powerful feature for creating adaptive designs. We'll look at how Auto Layout can work in conjunction with components to create even more robust and flexible design systems.

Keep designing, innovating, and expanding your skills. We look forward to continuing this journey with you in our next installment!


Here’s what to expect in this series:

 * Variables: Learn how to use Variables to maintain consistency, ensure scalability, and keep your designs organized.
 * Styles: Combine variables into styles for easy property application to an element.
 * Components: Understand how to create reusable design elements to maintain uniformity across your project.
 * Auto Layout: Find out how to create designs that automatically adapt to different screen sizes and how to optimize space usage. Coming up!

By the end of this series, you should have practical knowledge to make your design process and your workflow work for you better.

Design

Designing Complex Interfaces: Part 3 - Using Figma Components for Consistent Design

This article is the second part of the "Designing Complex Interfaces” series, where we explore essential Figma features. The focus is on Figma Styles. Another core building block to a UI Kit or a design system.

Design system Workflow: Variables → Styles → Components →

Let’s continue with the series with the second part of the workflow: Styles.


Understanding Figma Styles

Figma Styles are predefined sets of design attributes (such as colors, text, and effects) that you can apply to elements in your design. They help maintain consistency and streamline the design process by allowing you to reuse the same styling across multiple components.

Benefits:

 * Consistency: Ensures uniformity in design elements throughout your project.
 * Efficiency: Saves time by reusing predefined styles instead of manually setting properties each time.
 * Scalability: Makes it easier to update designs globally. Changing a style updates all instances where it’s applied.
 * Organization: Keeps your design system organized by centralizing style definitions.

Drawbacks:

 * Initial Setup: Requires upfront time to define and document styles.
 * Learning Curve: May require training for team members unfamiliar with design systems.
 * Maintenance: Needs regular updates and management as your design system evolves.

Figma lets you organize your local text, color, and other styles using the "/" naming convention and folder hierarchy. This is easily done just by typing for example “Text/Large”. It makes it easy to navigate and reorganize when needed.

Styles can be grouped by type (Text,Color, Effect, Layout grid).

Local styles are styles that exist in the current file. As opposed to the styles that reside in a specific library, outside of the document.


Example Application: Creating Styles for Title and Paragraph

In this section, we'll walk you through the process of creating and applying styles for typography. Specifically, we'll focus on defining variables for text size and line height for two distinct text elements: a title and a paragraph. We’ll reuse the variables created in the first part about Figma variables.


Step1: Creating Styles for Title and Paragraph


Identify the Text Elements:

The title and the paragraph require different typographic settings.


Define Styles:

 1. Select the Text Element: Click on the text element you want to style (title or paragraph).
 2. Open the Styles Panel: In the right-hand sidebar, find the “Text” section.
 3. Create a New Style: Click the four-dot icon next to the “Text” section and select “Create Style.” (The plus button)
 4. Name the Style: Give it a meaningful name, like “Text/Large” and “Text/Base.”*
 5. Set Typography: Use the already existing variables for font size and line height.

Depending on your needs for styles in your design system you can follow the example and have a complete and easy to maintain design system.

Figma styles are key to creating consistent, efficient design systems. By adding styles to libraries, you create a central source of truth for typography, colors, and effects. This ensures updates spread automatically across all files, maintaining uniformity.

They allow you to quickly use shared elements, saving time and reducing inconsistencies.


Pro Tips for Using Figma Styles

Use a clear naming convention
Adopt a consistent naming system for your styles, e.g., 'Category/Subcategory/Variant'.

Create a style guide
Maintain a dedicated page in your Figma file that showcases all your styles for easy reference.

Utilize color styles for both fill and stroke
Apply color styles to both fills and strokes to ensure consistency across your designs.

Leverage style hierarchies
Use style hierarchies to create variations. For example, create a base text style and then variations for different sizes or weights.

Regularly audit and update styles
Periodically review your styles to ensure they're still relevant and update them as needed.

Use local styles for project-specific elements
For elements unique to a specific project, create local styles instead of adding them to your main library.

Communicate style changes
When updating styles in a team setting, communicate changes to ensure everyone is aware and can update their designs accordingly.

These tips will help you use Figma styles more effectively, leading to more consistent and efficient design workflows.

Further, integrating styles into libraries creates a powerful framework for consistent design across projects. Our future articles will cover best practices for managing Figma libraries as well. Stay tuned and thanks for reading.


Here’s what to expect in this series:

 * Variables: Learn how to use Variables to maintain consistency, ensure scalability, and keep your designs organized.
 * Styles: Combine variables into styles for easy property application to an element.
 * Components: Understand how to create reusable design elements to maintain uniformity across your project.
 * Auto Layout: Find out how to create designs that automatically adapt to different screen sizes and how to optimize space usage. Coming up!

By the end of this series, you should have practical knowledge to make your design process and your workflow work for you better.

Designing Complex Interfaces: Part 2 - Using Styles for Consistent Design

This article is the first part of the "Designing Complex Interfaces” series, where we explore essential Figma features. Our first focus is on Figma Variables. A core building block to a UI Kit or a design system.

💡 Design system Workflow: Variables → Styles → Components → Instances

Let’s start with the first part of the workflow: Variables.


Understanding Figma Variables

Variables store reusable design values like colors, typography, spacing, etc. Their primary benefit is providing a single source of truth (SSoT) that ensures consistency across your designs.

The benefits of using variables include efficiency and speed, reusability, consistency, global updates, and scalability.

There are drawbacks but they are manageable and don’t significantly detract from the overall advantages. Most potential issues can be mitigated with careful planning, proper training, and clear documentation.

Variables are easily managed in the “Variables” panel. Here, you can create, edit, organize, and apply variables to your design components.

To access the Variables panel:

 * Use the menu by going to View → Panel → Toggle Variables, or
 * Click on a the “Local Variables” section in the properties panel when the page is selected.


Example Application: Creating Variables for Title and Paragraph

In this section, we'll walk you through the process of creating and applying variables for typographic properties in Figma. Specifically, we'll focus on defining variables for text size and line height for two distinct text elements: a title and a paragraph.


Step1: Creating Variables for Title and Paragraph


Identify the Text Elements:

We have two text elements: the title and the paragraph. These require different typographic settings.


Define Variables:

We'll create two sets of variables for text size and line height: "Base" and "Large."

Before we dive into creating variables, it's important to understand the concept of design tokens. Design tokens are the basic, reusable elements such as colors, typography, spacing, and more, which define the visual properties of your design system.  In Figma, these design tokens are managed as variables.


Create Text Size Variables

Create Text Size Category:

Add a new category named "TextSize." — Categories help keep your design tokens organized.

Add Variables:
Create two variables within "TextSize":

 * Base: Set the value to 16 for the paragraph text size.
 * Large: Set the value to 24 for the title text size.


Create Line Height Variables:

Tip: If you don’t see the variables panel, make sure you don’t have any elements selected i.e. click on the Page itself until you see this in the properties panel:

Create Line Height Category:
Add a new category named "LineHeight."

Add Variables:
Create two variables within "LineHeight":

 * Base: Set the value to 24 for the paragraph line height.
 * Large: Set the value to 32 for the title line height.


Step 2: Applying the Variables

Choosing the Text Element:

 * Select the text element you want to style. In this case, we'll start with the title.

Set Title Properties:

 * With the title text element selected, apply the Large value from the "TextSize" category to set the font size to 24.
 * Apply the Large value from the "LineHeight" category to set the line height to 32.

Set Paragraph Properties:

 * Now, select the paragraph text element.
 * Apply the Base value from the "TextSize" category to set the font size to 16.
 * Apply the Base value from the "LineHeight” category to set the line height to 24.

By defining these variables, you ensure a consistent typographic structure across your design system. These variables simplify adjusting text properties across multiple elements, enhancing both workflow efficiency and overall design consistency.


Pro Tips for Using Figma Variables

Use descriptive naming conventions
Choose clear, consistent names for your variables. For example, use "TextSize/Large" instead of just "Large" to provide context.

Organize variables into categories
Group related variables into categories like "TextSize", "LineHeight", "Colors", etc. This makes them easier to find and manage.

Use local variables for project-specific elements
For properties unique to a specific project, create local variables instead of adding them to your main variable collection.

Leverage variable modes
Use Figma's variable modes to create different states or themes (e.g., light mode and dark mode) for your design system.

Connect variables to components
Apply variables to your components to ensure consistency. When you update a variable, all connected components will update automatically.

Use variables for spacing and layout
Don't limit variables to just colors and typography. Use them for spacing, border radii, and other layout properties to maintain consistency.

By following these tips, you'll be able to create a more robust and flexible design system using Figma Variables, leading to more consistent and efficient design workflows.

→ Next up — Figma Styles. What variables are made for.


Here’s what to expect in this series:

 * Variables: Learn how to use Variables to maintain consistency, ensure scalability, and keep your designs organized.
 * Styles: Combine variables into styles for easy property application to an element.
 * Components: Understand how to create reusable design elements to maintain uniformity across your project.
 * Auto Layout: Find out how to create designs that automatically adapt to different screen sizes and how to optimize space usage. Coming up!

By the end of this series, you should have practical knowledge to make your design process and your workflow work for you better.

AuthorAndrej Mlinarević

Start a Project