UI KIT 파일을 피그마 라이브러리에 올리기
디자인시스템 UI KIT 파일을 피그마 라이브러리에 올리기
등장인물 소개
� UX 디자이너: 김종귝님
� UI 디자이너: 송지호님
� 풀 스텍 개발자: 양둘찬님
라이브러리라는 것이 어떤 것인지, 간단하게 설명부터 하고 넘어갈게요. 개발자분이라면 라이브러리라는 개념이 이미 익숙하시겠지만, 디자이너에게는 이 개념이 낯설 수 있어요. 그래서 그분들을 위해서 쉽게 설명드릴게요.
라이브러리 = (피그마 내에 있는) 구글 드라이브, 원드라이브와 비슷. 컴포넌트 올리고 꺼내 쓸 수 있는 저장소(도서관) 같은 개념.
라이브러리라는 기능이 있는 이유는 다른 파일에 있는 스타일과 컴포넌트들을 쉽고 빠르게 갖다 쓸 수 있게 하기 위해서에요. 다른 파일에 있는 특정 요소를 가져다 쓰고 싶을때마다 해당 파일들을 일일이 열어봐야 하는건 너무 번거롭잖아요?
아직 프로젝트 초기 단계라면, 그냥 UI KIT 파일에서 페이지를 하나 만들고 그곳에서 제품 디자인 작업을 해도 되긴 해요. 그런데 나중을 생각한다면 제품 디자인 작업은 UI KIT 파일에서 하지 말고 별도의 다른 파일에서 제작하시는 것이 좋아요. 작업을 하다보면 나중에는 파일 용량이 꽤 커지게 되거든요. 유아이 키트(UI KIT) 파일만 해도 내용이 많은데, 제품 디자인 파일과 두 개가 합쳐져 있으면 나중에는 파일 열 때도 오래 결리고 뭔가를 수정할 때도 좀 시간이 걸리게 되더라고요.
혹시 헷갈려 하는 분들이 계실까봐 여기서 잠깐 부연 설명을 하고 넘어갈게요.
● UI KIT 파일은 디자인 스타일, 컴포넌트들만 모아둔 파일이에요.
● 제품 디자인 작업 파일은 그 컴포넌트를 가지고 실제 출시할 웹사이트나 모바일 앱 화면 디자인 작업을 하는 파일이에요.
그럼 다시 돌어와서 예기를 이어갈게요.
하지만 아쉽게도 팀 라이브러리 기능은 피그마의 유료 회원들만 쓸 수 있어요. 유료 회원으로 가입해서 사용하고 계신 기업들도 있을 테니까 일단 설명드리기는 할게요.
라이브러리라는 말은, 말 그대로 도서관이라는 개념이에요. 도서관에는 책꽂이가 많이 있잖아요? 그런데 피그마에 있는 라이브러리는 마법의 도서관이라서 책꽂이에 꽂은 것은 무엇이든 무한대로 복제해 줄 수 있어요. 책꽂이에 스타일과 컴포넌트를 꽂을 수도 있어요. 그리고 팀원들은 그것들을 횟수의 제한 없이 마음껏 복제해서 쓸 수 있어요.
그리고 이 컴포넌트의 복제본은 ‘인스턴스’라고 불러요. 그리고 피그마의 라이브러리는 마법의 도서관이라서, 책꽂이에 꽂혀 있는 원본의 색상이나 크기 등 무엇이라도 하나 수정되면 그 복제본인 인스턴스들도 모두 자동으로 수정돼요. 원본 컴포넌트 하나의 색상을 보라색에서 빨간색으로 수정을 해줄게요. 그러면 이 컴포넌트의 인스턴스의 색상이 자동으로 빨간색으로 업데이트 돼요.
그러면, 이제 라이브러리 책꽂이에 컴포넌트들을 꽂는 방법을 설명드릴게요.
● 피그마 화면의 좌측 패널에서 에셋(Assets)을 클릭해주세요. 그럼 책 모양 버튼이 보일텐데 이게 라이브러리 버튼이에요. 이 버튼을 클릭해주세요. 그럼 팝업창이 열릴거에요.
● 팝업창에서 중앙 부분 Current file에 있는 Publish 버튼을 클릭해주세요. Publish는 직역하면 ‘출판하다’라는 뜻인데요, 출판하면 도서관 책꽂이에 꽂히게 되잖아요? 그래서 피그마에서의 퍼블리시 버튼은 피그마 라이브러리 책꽂이에 스타일이나 컴포넌트를 꽂는 것을 뜻해요.
● Move to team 버튼을 클릭해주세요. team이라는 건 그냥 폴더 같은 개념이라고 보시면 돼요.
● 이 파일을 옮겨갈 대상 팀을 선택하고 Move 버튼을 클릭해주세요.
● 그러면 Publish library 팝업창이 열리게 돼요. 여기서 Publish 버튼을 클릭하면 끝이에요. 그런데 Publish하려는 파일 용량이 크다면, 조금 오래 걸릴 수도 있어요.
UI KIT 파일에서 무엇인가를 변경하거나 새로 추가한 것이 있으면 그 새로운 내용들도 라이브러리에 업데이트 해줘야 돼요. 그런데 이때는 변경한 것들만 업데이트 되기 때문에 처음처럼 오래 걸리지는 않을 거에요.
연구하고 공부하고 정리하는 것을 좋아해요. 그래서 UXUI 분야가 잘 맞다고 생각하면서 일하고 있어요.
공통 관심사를 갖고 있는 사람들과 이야기를 나누는 것은 재미있으면서 역량을 키우는데에도 큰 도움이 되고 있어서 제가 좋아라하는 공부 방식이에요. 그러니 UXUI와 관련된 것이라면 무엇이든 편하게 물어봐주세요! =)
https://open.kakao.com/o/sKYOZ7Dc
�️ 온라인 강의
