Claude Design Tested with a Figma Design System

A test pits Claude Design against a design system derived from Figma to assess its ability to generate a compliant interface. The approach involves importing a .fig file and using examples provided by the design system. This trial comes as critics accuse AI tools of ignoring tokens, components, and spacing rules.

Importing a .fig and Requesting Layout Recreation

The method used consists of exporting the design system in .fig format and then importing it into Claude Design. Once the .fig file is ready, it can be loaded into the tool. The interface examples included in the system serve as inputs to request Claude Design to recreate a web page layout.

A Figma System Chosen for Its Structure and Examples

The experience relies on the Simple Design System created by the Figma team. This system is presented as well-structured and straightforward, making it easy to use. It also includes examples of user interfaces built from its components and styles, which can be used to guide the expected generation.

Test Objective and Initial Findings on the Result

The goal is to determine whether AI tools, often accused of neglecting tokens, components, spacing rules, or existing templates, can adhere to an authentic design system. To this end, a system developed in Figma was provided to Claude Design, along with the request to generate a user interface design compliant with this system. The result was deemed quite interesting by the person who conducted the experiment.