Figma Creative Assistant

Demonstration and Discussion

A crucial step of the designing process is Rapid Prototyping. Building high fidelity mockups quickly can become tedious. The plugin is designed with this in mind and aims to be a faithful creative assistant to the designer. It allows for rapid exploration of color palettes inspired from a focal object, often times a product in marketing material. It even allows modification of generated color palettes in order to quickly generate finer variations in the UI. We believe the designer should always be in control and to that extent, while the plugin uses Artificial Intelligence, algorithms and heuristics for separate steps of the coloring process, the designer can guide the plugin to create their desired output. This significantly reduces the time of the rapid prototyping stage.

The different stages of this process are as follows:

• Color Extraction: Automatically detecting the focal image, and using an enhanced Median Color Quantization algorithm to pick key colors.
• Palette Extension: Using Monte Carlo Tree Search and Gaussian Mixture Models, we extend the palette with missing colors to create a harmony of complementing colors.
• Color Assignment: Assigning the colors from the palette to different layers of the UI design.
• Ensuring Visual Coherence: Checking certain metrics such as contrast, warm-cool combinations, luminance variations to ensure an appealing end result.

Publication: Link
GitHub Code Repository: Private Repository