3Commas Design System
At 3Commas (an Algorithmic-Bots crypto platform), I was responsible for creating a design system that could be used in several future digital products in an ecosystem.
Task
The goal was to develop a universal, scalable UI kit and ensure consistency between the design and code sides, improving efficiency for both designers and developers.
Action
I collaborated with developers to create a component library in Figma and align components with Storybook. The components were built using a modular structure — Prefix, Content, and Suffix — based on atomic design principles. We focused on flexibility, making it easy for designers and developers to adapt and reuse components.
For example, in a button component, the “Content” is the text, while Prefix and Suffix allow for flexible additions like icons. The same structure applied to more complex components like input fields, which could include reset buttons or extra labels. We also matched Figma settings with React component settings to streamline development.
We separate components into 4 groups: Forms, Data display components, Overlay components and Navigation. Each main component in these groups has an addition documentation block with short structure info + block with rules on "how to use" component.
Forms
Overlay Components
929f3166-f80d-4713-b10f-57b9bb762a13.png&w=3840&q=75)
Data Display Components
Style Tokens
I implemented a tokenization system using the Token Studio plugin, creating a global design token structure for color, typography, sizing, and spacing. This setup was linked to GitHub to ensure a single source of truth for both the design and development teams. We used a 3-level color token structure (Core, Alias, and Component) to simplify communication between designers and developers.
This colors structure helps to use mixins in the code side, when developers build components. For example:
Result
This design system improved collaboration, reduced development time, and allowed the team to rapidly scale new products. By building a system without branding constraints, 3Commas could implement it seamlessly across future products.
