User Interface (UI) Kit

1. Define the Foundation (Atoms)

Identify the smallest design elements like colors, typography, icons, and spacing, and create variables in Figma for them.

1.1 Colours

Once you've established a cohesive color palette and created its tints and shades, the next step is to organize and define these colors as variables in Figma. This ensures consistency and simplifies handoffs to developers. Below are some best practices to follow when setting up your color variables.

• Naming Convention:  Use lowercase letters for all variable names for consistency. Separate words with a hyphen ("-") to improve readability and avoid errors during implementation.

• Grouping  Colours:  Organize colors into folders (e.g., "red," "blue," "grey") to keep tints and shades logically structured. Each folder includes variations such as red-100, red-200, ... red-900 to represent tints and shades.

• Alias for Default Color: Always create an alias (e.g., red-default) for the primary or default shade of a color. This alias simplifies development by letting developers quickly identify and use the standard color.

1.2 Typography

After defining your typography styles—such as font families, weights, and sizes—it's essential to organize them into variables in Figma. Creating typography variables ensures consistency across your designs, simplifies updates, and facilitates a smooth handoff to developers. Below are some guidelines to follow when establishing typography variables in your design system.

• Naming Convention and Categorization: Use lowercase letters and hyphens ("-") to separate words for consistent and readable variable names. Organize typography variables into clear folders to maintain structure and consistency. Use font-family to define font families for headings and body/base text. For font-weight, use numeric variables instead of strings (e.g., 400, 500, 600) to align with industry standards. Under font-size, create variables for headings (e.g., h1, h1-mobile, h2, h2-mobile) and body text (e.g., xs, sm, md, base, lg, xl, 2xl, etc.) to ensure flexibility across different screen sizes and contexts.

• Grouping and Categorization:  Organize typography variables into clear folders like font-family (define font families for headings and body/base text), font-weight using number variable instead of string variable (e.g., 400, 500, 600), font-size for headings (e.g., h1, h1-mobile, h2, h2-mobile) and body (e.g., xs, sm, md, base, lg, xl, 2xl,...)

1.3 Spacing

Spacing variables are crucial for maintaining consistent layouts and margins across your design system. They standardize gaps, padding, and margins to create a balanced visual hierarchy. 

• Naming Convention: Arrange variables in ascending order of size, with values typically following a 4px scale system (e.g., 0, 4, 8, 12, 16, 20, etc.) to cover diverse layout requirements. Define values using intuitive names, such as:

  1. none for 0 spacing.

  2. Small to large sizes: 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl.

  3. Descriptive names for extra-large scales: huge, x-huge, 2x-huge, etc.

Organize spacing variables under a "spacing" folder for clear structure and accessibility. Use lowercase letters with hyphens ("-") for multi-word names, and adopt a scalable naming system to ensure clarity and consistency.

1.4 Radius

Radius variables are used to define corner rounding for UI elements like buttons, cards, and modals, ensuring consistent curvature across the design system.

• Naming Convention: Group radius variables into a "radius" folder for organization, using clear and simple naming conventions. Names should reflect their purpose and value, such as:

  1. none for 0 (sharp edges).

  2. Size-based names: 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl.

  3. full for a completely circular radius (9999px).

Order the variables logically from smallest to largest, with values starting from subtle rounding (e.g., 2px, 4px) to prominent rounding (e.g., 16px, 20px) and complete circles.

2. Combine Atoms into Molecules

• What to Do: Build components like buttons, input fields, cards, and form controls by combining atoms. Apply variables (colors, typography, spacing) to ensure consistency. Keep states (hover, focus, disabled) in mind.

• How to Document: Add descriptions to each molecule in Figma using the annotation feature (e.g., "Primary Button with hover and active states"). Group components logically in the Figma library (e.g., Buttons → Primary, Secondary). 

3. Assemble Organisms

At this stage, organisms are assembled by combining multiple molecules and atoms into larger, functional components. These organisms typically represent reusable sections of the UI, such as headers, footers, or cards, and include all their interactive states (e.g., default, hover, dropdowns).

• What to Do: Build organisms by combining molecules and atoms into modular, reusable components that define key UI sections. Ensure each organism is consistent, adaptable, and serves a clear purpose. Create variants for different states (e.g., hover, focus, expanded) and include mobile-specific versions by adapting spacing, typography, and layout to smaller screen sizes.

• How to Document: Organize organisms into component sets with clear, descriptive names for each variant (e.g., default, hover, expanded, mobile). Add annotations to describe the structure, tokens used, and how each variant behaves, particularly for mobile adjustments. Include examples of the organism within both desktop and mobile templates or layouts to demonstrate adaptability. Use prototyping tools to simulate interactions and responsive behaviors, ensuring developers understand how to implement them effectively.

4. Temaplates and Pages

Templates and pages represent the final stages of the design process, where organisms are arranged into cohesive layouts. Templates define the structure and layout for different screens (e.g., landing pages, product pages) without real content, while pages apply real data and content to those templates to create finalized designs.

• What to Do: Use templates to arrange organisms into reusable layouts that reflect the structure of the UI for specific screen types. Focus on defining consistent grids, spacing, and alignment to ensure scalability. Once templates are finalized, create pages by populating them with real content, such as images, text, and data. For responsive designs, ensure that both templates and pages adjust seamlessly across screen sizes, and include mobile-specific versions where necessary.