Eclipse

About

Inspired by the potential of machine learning in design workflows, this project introduces a Figma plugin that automates the transition of UI elements from light mode to dark mode. The plugin is underpinned by a machine learning model that predicts dark mode colors, ensuring adherence to Material Design and Apple's Human Interface Guidelines.

Blueprint

A custom model was trained using a dataset of RBG color values, then implemented using TensorFlow.js. The plugin facilitates rapid iterations within a coherent design language by linking to existing Figma components.

The plugin operates by selecting a Figma element, extracting its fill color, and then applying a machine learning model to predict a suitable dark mode color. This process is streamlined through a user-friendly interface, allowing for quick and intuitive use.

Dataset

This dataset combines technical accuracy and design best practices for light and dark mode interfaces. It includes 1515 entries, each with normalised RGB color values on a 0 to 1 scale, ensuring consistent color representation.

With an 80/20 training/testing split, it allocates 1212 entries for training and 303 for testing, following machine learning standards for effective model training and validation.

The dataset adheres to modern UI/UX design principles, featuring balanced color contrasts and brightness for dark mode applications. It avoids intense colors for comfort, maintaining clarity in different modes.

It incorporates warm hues for key elements and avoids absolute black backgrounds, reflecting dark mode trends for modernity and adaptability.

Compliant with the Web Content Accessibility Guidelines (WCAG), the dataset supports inclusive and user-centric design, catering to a wide range of users, including those with visual impairments.

Figma

The plugin is currently in development and will be available on the Figma Community soon.

@rbnnghs for updates