Workflow Builder
Go to Website
  • Overview
    • General Information
    • Technical overview
    • Important non-functional info
  • Roadmap
  • Functionality
    • Features
    • Use Cases
  • CUSTOMIZATION
  • Design System Walkthrough
  • Code Customization - New Nodes
  • Full documentation
    • Index
    • Code Audit Before Purchase
  • LINKS
    • Landingpage
    • Youtube channel
    • Community
    • Synergy Codes
    • Contact us
Powered by GitBook
On this page
  • Summary
  • Atomic Design Methodology
  • Comprehensive Tokenization
  • Variant-Rich Components
  • Responsive Design
  • Layout Options
  • Customizable Node
  • Pre-built and Custom Nodes

Design System Walkthrough

PreviousUse CasesNextCode Customization - New Nodes

Last updated 2 months ago

Summary

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.

Atomic Design Methodology

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

Comprehensive Tokenization

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.

Variant-Rich Components

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)

Responsive Design

The design system is built with responsiveness in mind, featuring fluid typography and flexible layouts that adapt to various viewport dimensions.

Layout Options

Workflow Builder supports both vertical and horizontal layout options for nodes, allowing users to create workflows that best suit their visual preferences.

Customizable Node

Properties Each node template can be extensively customized with dynamic properties, enabling developers to create highly specific workflow components.

Pre-built and Custom Nodes

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.

8 min video Design System Walkthrough