Building a design system for the component library of a low-code platform
Overview
Company
Canonic's low-code frontend builder revolutionizes interface creation by enabling users to effortlessly drag and drop components, tailoring them to their project's requirements without any coding
Problem
The existing component library faces significant challenges: it harbors inconsistencies in states, colors, configurations, and adaptability, hindering seamless user experiences. Moreover, the absence of a unified style guide complicates maintenance and scalability, exacerbating these issues.
Solution
To address these challenges, I spearheaded the development of a comprehensive design system tailored to Canonic's low-code frontend builder experience.
This involved establishing standardised style guide, along with each component's interaction, possible configurations and adaptability. This served as the definitive reference point for design and development efforts, streamlining maintenance and scalability.
Highlights
Result
Reduced number of bugs
Code Optimization
Better looking pages
Better looking final UI Screens
Easier Configuration
Better Configuration Overrides
My Role
Lead Product Designer
Project Manager
Duration
3 months
Team
Monica Singh Dahiya (Sr. Design Consultant)
Pratham Agrawal (Dev)
SimranJot Singh (PM)
Research
Design Audit
Following a thorough design system audit, we identified key areas for enhancement in Canonic's low-code frontend builder. Inconsistencies were noted in spacing, states, strokes, colors, and curvature across components. To address this, we're standardizing these elements while introducing refinements for improved coherence.
All components will adhere to a basic style guide and atomic design philosophy. Thus establishing a robust foundation for interface creation. Additionally, we standardized variants and types, introducing primary, secondary, and tertiary designations for streamlined usage. These efforts aim to enhance user experience and streamline frontend development.
Define
Properties
For each component we defined the variants, states, size, configuration possibilities Full list is on notion
Solution
Style Guide
Designed to standardise colours, typography, and spacing. This guide ensures consistency and coherence across all components, enhancing the visual harmony of your projects.
Components & Interactions
Our components are designed following the atomic design philosophy, ensuring a modular & scalable approach. Each element, from basic atoms to complex organisms, is meticulously crafted in Figma to include all states, variants, properties, and configurations. This methodology guarantees consistency, flexibility, and responsiveness across all devices.
Branding Configuration
Easily customize the style guide from the Branding Settings section. Modify fonts, sizes, colors, and spacing values to align with your project's unique requirements, ensuring a tailored and cohesive design effortlessly.
