Design System Walkthrough
Last updated
Last updated
The Workflow Builder design system employs Atomic Design methodology for scalable and consistent component organization. It features comprehensive tokenization for easy theme customization, variant-rich components for flexibility, and responsive design for adaptability. The system offers both vertical and horizontal layout options, customizable node properties, and a mix of pre-built and custom nodes. This approach ensures a flexible, efficient, and user-friendly workflow creation experience.
The Workflow Builder design system is meticulously crafted following the Atomic Design methodology, ensuring scalability, consistency, and efficiency1. This approach organizes components into:
Atoms: Basic building blocks (buttons, inputs, icons)
Molecules: Simple groups of UI elements
Organisms: Complex UI components
Templates: Page-level layouts
Pages: Specific instances with real content
The design system employs a robust tokenization strategy for colors, typography, spacing, and shadows1. This allows for easy switching between light and dark modes and seamless theme customization.
Each component comes with multiple variants for different states, sizes, and styles1. For example, buttons are available in:
Five different sizes
Multiple variants (text-only, icon and text, etc.)
Various states (default, hover, active, disabled)
The design system is built with responsiveness in mind, featuring fluid typography and flexible layouts that adapt to various viewport dimensions.
Workflow Builder supports both vertical and horizontal layout options for nodes, allowing users to create workflows that best suit their visual preferences.
Properties Each node template can be extensively customized with dynamic properties, enabling developers to create highly specific workflow components.
The system offers a range of pre-defined nodes while also allowing for the creation of custom nodes, providing a balance between quick implementation and unique functionality.