디자인 시스템(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 라이브러리를 사용할 수도 있습니다.
https://uxpincommunity.cdn.prismic.io/uxpincommunity%2Fb8e6e578-f06c-45ce-8181-a8802140342c_newlibraries_material%26ios_800x600.mp4
UXPin은 MUI, Ant-Design, React Bootstrap을 포함한 완전히 테마화할 수 있는 오픈소스 UI 라이브러리를 제공합니다. 이들 라이브러리에는 다양한 컴포넌트와 프로퍼티가 제공되며, 단독으로 사용하거나 완전한 기능적 컴포넌트 패턴을 활용할 수도 있습니다.
<aside> 📎 비고
모든 컴포넌트와 패턴은 선택한 UI 라이브러리와 100% 코드 패리티를 유지합니다.
</aside>
Spec 모드에서 해당 컴포넌트의 코드에 쉽게 접근할 수 있으며, 애플리케이션을 구축하기 위한 코드 스니펫을 빠르게 얻을 수 있습니다. 또한, 컴포넌트를 StackBlitz로 내보내거나 필요한 모든 종속성을 포함한 React 프로젝트로 다운로드할 수도 있습니다.
첫 번째 또는 다음 라이브러리를 추가하려면 디자인시스템 라이브러리에서 패널 하단의 섹션을 열고 + New library를 클릭합니다.
라이브러리에 액세스할 수 있는 사람, 편집할 수 있는 사람을 선택할 수 있습니다.
라이브러리 권한을 관리하려면 라이브러리 모달 하단에 있는 라이브러리 설정(톱니바퀴 아이콘)을 엽니다.
여기에서 라이브러리의 이름을 바꾸거나 액세스 및 편집 권한을 변경할 수 있습니다.
