#북리뷰
#피그마로시작하는UI디자인
* 디자인 라이브러리
디자인 라이브러리는 프로젝트 협업 시 공통으로 사용되는 스타일과 에셋을 사전에 등록하고
라이브러리로 발행하여 어느 페이지에서나 동일하게 사용할 수 있도록 하는 기능이다.
•
스타일 등록 방법 및 특성
스타일은 텍스트, 컬러, 레이아웃 그리드, 선 등에 적용이 가능하다. 등록하는 방법은 모두 동일하다.
스타일 등록 방법
스타일 등록을 원하는 디자인 탭 옵션 :: 을 클릭한다.
스타일 팝업창이 나타나면 상단의 + 를 클릭한다.
스타일 명을 입력하고 [ Create style ] 버튼을 클릭한다.
4. :: 을 클릭해서 스타일이 잘 등록되었는지 확인한다.
Style
•
한 번 등록한 스타일은 모든 요소에 적용이 가능하다. 스타일 수정을 진행하면 연결된 디자인 요소가 모두 수정된다.
•
연결을 해제하고 싶다면 스타일을 클릭한 후, Detach Variable을 클릭하면 스타일과의 연결이 해제된다.
Detach Variable
•
에셋 등록 방법 및 사용
•
페이지 내 컴포넌트로 등록한 요소는 에셋으로 자동 등록된다.
에셋은 재사용 가능하며, 에셋 탭에서 드래그 앤 드롭하여 사용한다.
•
에셋 요소는 페이지에서 프레임 순으로 자동 그룹화되며
정리할 때 /(슬래시)를 사용하여 그룹을 나눠줄 수 있다.
•
디자인 라이브러리 발행 및 적용
Team Library
1. 에셋 탭을 클릭한 후 Team Library을 클릭한다.
2. 디자인 라이브러리 팝업창이 나타나면 [Publish] 버튼을 클릭한다.
3. 현재 작업 페이지에서 등록한 에셋과 스타일 리스트가 나타난다.디자인 라이브러리로 발행할 요소만 선택한 후 하단의 [Publish] 버튼을 클릭한다.
4. 라이브러리 발행을 완료했다는 알림이 나타난다.
5. 발행한 라이브러리는 라이브러리 리스트에서 토글을 활성화해 디자인 라이브러리를 실행한다.
출처 : 피그마로 시작하는 UI 디자인(북) > 피그마로 협업하기 스터디 목적으로 기록했습니다!