Tag: DesignTokens

Frontend Developers and Design System Responsibilities

Frontend software engineers are pivotal in shaping design systems. They prepare and maintain vital elements such as coding style guides, component libraries, and design tokens to ensure consistency and efficiency in design.

The Role of Coding Style Guides

Coding style guides are an integral part of a design system, and frontend developers are responsible for implementing and adhering to these guides. These guides standardize coding practices to maintain a coherent codebase, facilitate easier collaboration among team members, and improve code quality for scalability and maintainability. For instance, methodologies like BEM, Atomic Design, and SMACSS provide structured ways to manage HTML and CSS. They cover naming conventions, file structuring, and rules for CSS property use.

Examples of Code Structuring Methodologies:

  • BEM (Block Element Modifier): Helps in creating scalable and reusable component styles.
    • Example: .card--featured represents a modifier for a particular block or component.
  • Atomic Design: Encourages designers to think of user interfaces as hierarchical components, from atoms to templates.
  • SMACSS: Outlines a flexible guide to developing scalable and modular CSS.

Coding style guides often extend to more granular standards, including naming, indentation, formatting, and commenting, ensuring overall code consistency.

Understanding Design Tokens

Frontend developers leverage design tokens to maintain a consistent design language across different projects within an organization. Design tokens act as a central source of truth for design properties like colors, typography, and spacing. The responsibility of maintaining tokens ensures that changes in design elements are updated globally.

Design Token Implementation:

  • $color-primary: A Sass variable that might hold a primary brand color.
  • –color-background: A CSS custom property (variable) used for background colors throughout a project.

Modern projects may define tokens in various formats such as Sass, CSS custom properties, JSON, or YAML based on the project's needs.

Component Libraries Contribution

The creation and maintenance of component libraries are a substantial part of frontend developers' roles. These libraries house reusable UI elements like buttons and forms, facilitating efficiency.

Component Usage Example:

<Button variant="primary">
  Click Me
</Button>

This React button component could be a part of the library, using design tokens and adhering to the defined coding style guide. The encapsulated nature of components in libraries like React makes them portable and manageable across different projects.

The Utilization of Kendo UI in Design Systems

Kendo UI is mentioned as a tool that can assist in building design systems. Frontend developers can use ThemeBuilder to customize this library according to their needs, defining tokens and creating components that align with their organization’s style.

Kendo UI Features:

  • ThemeBuilder: Allows customization of themes aligning with the brand.
  • Component Customization: Facilitates the creation of UI components and styles that fit within the brand guidelines.

Wrap-up and Future Discussions

In summary, frontend developers are essential in the development and upkeep of design systems through coding style guides, design tokens, and component libraries. However, this is not the exhaustive list of considerations. Accessibility, performance optimization, and documentation are also key factors to consider, which will be subjects for future discussions.

In a subsequent article, we will delve deeper into other critical factors such as how elements within a design system should be accessible, performance-optimized, and well-documented, and how these contribute further to the efficiency and effectiveness of design systems.

Tags: #FrontendDevelopment, #DesignSystems, #ComponentLibraries, #CodingStyleGuides, #DesignTokens

https://www.telerik.com/blogs/role-frontend-engineers-design-systems-part-1

Customizing UI with Dyte’s Flutter UI Kit

Dyte's UI kit embraces the Atomic design principle to ensure a seamless and adaptable user interface across different devices. The UI kit is built on the concept of design tokens, which are fundamental values like fonts, colors, spacing, and borders that maintain the design's consistency and flexibility.

Understanding Design Tokens

What are Design Tokens?

Design tokens act as a single source of truth in a design system, storing crucial design decisions. By having a clear, centralized set of values, design tokens provide an efficient way to apply and manage design principles across various platforms.

The Role of ThemeData and DyteDesignToken

ThemeData is a concept in Flutter which allows customization of the UI appearance. DyteDesignToken builds on this and brings specific customizable properties such as backgroundColor, textOnBackground, and different swatches for brand-related colors.

Customization Options

To customize the UI Kit, you have two primary methods:

  1. Passing a Single Color: Individual colors like backgroundColor and brandColor can be directly set to impact the UI's appearance.

  2. Using a Color Swatch: Define a DyteColorSwatch with specific color values at different keys (like 300, 400, etc.) to create a range of tones for elements like the brand color or background.

Example of Creating a Color Swatch

final primarySwatch = DyteColorSwatch(
  500,
  {
    300: Colors.blue.shade300,
    400: Colors.blue.shade400,
    500: Colors.blue.shade500,
    600: Colors.blue.shade600,
    700: Colors.blue.shade700,
  },
);

Border Styles and Widths

DyteBorderRadius

DyteBorderRadius tokens define the corner rounding of UI components, allowing for values such as sharp, rounded, extraRounded, or circular.

DyteBorderWidth

Likewise, DyteBorderWidth tokens offer a way to specify the thickness of borders with options like none, thin, or fat.

Example of UI Customization

Customizing the Flutter UI Kit with design tokens is done by creating an instance of DyteUIKitInfo and passing in custom values for each token. For instance:

final uikitInfo = DyteUIKitInfo(
  meetingInfo,
  designToken: DyteDesignToken(
    colorToken: DyteColorToken(
      borderRadius: DyteBorderRadius.circular,
      borderWidth: DyteBorderWidth.fat,
      backgroundColor: Colors.black,
      textOnBrand: Colors.white,
      textOnBackground: Colors.white,
      danger: Colors.red,
      success: Colors.green,
      warning: Colors.yellow,
      brandColorSwatch: DyteColorSwatch(
        500,
        {
          300: Colors.blue.shade300,
          400: Colors.blue.shade400,
          500: Colors.blue.shade500,
          600: Colors.blue.shade600,
          700: Colors.blue.shade700,
        },
      )
    ),
  )
);

In this example, a complete DyteDesignToken is built, demonstrating how a combination of border radius, border width, background color, and text color on brand and background can be customized. Additionally, it shows how a brand color swatch is implemented to give depth and variety to the brand-related UI elements.

Through these design tokens and customization techniques, Dyte's Flutter UI Kit enables developers to adapt the user interface to align with branding requirements while ensuring a consistent user experience across different platforms.

Tags: #DyteDesignSystem, #FlutterCustomization, #UIKit, #DesignTokens

https://docs.dyte.io/flutter/design-token

Implementing Design Tokens from Figma to React Native using Specify

Overview

Specify simplifies the way product teams work by automating the updating of design data, such as syncing design tokens and assets from Figma to React Native projects.

Prerequisites

Before proceeding, ensure you have:

  • Created a Specify account
  • Collected design data from Figma into a Specify repository

Specify's Functionality

Specify acts as a Design API that offers three main avenues for pulling design data:

  • Specify REST API
  • Specify CLI
  • Specify GitHub Application

Using the CLI

The Specify CLI allows for the extraction of design tokens and assets straight from your terminal or within a CI/CD pipeline.

Installation and Initialization

To implement the CLI, you must first install it using yarn and then initiate the configuration:

yarn global add @specifyapp/cli
specify init

Configuration Steps

Adjust the configuration to fulfill specific requirements, such as transforming design tokens into CSS Custom Properties, converting icons, and optimizing font files.

Sample Configuration for React Native

Here is a .specifyrc.json example that demonstrates how to configure Specify for a React Native project:

{
  "repository": "@acme-inc/all-design-data",
  "personalAccessToken": "YOUR_ACCESS_TOKEN",
  "rules": [
    {
      "name": "Design Tokens / Generate theme",
      "path": "./output/theme.ts",
      "filter": {"types": ["vector", "color", "font", "textStyle"]},
      "parsers": [{"name": "to-react-native", "options": {"colorFormat": "hex", "assetsFolderPath": {"vector": "assets/vector"}}}]
    },
    // ... additional rules for assets like vectors and fonts
  ]
}

Replace YOUR_ACCESS_TOKEN with your actual token generated from the Specify repository.

Executing the Configuration

After finalizing the configuration, run the specify pull command to pull the repository data:

specify pull

Using the GitHub App

The Specify GitHub app automates the distribution of design tokens and assets by creating a Pull Request directly in your GitHub repositories whenever updates occur in your Specify repository.

Setup and Pull Request Creation

Setup entails adding a destination in your Specify repository and selecting the "React Native" template to integrate with a GitHub account and repository. Following that, a Pull Request is created automatically.

Conclusion

By utilizing Specify's tools, either through the CLI or GitHub app, developers can efficiently integrate and manage design tokens and assets in React Native projects, streamlining the development process and fostering team collaboration.

Tags: #ReactNative #Specify #DesignTokens #FigmaIntegration

https://specifyapp.com/blog/figma-to-react-native