SAP Design System

오픈소스 프레임워크 를 위한 consistent, accessible enterprise UI 전체에 걸쳐 SAP products.

제품 개요

SAP Design System, primarily SAP Fiori for SAP applications, is an open-source design system providing guidelines, components, and tools for building consistent, user-centric, and accessible enterprise experiences across SAP's ecosystem (S/4HANA, SuccessFactors, Ariba, etc.). It follows human-centered design principles with Fiori guidelines for web and mobile, offering reusable UI patterns, theming, and accessibility standards. The system includes Figma kits, code libraries (Fundamental Library for React/Angular/Vue), and extensive documentation for designers and developers. Fiori Guidelines: Core principles for UX in SAP apps, focusing on role-based, delightful, and coherent experiences. Component Library: Reusable elements like tables, forms, charts, and navigation with variants for themes (light/dark/high-contrast). Theming & Tokens: Quartz Light/Dark, Horizon themes; semantic colors, typography, spacing. Tools: Figma UI Kit for prototyping; openUI5 and Fundamental Styles for implementation. Accessibility: WCAG 2.1 AA compliance, keyboard navigation, screen reader support.

주요 기능

Fiori Guidelines: Core principles 를 위한 UX 에서 SAP apps, focusing 에서 role-기반, delightful, 및 coherent experiences.
컴포넌트 라이브러리: Reusable elements 같은 tables, forms, charts, 및 navigation 를 사용한 variants 를 위한 themes (light/dark/high-대비).
Theming & Tokens: Quartz Light/Dark, Horizon themes; semantic 색상, 타이포그래피, 간격.
도구: Figma UI 키트 를 위한 프로토타이핑; openUI5 및 Fundamental Styles 를 위한 implementation.
접근성: WCAG 2.1 AA compliance, keyboard navigation, 화면 reader 지원.

장점

+오픈 소스
+색상 팔레트 생성
+접근성 대비 검사
+포괄적인 디자인 시스템

단점

-도입 시 팀 조율 필요
-커스터마이징이 복잡할 수 있음

/// 스펙

가격:
Free
플랫폼:
Browser / iOS / Android

ASSETS_DIRECTORY

figma

/// 유사 도구

Atlassian Design System

포괄적인 guidelines 및 Figma 컴포넌트 를 위한 consistent, accessible product interfaces.

Carbon Design System

IBM's 오픈소스 UI 프레임워크 를 위한 consistent, accessible enterprise products.

Cloudscape Design System

AWS 오픈소스 UI 프레임워크 를 위한 consistent, accessible enterprise 클라우드 applications.

Elastic UI

오픈소스 React 프레임워크 를 위한 consistent, accessible enterprise interfaces.

Evergreen

오픈소스 React UI 프레임워크 에 의한 Segment 를 위한 consistent, accessible enterprise applications.

Flowbite Design System

오픈소스 Tailwind CSS 컴포넌트 라이브러리 를 사용한 Figma 키트 를 위한 rapid UI 구축.

Forma 36 Design System

Contentful's 오픈소스 디자인 시스템 를 위한 consistent, accessible content management interfaces.

Friday Design System

오픈소스 Figma UI 키트 를 위한 rapid 프로토타이핑 를 사용한 사용자 정의 가능 컴포넌트.

GOV.UK Design System

official UK government 프레임워크 를 위한 consistent, accessible public 서비스 interfaces.

Fluent UI

Microsoft's 오픈소스 UI 프레임워크 를 위한 consistent, accessible experiences 전체에 걸쳐 웹, Windows, iOS, Android, 및 macOS.