Tokens Studio for Figma Quickstart

Token Studio for Figma QuickStart

Introduction to the Live Stream

• The live stream focuses on "Token Studio for Figma QuickStart," featuring Eric Singartinger, who will guide viewers in creating a design token system in Figma.

• Attendees are encouraged to use the chat for discussions and questions, with a Q&A session planned at the end of the live stream.

• Viewers are reminded to maintain respect and kindness in the chat, as it is a safe space. More information can be found on tokens.studio's code of conduct.

Speaker Introductions

• Mike, the chief evangelist, welcomes attendees and expresses excitement about the packed agenda.

• Eric introduces himself and shares his nervousness about presenting content that will be recorded permanently on YouTube.

Overview of Presentation Content

• Eric shares his screen to present various topics related to design tokens, aiming to address common problems and best practices within a limited time frame.

• The presentation includes a template page that will be shared later for community engagement in Figma.

Background of Eric

• Eric provides a brief personal history, mentioning his early start with computers at age 10 and experience with web design since 1998.

• He discusses his journey through web development technologies like HTML, CSS, JavaScript, PHP, and Flash before moving into startup culture in Berlin.

Importance of Design Tokens

• Design tokens have gained popularity due to their role in modern design systems; tools like Figma have evolved significantly over recent years.

• Features such as multi-user collaboration, asset libraries, auto layout improvements, and component properties enhance user experience in design systems.

Current Challenges with Design Tokens

• Despite advancements in design systems, many components still lack proper tokenization regarding sizes, spacings, colors, and typography.

• The emergence of dark mode requirements has further complicated the implementation of cohesive design systems across platforms.

Understanding Multi-Brand Design Systems

The Complexity of Design Tokens

• The challenge of managing multi-brand design systems is compounded by the sheer number of tokens and themes, making it unmanageable without a structured token system.

Current State of Token Management in Figma

• Figma supports color and typography tokens natively, but the evolution has been slow, with limited updates over the years.

Issues with Existing Token Storage

• Currently, many tokens are embedded within components or stored in outdated tools like Confluence or Zeppelin, leading to a cumbersome and error-prone manual process for maintaining design systems.

Introduction to Token Studio

• Token Studio offers a solution by allowing designers to systemize and tokenize various components such as size, space, dimension, color, border radius, etc., streamlining the management process.

Historical Context of Tokens in Development

• While token usage may seem new to designers, developers have utilized similar concepts for over a decade. Early adopters have contributed significantly to the development of effective token systems.

Exploring Examples of Effective Token Systems

GitHub Primer Example

• GitHub's Primer focuses primarily on colors with basic categories like foreground and background colors; it exemplifies simplicity in token usage.

Pinterest's Naming Concepts

• Pinterest employs an extensive naming convention for its tokens using dash syntax that enhances readability across various categories including font weights and spacing.

Shopify Polaris Documentation

• Shopify Polaris is well-documented and showcases effective taxonomy for UI elements. It serves as an excellent study resource due to its clear organization of color roles and states.

Material 3 Design System Insights

• Material 3 illustrates different levels of tokens: hard-coded values, semantic options (light/dark modes), and component-specific tokens. This structure aids in understanding how naming conventions can vary based on context.

Creating Your Own Design Tokens

Gathering Components for Token Creation

• Start by collecting all your components from existing designs or established design systems like Material 3 or IBM Carbon. This foundational step is crucial for effective tokenization.

Importance of Grouping Components

• Grouping similar components helps reduce the total number of required tokens while enhancing modularity. This practice leads to more efficient design processes overall.

Design Tokens and Usability

Importance of Selectables in Design

• Emphasizes the significance of selectables (buttons, dropdowns, radio buttons) in design tokens as they represent interactive elements.

• Suggests that aligning selectables can enhance user experience by providing clear signals for primary and secondary actions.

Visual Hierarchy and Cognitive Load

• Discusses the concept of visual hierarchy, categorizing form fields as secondary or tertiary selectables to reduce complexity.

• Highlights cognitive load as a key performance indicator (KPI) for usability; lower cognitive load leads to better user retention on sites.

Distinctive Design Elements

• Stresses the need for distinctive colors and font sizes (H1, H2, H3), warning against excessive variations which may complicate design.

• Recommends gathering all components as a preliminary task to streamline design processes.

Collecting Token Sizes

• Introduces the second task: collecting token sizes systematically, noting down dimensions like 2px, 4px, 8px etc.

• Advises against using generic color names like black or white; instead suggests using terms like neutrals for better adaptability across themes.

Analyzing Granularity of Tokens

• Encourages designers to assess spacing and font sizes critically to ensure clarity and consistency in design tokens.

• Suggests using text files for organizing token data due to their flexibility in handling hierarchies and ease of manipulation.

Understanding Token Types in Design Systems

Introduction to Token Creation

• After feeling 80% done with your design, it's time to create tokens using tools like Token Studio. The initial process can be overwhelming due to the tool's power and complexity.

Exploring Token Layers

• There are three main layers of tokens: option tokens, semantic tokens, and component tokens. For example, a primary color could be defined as "romantic blue" with specific HSL values.

Semantic Meaning of Colors

• Each color token has a semantic meaning; for instance, "romantic blue" is used as the primary interaction color on pages where only one major action should exist. This helps maintain focus on key tasks.

Understanding Token Flow

• Token flow provides an overview of how different token types interact within a design system. It includes option tokens (basic color values), semantic tokens (meaningful connections), and component tokens (specific uses like buttons).

Transitioning to Color Modifiers

• With the release of version 1.35, managing button states became easier through color modifiers that streamline the definition of various button states such as enabled or pressed backgrounds and borders.

Defining Option Tokens

Metaphor for Option Tokens

• Option tokens can be likened to a toolbox filled with various tools for different purposes in design systems—each tool serves a unique function based on its context and application needs.

Examples of Option Tokens

• Examples include:

• Color Tokens: Romantic blue 40, Goblin Green 80.

• Spacing Tokens: Space four.

• Size Dimensions: Size 100.

• Border Radius: Core border radius set at 50 for pill shapes.

These examples illustrate the diversity and specificity required in defining option tokens within design systems.

Understanding Design Tokens and Scales

Types of Scales in Design

• The discussion begins with the introduction of different types of scales, including t-shirt sizes for paragraph spacing, emphasizing their utility in design systems.

• Font sizes are presented as an enumerated list from one to nine, showcasing various versions that may not all be necessary for individual projects but provide options.

• A linear scale is explained where font size increases or decreases intuitively; however, it can lead to confusion regarding specific values like "four" without context.

Challenges with Scaling

• The speaker notes that while some scales work linearly (like font sizes), others (like spacing) often operate exponentially, complicating the design process.

• Limited expandability is a concern when using enumerated font sizes; finding intermediate values between defined points can be challenging.

Normalized Font Sizes

• A normalized scale based on 16 pixels (1 REM) is introduced, allowing for easy adjustments by simply changing the base value. This method enhances expandability.

• While this approach offers flexibility for multi-platform designs (e.g., smartwatches and TVs), it lacks intuitive understanding of specific numerical values.

T-Shirt Sizes and Paragraph Spacing

• T-shirt sizes are suggested as a simple way to define line height and paragraph spacing. They provide a non-numerical reference that reduces cognitive load.

• Multipliers are used instead of absolute values for paragraph spacing, ensuring larger fonts have proportionally larger spaces.

Color Ramps and Documentation

• The use of color ramps is discussed, with suggestions for having multiple colors available (11 or more). Opacity considerations are excluded from core tokens due to their straightforward nature.

• Documentation accompanying design tokens includes comments on color values and other properties like border radius and box shadows, aiding clarity in implementation.

Semantic Tokens and Their Importance in Design

Understanding Semantic Tokens

• Semantic tokens provide meaning to core design decisions, such as color and spacing. For instance, "romantic blue 40" serves as a base color while "selectable primary background" indicates its use.

• Examples of semantic tokens include colors like "blood burst 80" for error states and dimensions like "Dimension 100" for icon sizes, which help standardize design elements.

Token Taxonomy

• The taxonomy categorizes tokens into levels: base or component (e.g., button, container), with properties like color, size, and spacing defining their usage.

• Variants within these categories can indicate different states (e.g., primary vs. secondary buttons), enhancing clarity in design specifications.

Naming Conventions for Tokens

• Effective naming conventions are crucial; names should be explicit enough to convey their purpose. For example, avoid vague terms like "background," opting instead for descriptive names that specify the context (e.g., "color foreground success").

• Detailed naming is encouraged; using multiple tokens for different states of a button (enabled, hover) allows for greater customization and extensibility.

Design Considerations

• When defining components like buttons, consider whether they need fixed dimensions or if they can adapt based on content size. This flexibility ensures consistent alignment across various UI elements.

• A flexible approach allows buttons to adjust height based on text size while maintaining visual harmony with surrounding elements.

Conceptual Clarity in Token Usage

• Concepts should guide token naming; avoid using specific HTML tags (like H1-H3), which may vary across breakpoints. Instead, use abstract terms that maintain consistency regardless of context.

• Good examples of semantic-level component names include “primary,” “secondary,” and state indicators like “success” or “error.” These enhance understanding among developers regarding the intended use of each token.

Practical Application of Tokens

• In practice, semantic sizes are categorized into small, medium, and large for selectables. For icons specifically designed sizes ensure uniformity across UI components.

Designing UI Components and Tokens

Understanding Layout and Breakpoints

• The discussion begins with the arrangement of icons and text, emphasizing the importance of stacking elements effectively.

• Web breakpoints are introduced as critical widths for responsive design, while page insets refer to margins, and gutters relate to spacing within containers.

Color Schemes in Design

• Various color options are presented: foreground colors include default, weak, clear, and cloudy shades (gray tones).

• The speaker acknowledges that while the design may not be visually stunning, it serves as a comprehensive example for experimentation.

Button Design Principles

• Buttons are categorized into primary and secondary types; the primary brand color does not always equate to an effective interaction color.

• An example is given using Coca-Cola's red as a primary color but suggests a mint alternative for better user interaction.

Component States and Modifiers

• The concept of button states (selected vs. unselected) is discussed alongside background hover effects.

• Secondary buttons utilize color modifiers based on component states; primary buttons rely on two main colors for their design.

Typography and Semantic Tokens

• Font families are outlined with specific weights for titles and body text; H1-H6 sizes are mentioned along with semantic naming conventions.

• Paragraph spacing is addressed, highlighting the importance of consistent typography across components.

Component Tokens Overview

• A focus on component tokens reveals how they define colors for various UI elements like buttons and text fields.

• Detailed examples illustrate how developers can benefit from precise definitions in component tokens.

Advancements in Color Models

• Introduction of LCH color modifiers allows for reduced token numbers while maintaining contrast ratios.

• The advantages of LCH over traditional models include broader color scales and stable contrast ratios across designs.

Best Practices for Developer Handoff

• Emphasis is placed on keeping semantic tokens clean to facilitate easier developer handoff; communication with developers about preferences is encouraged.

Color Modifiers and Design Tokens

Overview of Color Modifiers

• The design system defines three colors for background, border, and foreground states (selected/unselected). Color transformations are managed within the component.

• Changes to button colors automatically update the component tokens, ensuring a cohesive design. The speaker avoids using lighten/darken methods due to instability across light and dark modes.

Mixing Colors for Stability

• In light mode, a darker watercolor is achieved by mixing with the default black foreground color; in dark mode, it mixes with white for a lighter effect.

• This method creates stable tokens that adapt well between different themes without compromising visual integrity.

Special Button Rendering Techniques

• The speaker demonstrates rendering options not just to the page but also to specific selections, allowing for efficient updates across components.

• By applying changes selectively (e.g., changing an error state to success), designers can minimize token usage while maintaining flexibility in design adjustments.

Scaling and Contrast Adjustments

• Adjustments such as increasing size and roundness of buttons can be made through single tokens. For instance, scaling dimensions doubles their size effectively.

• High contrast modes enhance visibility on form fields and buttons by modifying color contrasts dynamically based on user settings.

Multi-brand Themes and Device Sets

Understanding Theme Management

• Managing multiple brands or themes can initially seem overwhelming but becomes intuitive with practice. Different themes are organized into semantic token sets tailored for various devices.

• Examples include distinct themes for web light/dark interfaces or applications like TV and watch apps, each requiring its own token set.

Functionality of Theme Switcher

• The theme switcher allows users to toggle between different designs quickly; however, it primarily activates specific settings rather than altering overall themes directly.

• When switching themes (e.g., from light to dark), elements with identical names will override previous settings based on their hierarchy in the design structure.

Token Organization Strategy

• A structured approach involves layering option tokens at the top followed by semantic tokens for various brands. This organization aids in managing modifiers like font sizes or styles efficiently.

• The application of brand-specific designs is demonstrated as the speaker switches back to presentation mode after applying brand light settings.

Design System Insights and Best Practices

Hierarchy and Naming Conventions

• Discusses the overwhelming nature of hierarchy in design, particularly regarding button states. Suggests using Dash syntax for better readability despite longer names.

Style Creation and Management

• Advises experimenting with templates without creating styles initially to avoid issues with selection application. Mentions common problems discussed in forums like Stack Channel or Token Studio.

Design System Structure

• Emphasizes the importance of themes that create frequent style references within a design system library. Highlights the need for Figma files to reference typography and styles effectively.

Team Roles and Tool Utilization

• Recommends evaluating who in the design team truly needs access to Token Studio Pro versus free versions, as not all designers require advanced features.

Component Development Strategy

• Encourages starting with text components until there is clarity on all tokens before creating option tokens with appropriate naming conventions and scopes.

Q&A Session: Addressing Common Design Challenges

Light and Dark Mode Themes

• Responding to a question about managing light and dark mode themes, suggests having separate design system files based on team size for organization.

Creating Tokens Across Platforms

• Discusses connecting web design systems with native mobile systems (Material + Flutter), recommending tools like Token Transformer for token syntax creation while maintaining semantic levels.

Visual Changes in Native Designs

• Notes potential visual changes when adapting designs for native platforms, emphasizing the use of style dictionaries for configuration management.

Component Level Tokens Importance

• Advocates always using component-level tokens, especially when introducing interactive states, while cautioning against making them overly specific to maintain semantic integrity.

Design Tokens and Component Management

Semantic Naming in Design Components

• Emphasizes the importance of using semantic naming for design components, suggesting that each page should have one primary action to maintain a clear user journey.

• Discusses the need for distinct component names based on their visual states (e.g., hover, press, focus), rather than solely relying on semantic names.

The Role of Component Tokens

• Highlights the utility of component tokens in engineering, noting that refactoring these tokens can streamline updates across multiple components.

• Explains how integrating component tokens allows for easier updates without extensive engineering effort when changes are made.

Tokenization Techniques

• Introduces the concept of tokenizing gradients and angles within design systems, emphasizing organization by type in JSON files.

• Describes how changing angle values can dynamically alter gradient appearances, showcasing practical applications of tokenization.

Text Hierarchy and Documentation

• Addresses text hierarchy management using t-shirt sizes instead of traditional HTML tags (H1, H2, H3), advocating for a translation layer for developers.

• Suggests that while H1 is essential for SEO and structure, size should be independent from tag types to allow flexibility in design.

Atomic Design Methodology

• Confirms that atomic design principles can effectively group components into categories like atoms (individual components), molecules (combinations), and organisms (larger structures).

Managing Tokens with Tailwind CSS

• Discusses strategies for managing base tokens alongside utility classes in Tailwind CSS while maintaining semantic abstraction.

Best Practices for Using Tailwind and Token Studio

Engaging with Developers

• It's important to have discussions with developers when using frameworks like Tailwind, as it may take time to determine the best workflow.

• Many users in the community successfully combine Tailwind with Token Studio; engaging on platforms like Slack can provide valuable insights from experienced users.

Responsive Dimension Tokens

• The speaker discusses two methods for handling responsive dimension tokens: switching between sets with identical names or overriding specific tokens.

• For different device breakpoints (smartphone, tablet, desktop), most components remain consistent, suggesting that not many tokens need to be overridden.

• While font sizes might change across devices, flexible layouts often maintain similar designs across various screen sizes.

Community Resources

• Marco Cran from the community is working on a design system project involving various sizes and breakpoints; his upcoming presentation will be recorded and shared in Slack.

Single vs. Multi-file Token Management

• The discussion highlights that having a single file for tokens is generally recommended for simplicity but multi-file setups can be beneficial depending on team size and project complexity.

• Multi-file setups help avoid merge conflicts when multiple contributors are working on token files simultaneously.

• Organizing tokens into folders makes it easier for engineers to locate them within the plugin interface.

Time Considerations for Populating Token Studio

• The time required to populate Token Studio varies based on file size; smaller files populate quickly while theme switching may take longer.

• The speaker notes that populating an entire file with all tokens could take up to a minute or more, especially in multi-brand setups.

Creating Token Structures in Design Systems

Overview of Token Creation

• The speaker discusses the process of creating token structures, emphasizing that having a well-defined text file is crucial for success.

• Some tokens were created using tools like Super Palette, while others were copied from JSON files into code editors for efficiency.

• The speaker notes that incorporating various techniques and variants significantly extended the time required to create these tokens.

Brand Tokens vs. Semantic Tokens

• A question arises about whether brand tokens should be categorized as semantic tokens in a multi-brand design system.

• The speaker explains that if only one brand is involved, brand tokens can be included in core; however, for multi-brand systems, they should reside within semantic tokens.

• The order of token overrides may need adjustment based on component-level changes, allowing flexibility in managing token priorities.

Using Figma Styles and Plugins

Setting Up Token Styles

• A question is posed regarding whether to use plugins or native Figma styles for setting up token styles.

• The speaker clarifies that starting from scratch does not require creating styles; instead, it focuses on ensuring designers are aware of existing styles or colors.

• New features in version 1.35 enhance support for viewing styles alongside tokens during inspection.

Managing Font Sizes in Multi-brand Environments

Core Token Level Considerations

• Discussion centers around how font sizes can function effectively within a multi-brand environment.

• It’s suggested that core token levels should define a range of font sizes applicable across all brands and devices.

Syncing Tokens with Platforms

Integration with Style Dictionary

• A query about syncing design tokens to iOS and Android platforms leads to an explanation involving style dictionaries.

• To sync tokens effectively, they must first be integrated into repositories like GitHub before being transformed by style dictionaries for specific platform outputs.

Organizing Tokens by Folders

Current Limitations

• A question arises about organizing tokens by folders without including folder names in actual token names; currently, this feature is not available.

Token Naming and Organization in Design Systems

Token Name Structure

• The token name is integral to its identity; creating folders for organization without including them in the token name requires a custom transform.

• It is generally discouraged to remove parts of the token name for organizational purposes, as a solid naming structure is preferred.

Color Palette Creation

• When creating color palettes from 100 to 900, using LCH (Lightness, Chroma, Hue) can provide more granular control over shades.

• Once LCH becomes available in Figma, it will enhance design capabilities; currently, it's accessible in Token Studio which allows predictable contrast ratios.

• Designers can define a hue and create dynamic ramps with saturation and light values directly within Token Studio.

Managing Tokens Across Teams

• A practical example of updating tokens involves having a design system file where tokens are applied before publishing libraries for use by team members.

• On the consumer side, activating libraries provides access to color styles and typography; this process can be complex but essential for collaboration.

Component Creation in Figma

• Creating components like submenus in the Figma Tokens plugin can be achieved by using forward slashes when naming sets, which also organizes files into folders.

Token Strategy: Large vs. Small Base

• Starting with a comprehensive set of tokens is recommended; dimension tokens should cover a range from small sizes up to larger dimensions suitable for various applications.

• It's important that token scopes fit specific project needs—considering different contexts such as mobile apps or large displays ensures versatility.

Conclusion and Community Engagement

Closing Remarks

• The session concludes with an invitation for further questions on Slack; participants are encouraged to engage with the community post-live stream.

• Resources such as shared Figma files will be made available for experimentation within the community.