Forma 36 Design System

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

제품 개요

Forma 36 is Contentful's official open-source design system, providing a comprehensive set of UI components, guidelines, and tools to build consistent, accessible, and scalable experiences for content management platforms and related applications. It powers Contentful's own products and is available for external use, focusing on modularity, developer productivity, and user-centered design with React components and Figma libraries. Component Library: Reusable elements like buttons, forms, cards, tables, modals, and navigation with variants for themes and states. Design Tokens: Semantic colors, typography, spacing, icons, and motion for brand consistency. Accessibility: WCAG-compliant with ARIA support and inclusive patterns. Tools: Figma kit for prototyping; React library with TypeScript support for implementation.

주요 기능

컴포넌트 라이브러리: Reusable elements 같은 buttons, forms, cards, tables, modals, 및 navigation 를 사용한 variants 를 위한 themes 및 states.
디자인 토큰: Semantic 색상, 타이포그래피, 간격, 아이콘, 및 motion 를 위한 브랜드 consistency.
접근성: WCAG-compliant 를 사용한 ARIA 지원 및 inclusive 패턴.
도구: Figma 키트 를 위한 프로토타이핑; React 라이브러리 를 사용한 TypeScript 지원 를 위한 implementation.

장점

+오픈 소스
+방대한 아이콘 라이브러리
+색상 팔레트 생성
+접근성 대비 검사

단점

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

/// 스펙

가격:
Free
플랫폼:
Browser

ASSETS_DIRECTORY

figma

/// 유사 도구

Material Design

Google's 오픈소스 디자인 시스템 를 위한 consistent, 직관적인 interfaces 전체에 걸쳐 platforms.

Elastic UI

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

Evergreen

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

SAP Design System

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

Flowbite Design System

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

Friday Design System

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

GOV.UK Design System

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

Horizon Design System

HashiCorp's 오픈소스 디자인 시스템 를 위한 consistent, accessible 클라우드 management interfaces.

Fluent UI

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

Goldman Sachs Design System

internal 프레임워크 를 위한 consistent, accessible enterprise financial interfaces.