Appsmith Design System
Overview
User Experience Design
Design Strategy
Design Governance
Visual design
Designing a design system
As the lead of design system at Appsmith, I had the responsibility of ensuring that our design system helped us moved faster together. When I joined, I inherited an over-built and under-documented Figma file that failed to translate into the front-end system. By the time I left, I had established documentation and a practice of critique and governance on the design side to evolve the system, and had kick-started the process on the engineering side to make the design system a shared priority between design and engineering.
We immediately saw an increase in cohesion and decrease in rogue components, and a faster pace of iterative and early design work. The governance process I established created more opportunities for designers to work together, getting early visibility into how the system was emerging across the product. This visibility expanded as we hired a dedicated front engineer and started to pull the visual system into code.
/ Building on a philosophy of configurability
While I avoided re-building where possible, many of the more complicated components had to be refactored. I pulled in my team to understand how and when we were using different variations currently. This helped us determine which properties to group together, which components to join as variants, and which to nest.
