Build Design Tokens & Figma Variables with AI

How to Vibe Code Figma Variables for Light and Dark Modes

Introduction to Vibe Coding with Figma

• The video focuses on coding Figma variables suitable for both light and dark modes, as well as desktop and mobile formats.

• The presenter encourages viewers to check out the UI Collective Academy for courses on design systems, vibe coding, AI in design, etc.

• A fundamental understanding of design tokens is recommended but not mandatory; links will be provided for those unfamiliar with the concept.

Design Token Architecture

• The approach discussed involves a three-tiered architecture: brand collection, alias collection, and mapped collection.

• Viewers can also opt for a two-tiered approach (primitive and semantic), allowing flexibility in how they structure their design tokens.

• Emphasis is placed on customizing rules according to individual design system needs.

Video Structure Overview

• The video will cover connecting Cursor to Figma via MCP (Managed Cloud Platform), building rules for AI token generation, and importing generated tokens into Figma using Token Studio.

• The presenter notes that the workflow will involve orchestrating various rules rather than simply asking the AI to create tokens.

Setting Up Cursor with Figma

• Instructions are given on downloading Cursor from cursor.com and creating an account before connecting it to Figma MCP.

• After adding MCP to Cursor, users must authenticate their connection through a browser window that opens during setup.

Utilizing Color Scales in Design Tokens

• Connecting Figma MCP allows users to upload color scales from a Figma frame so that AI can analyze them based on predefined rules.

• It’s highlighted that design tokens should not be confined within one collection; instead, they should be organized across multiple collections like brand or alias collections.

Understanding Design Collections

Overview of Collections

• The discussion introduces a two-tiered approach to collections: primitive collection and semantic collection, aimed at building design rules.

• A completed design system will be referenced for context, but it is not necessary to have one to follow along; the focus will be on high-level rule creation.

Types of Collections

• Three main collections are discussed: brand collection, alias collection, and mapped collection. A responsive collection will also be introduced later.

• The brand collection consists of raw color scales (e.g., purples, reds, greens) without any assigned meanings; it serves as the foundation for the design system.

Brand Collection Insights

• The brand collection is likened to the roots of a tree; a strong foundation is crucial for a successful design token system.

• The alias collection assigns semantic meanings to colors (e.g., red for errors, green for success), building upon the brand's raw color scales.

Alias Collection Details

• In the alias collection, specific roles are assigned based on color meaning without yet applying them to components; this step prepares for further development.

Mapped Collection Functionality

• The mapped collection branches out into various use cases for components and includes considerations for light mode and dark mode designs.

• This section covers different roles such as surface colors and text colors that are essential in component design.

Building Responsive Collections

• A responsive collection will address type scales suitable for both desktop and mobile platforms; more details will follow later in the discussion.

Best Practices in Rule Creation

• Emphasis is placed on informing AI with detailed input when creating rules; structured organization leads to better outcomes in variable definitions.

• It’s advised to categorize rules clearly (e.g., purpose, color rules), ensuring clarity when working with AI tools during rule creation.

Final Thoughts on Token Development

• While quick examples may lead to unnecessary variables or tokens, taking time during personal refinement can yield better results.

Design System Setup: Building Brand and Alias Collections

Introduction to Design System Rules

• The speaker encourages users to provide ample information for AI use cases and suggests watching a design system setup video for context.

• Acknowledges the challenge of recording while thinking about content, emphasizing a collaborative approach to building rules.

Brand Collection Overview

• Focus shifts to the brand collection, specifically colors, with plans to revisit font styles later.

• The purpose of the brand collection is defined as containing raw hex codes without implying UI usage or component roles.

Color Structure and Rules

• Colors are stored as pure hex values with no semantic meaning; they are grouped by hue rather than function (e.g., success or error).

• Scale structure explained: colors follow a 100 to 1200 scale where lower numbers represent lighter shades. Intermediate values can be added for accessibility.

Detailed Scale Instructions

• Increments in color scales include default increments of 100, with additional increments of 50 and 25 for further refinement when necessary.

• White and black colors are categorized separately within their own group.

Transitioning to Alias Collection

• The alias collection's purpose is introduced: it translates raw brand colors into semantic meanings, being the only layer allowed to assign intent at a group level.

• Alias tokens must reference brand tokens, ensuring connectivity within design tokens so that changes in the brand collection automatically update related alias collections.

Conclusion on Color Rules

• The discussion transitions into color rules within the alias collection, setting up for further exploration of how these connections work in practice.

Understanding Brand Scales and Modes

Defining Primary Colors and Information

• The primary color is defined as "blue," which serves as the base for information representation.

• Additional colors are assigned: success is "green," error is "red," warning is "orange," neutral light is "slate," and neutral dark is "gray."

• The foundational colors include white and black, emphasizing the importance of clarity in defining these scales for AI understanding.

Optional Scales in Branding

• Not all brands require secondary or tertiary color scales; some may only utilize a primary scale.

• If brand scales exceed needs, it's crucial to pause and ask users which scales should be aliased instead of making assumptions.

Managing Multiple Brands with Modes

• Alias modes are necessary when multiple brands exist within a design system, such as Coca-Cola's various products.

• Single-brand systems do not utilize multi-pull modes; additional modes need user confirmation before implementation.

Mapped Collection Rules

• Building rules around mapped collections can be complex; understanding token types is essential for effective rule creation.

• Mapped tokens are the only components that can consume specific categories like surface, text, icon, and border.

Semantic Definitions in Design Tokens

• Semantics across different categories include primary, secondary, disabled, error, success, information, and warning states.

• Each map token defines both light and dark values to ensure accessibility standards are met for text and icons.

Text Design and Responsive Collections

Overview of Text Tokens and Color Values

• Discussion on reducing contrast while maintaining legibility, focusing on the reuse of semantic colors for various text tokens such as headings, hero, body, placeholders, and captions.

• Emphasis on defining color values specifically for text types at the "on color" level to ensure clarity in design.

Building a Responsive Collection

• Introduction to creating a responsive collection that accommodates both desktop and mobile formats with a focus on typography.

• Identification of necessary elements for the responsive collection including text size, line height, paragraph spacing for different heading levels (H1-H6), large/medium/small paragraphs, and captions.

Accessibility Considerations

• Highlighting accessibility constraints where base paragraph sizes should be 16px or above to ensure readability for all users.

Brand Collection Integration

• Explanation of how type styles are housed within the brand collection alongside font styles and weights defined as string variables.

• Mention of alias collections if multiple brands require distinct font styles or weights.

Implementation Process

• Description of the process to create formatted rules based on cursor rules for an MBC file; includes copying code from previous outputs into new projects.

• Steps outlined for setting up project-specific rules in cursor settings to manage brand collections effectively.

Finalizing Outputs with AI Assistance

• Acknowledgment that outputs may vary based on user input; emphasizes the importance of detailed prompts when using AI tools like ChatGPT.

• Focus on refining typography within the responsive collection by ensuring consistent font choices across headings and paragraphs.

Design Token Generation Process

Establishing Consumption Rules

• Emphasizes the importance of avoiding hardcoded components in design systems, advocating for the use of variables to maintain consistency in typography and behavior.

• Suggests using a single font (Enter) across all headings and paragraphs to ensure uniformity, while noting that rules may require auditing and tweaking over time.

Utilizing AI for Design Tokens

• Discusses how designers often prompt AI tools like Cursor to generate simple design tokens but warns that this approach may not yield optimal results without proper structuring.

• Highlights the need for careful consideration of the order in which collections (alias, mapped) are built when generating design tokens through AI.

Command Structure for Token Generation

• Recommends creating reusable commands within AI tools to streamline the token generation process, acknowledging that initial outputs may require multiple iterations for refinement.

• Introduces a project command called "token generation command" aimed at building a comprehensive design token system based on provided inputs.

Steps to Generate Design Tokens

• Outlines steps necessary for generating a complete design token system, starting with understanding color scales and asking clarifying questions as needed.

• Details specific tasks such as generating brand collections from raw scales and mapping brand colors to semantic roles (e.g., error, success).

Finalizing Design Tokens Output

• Lists additional steps including generating responsive typography tokens and ensuring no direct references from mapped tokens back to brand values.

• Concludes with instructions on outputting a JSON file compatible with Token Studio, noting limitations of Figma's import feature regarding multi-collection connections.

Token Studio and JSON Output Generation

Overview of Token Studio Usage

• The speaker discusses the importance of using Token Studio for managing tokens across different collections, emphasizing the need to avoid manual connections.

• A command is created that can be reused in future tasks, indicating a structured approach to token management.

Command Execution and Color Scales

• The process of executing commands involves reading rules and generating token sets automatically, showcasing efficiency in design workflows.

• The speaker suggests using external tools like Google color scale generators for creating color scales instead of relying solely on AI, promoting user control over design elements.

Design Tokens Structure

• Primary colors are highlighted for use in the tutorial, with specific colors assigned to various functions (e.g., red for error, green for success).

• Emphasis is placed on organizing color tokens clearly to facilitate easy copying and integration into design systems.

Integration with Figma and Clarification Requests

• Instructions are provided on how to copy color scales from Figma, which will later be utilized by Cursor AI for understanding design files.

• The speaker runs a command that prompts Cursor AI to read the connected Figma file and generate outputs based on predefined instructions.

Interaction States and JSON File Generation

• Cursor AI generates clarifying questions regarding semantic meanings in typography and interaction states needed (hover, pressed), indicating an interactive feedback loop.

• The generation of a JSON file compatible with Token Studio is discussed as being superior to native imports due to better handling of multiple collections.

Limitations and Future Improvements

• Current limitations are noted regarding importing tokens across collections; while it works well within a single collection, improvements are necessary for multi-tiered approaches.

• An entire JSON file containing various design tokens is generated successfully but requires further testing for accuracy.

Design Tokens and Figma Integration

Generating Design Tokens

• The process begins with generating design tokens through defined rules, emphasizing the need for refinement over time to achieve optimal results.

• From a personal branding perspective, creating a JSON file of design tokens can impress developers and enhance collaboration, serving as a valuable asset in interviews.

Saving and Importing JSON Files

• Users are instructed to save the generated JSON file from their design tool, ensuring it is stored in an accessible location for future use.

• Token Studio for Figma is recommended for better handling of design tokens compared to native Figma variables, highlighting its significance in managing design assets effectively.

Utilizing Token Studio

• After loading the saved JSON file into Token Studio, users can view foundational elements of their design tokens including font families and color scales.

• The initial import reveals various typography settings such as line heights and font sizes; however, issues may arise with alias connections within the JSON structure.

Troubleshooting Issues

• Users are encouraged to document any discrepancies (e.g., broken connections in alias maps), which can be communicated back to the AI tool for resolution.

• Following feedback submission regarding broken token connections, successful re-importation shows improved organization of brand collections alongside aliases and mode variations.

Exporting to Figma

• With all components connected properly, users can begin syncing their tokens with Figma variables by exporting styles directly from Token Studio without needing a pro version.

• Ensuring that all token sets are enabled before export is crucial; this guarantees that all necessary variables are created successfully within Figma.

Design System Optimization in Figma

Streamlining Collections

• The discussion begins with the need to refine token collections within a design system, emphasizing the importance of having all tokens covered for efficient linking and building.

• A problem is identified where "mapped light" and "mapped dark" are treated as separate collections, which complicates mode swapping. The goal is to consolidate these into one collection for ease of use.

Utilizing Figma Variables

• Instructions are provided on how to manage modes within Figma variables by duplicating or importing modes, specifically focusing on combining dark and light modes into a single mapped collection.

• The process involves exporting a mode from one collection and importing it into another, effectively cleaning up the structure by eliminating redundant collections.

Successful Implementation

• After restructuring, the speaker demonstrates applying surface defaults in both light and dark modes, showcasing that everything functions correctly post-adjustment.

• A complete design system variable set has been established using Cursor, including brand, alias, mapped, and responsive collections.

Identifying Potential Issues

• Some inconsistencies are noted regarding typography in the mapped collection; typically found in the alias collection instead. This indicates a need for an audit to ensure proper alignment across collections.

• While AI has successfully completed about 85%-90% of the work required for setting up the design system variables, further auditing is necessary to ensure all elements meet desired standards.

Conclusion & Further Learning

• The session wraps up with encouragement to conduct thorough audits while acknowledging that significant progress has been made. Viewers are invited to explore additional resources on building design systems and vibe coding through linked videos.