Week 10/11 - Design Systems

Learning Objectives

By the end of these weeks, students will be able to:

• Understand the key elements of a design system, both tangible (components, patterns, style guides) and intangible (guidelines, brand values, design mindset).
• Maintain a well-organized design system using clear hierarchy, consistent naming conventions, and version control.
• Learn color theory, the 60-30-10 rule, and guidelines for creating effective color palettes, including interactive and denotative colors.
• Gain insights into typography's importance in readability, mood setting, and brand identity, with best practices for typeface selection, styling, and scalability.
• Select, create, and manage icon components and styles in Figma, focusing on clarity, consistency, and usability.
• Understand and utilize Figma components, their benefits, and how to create, edit, and organize them.
• Apply nesting components to create complex UI elements and manage local styles for consistency and scalability in design projects.

Design Systems

A design system is a collection of reusable components and standards used to maintain consistency across a range of products. It acts as a single source of truth for a team, guiding the design of products with a singular design language.

What Are the Elements of a Design System?

A design system consists of both tangible and intangible elements. Components, patterns, and style guides are tangible elements.

• Components are functional elements of a user interface – buttons, input fields, text labels, etc.
• Patterns are individual functional elements that all serve the same purpose organized into groups–sign-in forms, menus, etc.
• A style guide is a set of visual design decisions such as which colors, typography, iconography to use, as well as guidelines for using decorative elements such as whitespace and shadows.

Guidelines, brand values, and design mindset, on the other hand, are intangible elements:

• Guidelines are sets of rules that allow a team to design consistent and coherent experiences made up of components, patterns, and visual styles.
• Brand values, which naturally include a brand legend and brand mission, are a set of guiding principles that shape every aspect of your design.
• A design mindset is your philosophy of design that aligns a team around a clear set of goals.

What Are the Qualities of a Well-Functioning Design System?

Design systems differ based on an organization’s need, but all well-functioning design systems share similar characteristics:

• Easily adopted: Well-functioning design systems fit easily into the existing culture of your team, becoming a natural part of the design process.
• Consistent: All components of the design system should consistently and naturally work together.
• Flexible: Consistency is important, but well-functioning design systems leave room for team members to contribute in new ways.
• Documented: Documentation is one of the most important components of a well-functioning design system. Documentation should be detailed and regularly updated.
• Reusable: Design systems should be able to be reused and repurposed in a variety of situations.

Organizing a Design System

Maintaining a well-organized design system is crucial for clarity, efficiency, and collaboration. Here are some tips:

1. Clear Hierarchy: Categorize components, patterns, and styles logically.
2. Naming Conventions: Use consistent names for components and styles.
3. Version Control: Track changes and updates in your design system.

Utilizing Colors in UI Design

Color is a pivotal element in design, shaping user perception and bolstering brand identity. Effective color palettes are instrumental in crafting visually captivating and meaningful designs.

Color Theory

Color theory today is primarily based on Isaac Newton's colour wheel, which he established in 1666. The main colour wheel illustrates three colour categories: primary colours, secondary colours, and tertiary colours. Let’s understand it...

Primary colors are those that cannot be produced by mixing two or more other colors. Red, blue, and yellow are the main colors.

The secondary colors are orange, purple, and green, which may be created by mixing any two of the three basic colors.

Tertiary colors are created when you combine a main and a secondary color. Magenta, vermillion, violet, teal, amber, and chartreuse are the tertiary hues.

The 60-30-10 Color Rule

A popular approach to achieving color balance is the 60-30-10 rule, often associated with the notion of a Golden Ratio in design. This rule suggests that:

• A neutral color for 60% of your design
• A secondary brand color for 30%
• 10% in your UI design should be your main brand color

Effective UI design leverages this rule to achieve an impeccable color coordination, enhancing the user's interaction with the design.

Example of 60-30-10 Color Rule in a Mobile App

Dominant Color (60%) - Light Lavender:

• Usage: Ideal for backgrounds and large UI elements. This light lavender (#F4F5FD) offers a clean, calming, and modern backdrop that's easy on the eyes.
• Hex Code: #F4F5FD

Secondary Color (30%) - Deep Slate:

• Usage: For text, headers, footers, and less prominent buttons. Deep slate (#384258) provides a strong contrast against the light lavender, adding depth and sophistication to the design.
• Hex Code: #384258

Accent Color (10%) - Vibrant Purple:

• Usage: For call-to-action buttons, highlights, and key interactive elements. Vibrant purple (#7366F0) stands out against both the light lavender and deep slate, drawing attention to important actions and features.
• Hex Code: #7366F0

Application in UI Elements:

• Backgrounds and Large Areas: Light Lavender (#F4F5FD)
• Text and Secondary Elements: Deep Slate (#384258)
• Interactive Elements and Highlights: Vibrant Purple (#7366F0)

Employing Interactive Colors

Interactive colors are indispensable for highlighting interactive UI elements such as links, buttons, and other controls. Here are some guidelines:

• Assign a specific hue to primary interactions, allowing users to associate that color with certain actions.
• Create dark and light variants of the interactive color to indicate different states (e.g., hovered, clicked).

Understanding Denotative Colors

Denotative colors carry inherent meanings and are crucial for signaling different states in your app or website, like error, success, or warning. Commonly, red, black, and green are utilized for these purposes.

For instance, if red is a brand color, avoid using it for error messages. Ensure that colors chosen for disabled states have adequate contrast for legibility.

Guidelines for Crafting a Color Palette:

Constructing a set of rules for your color palette can bolster consistency and coherence across your design projects. Here are some fundamental guidelines:

1. Restricted Color Palette: Maintain a restricted color palette to preserve a sleek and professional demeanor.
2. Color Harmony: Ensure your colors resonate well with each other, fostering a visually satisfying experience.
3. Consistent Application: Apply colors consistently for specific elements or actions to enhance user recognition and comprehension.
4. Accessibility: Make judicious color choices to cater to all users, including those with visual impairments.

Mastering Typography in UI Design

Typography in UI design isn't just about choosing appealing fonts; it's a pivotal visual communication tool that can significantly enhance user engagement and conversions. Unlike a meticulous reading, users often scan a page to quickly ascertain if the information they need is present. Here, well-organized and scannable typography can capture and hold the users' attention.

Once engaged, clear and informative typographic design is crucial for providing precise information about the products or services offered, nudging the users toward making a purchase.

The importance of typography in UI design is indispensable and should never be overlooked.

The Benefits of Good Typography

Beyond being a medium of visual communication, good typography in website or mobile app design offers numerous advantages:

1. Enhanced Readability and Accessibility: Good typography facilitates easier reading, scanning, and navigation across the page, thereby reducing the time users take to find the information they need.
2. Consistent Tone and Mood: The choice of typeface sets the general tone or atmosphere across interfaces. For instance, a cartoon font with warm colors and bold strokes adds a fun, personalized touch, whereas a simple and serious typography sets a more formal tone.
3. Distinctive UI Identity: Like other elements in UI design, high-quality typography has a professional allure and aligns with the brand's vision, color, and concept, helping your UI stand out from the crowd.
4. Boosted Product Sales: Effective typographic design keeps users on your UI longer and facilitates easy access to necessary information, indirectly boosting sales by reducing user distractions.

Styling Typography to Suit Your Purpose

Bold and Italic:

• Common typographic styles like italic and bold help emphasize text. Bold is great for headlines and crucial text areas, while italics are often used for foreign words or reference links.

Typeface Families:

• Some typefaces offer a range of styles. For example, Futura has 22 different styles including light, condensed, semi-bold, and extra bold, providing versatile options for different design needs.

Novelty Styles:

• Novelty styles add a unique flair but should be used sparingly to avoid overwhelming the design.

Crafting an Effective Typography Design

With a grasp of typography types and manipulations, here are 10 best practices to achieve compelling typography design:

1. Choosing Typefaces: Selecting the right typefaces is fundamental. Choose a typeface that aligns with your brand's personality and the overall design aesthetics of your UI. It's often advisable to pair a serif and a sans-serif typeface to create a balanced look.
2. Selecting Font-Weight and Styles: The weight and style of the font can significantly impact the look and feel of your design. Bold weights are excellent for headlines, while regular or light weights are suitable for body text. Experiment with different styles to find what works best for your design.
3. Mind the Spacing: Adequate spacing between letters, words, and lines improves readability and aesthetics. Use kerning, tracking, and leading effectively to achieve a well-spaced typography design.
4. Establish a Clear Visual Hierarchy: Visual hierarchy guides the reader's eye and helps them navigate the content easily. Create a clear hierarchy using different font sizes, weights, and colors for headings, subheadings, and body text.
5. Ensure Scalability: Your typography should remain effective and legible across various screen sizes and resolutions. Use scalable units like ems or rems for font sizes to ensure a responsive design.
6. Utilize Visual Contrast Judiciously: Contrast helps in distinguishing text and improves readability. Ensure there's enough contrast between your text and background, but avoid overly harsh contrasts as they can be straining to the eyes.
7. Keep Text Simple and Concise: Clear and straightforward text is key to effective communication. Avoid jargon and keep your sentences short and to the point.
8. Maintain Consistency: Consistency in typography creates a cohesive look and improves the user experience. Stick to a defined set of typefaces and styles throughout your design.
9. Animate Your Copy Wisely: Animation can add a dynamic flair to your typography, but it should be used sparingly. Ensure animations enhance rather than distract from your message.
10. Prototyping and Testing: Before finalizing your typography design, prototype and test it with real users to gather feedback. Testing helps in understanding how your typography performs across different devices and under various use cases, allowing you to make necessary adjustments for an optimal user experience.

Iconography

Icons play a pivotal role in UI design, serving as visual cues that convey information quickly and efficiently to users. In Figma, designers have access to a powerful set of tools and resources, making it possible to create, manage, and implement iconography effectively. With Figma's versatile platform, you can ensure that your app's icons are not only visually appealing but also provide clear and intuitive guidance to users, enhancing their overall experience.

Selecting the right icons for your UI design is crucial for effective communication and user experience. When choosing icons, consider the following factors:

• Clarity and Relevance: Icons should be chosen based on their clarity and relevance to the app's functions or actions. They need to provide an immediate and clear understanding to users.
• Consistency: Maintain consistency in your iconography to create a cohesive visual language across your mobile app. Consistent icons contribute to a more user-friendly experience.
• Universal Understanding: Opt for icons that are universally understood to minimize the need for additional explanations. Icons should transcend language barriers and be recognizable to a broad audience.
• Cultural Considerations: Be aware of cultural preferences and interpretations. Icons may have different meanings in various regions or demographics. Ensure your choices are culturally appropriate.
• Customization in Figma: Figma offers a broad library of icons that you can browse and search through. It also provides tools for customizing and adapting icons to match your design's specific needs.

Creating Icon Components in Figma

Creating icon components in Figma is a crucial skill for UI/UX designers. It allows for the efficient use and reuse of icons across different designs, ensuring consistency and saving time. Here's a step-by-step guide to creating icon components in Figma:

Step 1: Prepare Your Icons

1. Design or Import Icons: Start by designing your icons in Figma or importing them from other sources. Ensure they are vector graphics for scalability and editing flexibility.
2. Standardize Sizes: Make sure all icons are of a consistent size. Common sizes are 24x24 or 32x32 pixels, but this can vary based on your design system.
3. Optimize for Pixel-Perfect Rendering: Align your icons to the pixel grid to avoid blurry edges. This is particularly important for small-sized icons.

Read more about icon grid here (opens new window)

Step 2: Create Components

1. Select an Icon: Click on the icon you want to turn into a component.
2. Create the Component: Use the keyboard shortcut Cmd + Alt + K (Mac) or Ctrl + Alt + K (Windows) to create a component. Alternatively, you can right-click on the icon and select 'Create Component'.
3. Name Your Component: Give your component a clear and descriptive name. This is crucial for finding and organizing your components later.

Step 3: Organize Components

1. Apply Consistent Naming: Use a consistent naming convention for your components, like Icons/Navigation/Back or Icons/Social/Facebook.
2. Individual Components or Variants: Decide whether to use individual components for each icon or a single component with multiple variants. Variants can be useful for icons that share a similar structure but differ in minor ways, such as arrows pointing in different directions or buttons with different states.

Step 4: Use and Edit Components

1. Drag and Drop to Use: To use an icon component in your design, simply drag it from the 'Assets' panel into your canvas.
2. Override Properties: You can override certain properties of an icon component (like color) in its instance without affecting the main component.
3. Detach Instance: If you need to make significant changes to an icon for a specific use case, you can detach it from the component (Right-click > Detach Instance). Remember, this means any updates to the main component won’t reflect in this detached instance.

Creating icon components in Figma not only streamlines your design process but also ensures consistency across your projects, making it an essential skill for efficient and effective UI/UX design.

Styles in Figma

Styles are reusable collections of properties that help maintain consistency in design.

Style Types:

1. Text Styles: Define text styles for headings, body text, and other text elements. Apply these styles consistently to maintain a uniform look.
2. Color Styles: Create color styles for primary and secondary colors. These styles ensure that your design adheres to your chosen color palette.
3. Grid Styles: Set up grid styles for layouts, columns, and spacing. This helps maintain alignment and consistency in your design.
4. Effect Styles: Customize shadows, blurs, and other effects as styles. Apply these effects easily to elements for a cohesive design.

Introduction to Components in Figma

Components in Figma are powerful, reusable design elements that serve as the foundational building blocks of design systems, enabling designers to create consistent and efficient designs across multiple projects. With a modular approach to designing interfaces, components can be utilized within the same project multiple times or across different projects. Once a master component is created, its instances can be placed anywhere within a design. Crucially, any updates made to the master component are automatically reflected across all its instances, ensuring uniformity and consistency throughout your design work. This is especially beneficial for frequently used elements such as buttons, icons, headers, and footers, allowing for their seamless integration across different screens or projects.

Benefits of Components

• Consistency: Components ensure that your design elements remain uniform across your project, which is crucial for maintaining a cohesive look and feel.
• Efficiency: They significantly reduce the time and effort required to make global updates. Changing a single component updates all instances where that component is used.
• Reusability: Once a component is created, it can be reused in any number of designs, saving time and fostering a modular design approach.
• Scalability: Components make it easier to scale your designs. As projects grow, components can be easily managed and updated, ensuring that large projects remain manageable.

Difference Between Components and Frames

While both components and frames are essential elements within Figma, they serve different purposes and have distinct characteristics:

• Frames: Frames are containers that can hold other objects, including shapes, text, and even other frames. They are used to structure the layout of your design, such as creating the canvas for a webpage or defining the boundaries of a mobile app screen. Frames can also be nested within each other to create complex layouts.
• Components: Unlike frames, components are defined by their reusability and the ability to ensure consistency across designs. Components can contain frames, but they come with the added benefit of being instances that are linked back to a master component. This linkage allows for the central management of design elements, where changes to the master component are reflected across all instances.

Creating and Editing Components

Creating Component Variants

Creating Components Like a Developer

In our previous discussions on Auto-layout, we drew parallels between Figma's Auto-layout feature and the flexbox property in CSS, illustrating how Figma's design capabilities can mirror web development practices. This analogy extends beyond Auto-layout into other facets of component creation in Figma.

Take the example of implementing a hover effect on a card that triggers the display of a new element. In web development, this effect is usually achieved by incorporating the element in the initial markup but keeping it hidden with CSS until the user hovers over the card. We apply a similar strategy when creating components in Figma. The base component is designed to include the hover state's elements from the start. These elements are then visually hidden or made inactive in the default variant and are only revealed or activated in the hover state variant. This approach not only streamlines the design process but also aligns closely with the logic and practices used in front-end development, facilitating a more cohesive workflow between design and development teams.

Nesting Components

Nesting components in Figma is a technique that involves placing one component inside another. This approach is instrumental in building more complex and dynamic design systems, allowing designers to create detailed and highly customizable interfaces. By mastering nested components, designers can significantly enhance their workflow efficiency and design consistency.

Benefits of Nesting Components

• Modularity: Nesting components promotes a modular design approach, making it easier to assemble, disassemble, and reconfigure parts of your design.
• Scalability: It allows your design system to grow more seamlessly. As new components are needed, they can be created by combining existing ones, saving time and effort.
• Efficiency: Updates to base components automatically propagate to all instances where they are nested, streamlining the process of making global changes.
• Consistency: Ensures design consistency across projects by reusing components, reducing the risk of discrepancies.

How to Create and Manage Nested Components

1. Start Simple: Begin by creating your base components. These are the smallest, most atomic parts of your design (e.g., icons, buttons).
2. Combine Components: To create a nested component, drag an existing component into another component. Figma automatically recognizes this as nesting.
3. Use Variants: Leverage variants to manage different states or types of nested components, keeping them organized and accessible.
4. Organize and Document: Use Figma’s naming conventions and team libraries to organize your nested components. Documentation helps your team understand how and when to use each component.
5. Review and Refine: Regularly review your nested components to ensure they remain efficient and effective. Simplify or decompose them as needed.

Libraries for UI in Figma

Figma libraries are especially useful for UI design as they allow for the consistent application of design patterns across different screens and projects.

Engaging with the Figma Community for UI Inspiration

The Figma Community is a rich resource for UI designers, offering access to a wide range of UI design templates and UI kits.

Benefits of the Figma Community for UI Designers:

1. UI Templates: Find and use templates specifically created for UI designs.
2. Learning from Experts: Follow leading UI designers to learn from their designs and workflows.
3. Sharing and Feedback: Share your UI designs to get feedback and suggestions from the community.

By focusing on these aspects, you can effectively use Figma to create, manage, and share UI design components and assets, ensuring a consistent and user-friendly experience.