Atlassian Design System
comprehensive guidelines and Figma components for consistent, accessible product interfaces.
Product Overview
The Atlassian Design System (ADS) is Atlassian's official framework for building consistent, scalable, and accessible user experiences across products like Jira, Confluence, and Trello. It provides reusable UI components, design tokens, patterns, and guidelines to ensure brand alignment and developer-designer collaboration. The system is open-source with Figma libraries and documentation, regularly updated for modern standards. Component Library: Reusable elements like buttons, forms, navigation, and data displays with variants and states. Design Tokens: Semantic colors, typography, spacing, icons, and motion for theme consistency. Figma Kit: Official community file with auto-layout components for rapid prototyping. Guidelines: Accessibility, responsiveness, and best practices for inclusive design.
Best For
Design Tokens: Semantic colors, typography, spacing, icons, and motion for theme consistency. Figma Kit: Official community file with auto-layout components for rapid prototyping. Guidelines: Accessibility, responsiveness, and best practices for inclusive design.
Key Features
- Component Library: Reusable elements like buttons, forms, navigation, and data displays with variants and states.
- Design Tokens: Semantic colors, typography, spacing, icons, and motion for theme consistency.
- Figma Kit: Official community file with auto-layout components for rapid prototyping.
- Guidelines: Accessibility, responsiveness, and best practices for inclusive design.
Pros
- +Open source
- +Real-time collaboration
- +Extensive icon library
- +Color palette generation
Cons
- -Adoption requires team alignment
- -Customization can be complex
/// SPECS
- Pricing:Free
- Platform:Browser
AWS Amplify
Figma components for building Amplify-powered apps with consistent AWS design language.
Airtable UI Kit
Figma components for designing Airtable-integrated apps with consistent UI patterns.
Backstage Design System
Figma kit for Backstage developer portals with UI components and guidelines.
Base Gallery
Figma community file showcasing a collection of UI components for design inspiration and prototyping.
Carbon Design System
IBM's open-source UI framework for consistent, accessible enterprise products.
Cloudscape Design System
AWS open-source UI framework for consistent, accessible enterprise cloud applications.
Elastic UI
open-source React framework for consistent, accessible enterprise interfaces.
Evergreen
open-source React UI framework by Segment for consistent, accessible enterprise applications.
SAP Design System
open-source framework for consistent, accessible enterprise UI across SAP products.
Animalia DS
comprehensive design system for consistent UI components and guidelines in Animali apps.