디자인 시스템(DS) 라이브러리는 색상, 텍스트 스타일, 에셋, 컴포넌트 등의 디자인 패턴을 공유하는 곳입니다. 이 라이브러리를 통해 팀은 일관성 있는 프로토타입을 제작할 수 있게 됩니다. 즉, 시간을 절약하면서 프로젝트에 통일성을 부여할 수 있습니다. 디자인 시스템 라이브러리에서 문서화된 디자인 시스템을 만들 수 있습니다. DS 라이브러리에 액세스하려면 화면 하단 왼쪽에서 두 번째로 디자인 시스템 라이브러리 아이콘을 클릭하거나 단축키 ⌥ + 2를 클릭하여 엽니다.
자체 제작 라이브러리 외에도 UXPin에서는 인터랙티브 요소, 색상, 텍스트 스타일, 아이콘 등을 포함한 iOS, Material Design, Bootstrap, Foundation, User Flows 라이브러리도 사용할 수 있습니다. UXPin Merge의 코드 기반 기술과 내장된 인터랙티브 기능을 사용해보고 싶다면 Fluent UI(Git 통합), Material UI(Storybook), UXPin Boilerplate(Git) 또는 오픈소스 React UI Libraries(Git) 등의 Merge 라이브러리를 사용할 수도 있습니다.
UXPin은 MUI, Ant-Design, React Bootstrap을 포함한 완전히 테마화할 수 있는 오픈소스 UI 라이브러리를 제공합니다. 이들 라이브러리에는 다양한 컴포넌트와 프로퍼티가 제공되며, 단독으로 사용하거나 완전한 기능적 컴포넌트 패턴을 활용할 수도 있습니다.
<aside> 📎 비고
모든 컴포넌트와 패턴은 선택한 UI 라이브러리와 100% 코드 패리티를 유지합니다.
</aside>
Spec 모드에서 해당 컴포넌트의 코드에 쉽게 접근할 수 있으며, 애플리케이션을 구축하기 위한 코드 스니펫을 빠르게 얻을 수 있습니다. 또한, 컴포넌트를 StackBlitz로 내보내거나 필요한 모든 종속성을 포함한 React 프로젝트로 다운로드할 수도 있습니다.
첫 번째 또는 다음 라이브러리를 추가하려면 디자인시스템 라이브러리에서 패널 하단의 섹션을 열고 + New library를 클릭합니다.
라이브러리에 액세스할 수 있는 사람, 편집할 수 있는 사람을 선택할 수 있습니다.
라이브러리 권한을 관리하려면 라이브러리 모달 하단에 있는 라이브러리 설정(톱니바퀴 아이콘)을 엽니다.
여기에서 라이브러리의 이름을 바꾸거나 액세스 및 편집 권한을 변경할 수 있습니다.
