/
Understanding Atlassian's Design System and Achieving Uniformity
com.atlassian.confluence.content.render.xhtml.migration.exceptions.UnknownMacroMigrationException: The macro 'html' is unknown.

Understanding Atlassian's Design System and Achieving Uniformity

Created by Yogesh Rathor
Last updated: Sept 13, 2024 by Saurabh Gupta

A design system is like a blueprint for digital products. It's a set of rules and tools that teams use to keep the look and feel of products consistent. A design system streamlines your team's workflow by tackling repetitive tasks and addressing recurring issues, reclaiming valuable time. A design system aids in managing the complexity of product transitions between dark and light themes. A design system teaches new designers about the product and its rules, allowing them to get productive faster.

It has many advantages, but it does not come without some obstacles. One of the challenges is continuous maintenance. Like any other product, the design must be kept up to date to remain relevant.

Public design systems tackle the aforementioned problem in large part since they provide thorough documentation, pre-built components, and design principles. This can greatly minimize the time and effort necessary for the first setup when compared to creating your own system from scratch. Public design systems are often maintained by internal teams or even the open-source community. They frequently issue updates, upgrades, and bug fixes to keep the design system relevant and current with the newest design trends and best practices. This reduces the strain on your team to constantly monitor and update the design system. In this article, we will look at one of the public design systems, the Atlassian Design System.

Deep Dive in Integrating Atlassian Design System Integration
React Integration

@atlaskit Library

For React developers, the Atlaskit library is the foundation for integrating ADS. This library includes a comprehensive set of components written using TypeScript to provide type safety and better interoperability with current JavaScript codebases.

Component Props

Each component in Atlaskit has a well-defined set of props. These properties enable developers to fine-tune and regulate component behavior. For example, a button component may include properties such as appearance, isDisabled, and onClick, which allow developers to quickly alter its behavior and look:

  • Appearance: Determines the visual style of the button (e.g., primary, secondary).

  • isDisabled: A boolean flag that disables the button.

  • onClick: A callback function that is invoked when the button is clicked.

Hooks and Contexts

ADS leverages React hooks and context APIs extensively, promoting a functional programming approach. This methodology enhances code maintainability and state management.

  • Hooks: Custom hooks, like useTheme and useModal, encapsulate complicated logic and state management, resulting in clean, reusable solutions.

  • Context API: React's Context API is used to handle theming and global state, ensuring that state and theme propagate consistently throughout the application.

Continuous Integration and Deployment

ADS integration with CI/CD workflows is a simple approach. Because components are published on npm, ADS allows for automated updates and dependency management, ensuring that development teams can always take advantage of the most recent features and enhancements.

Versioning and Publishing

  • npm: Components are versioned and published on npm, allowing for simple installation and upgrades via package managers such as npm or yarn. This versioning technique utilizes semantic versioning (server), which ensures backward compatibility and unambiguous upgrade routes.

Cross-Browser and Cross-Platform Compatibility:

  • Atlaskit components are rigorously tested across a wide range of browsers and platforms to ensure consistent behavior and appearance.

  • Compatibility with popular browsers such as Chrome, Firefox, Safari, and Edge is verified, along with support for desktop, mobile, and tablet devices.

  • Polyfills and fallbacks are provided where necessary to ensure graceful degradation in older browsers and environments.

By following these guidelines, integrating the Atlassian Design System can significantly enhance the consistency and efficiency of your product development process. Whether you're tackling theming complexities or aiming to get new designers up to speed quickly, ADS provides the tools and principles needed for success.