[Zeroheight] 디자인 시스템을 쉽게 제작, 관리하는 툴

 

 

 

현재 회사 프로젝트 사이즈가 작아서 스타일가이드와 컴포넌트를 피그마 한곳에 때려넣고 관리하는데

점점 개수가 늘어나다보니 원하는 아이콘, 컴포넌트를 찾기 힘들다..(반성 ;_; )

 

결정적으로,

디자이너가 생각하는 버튼은 '버튼처럼 생긴 것'

개발자에게 버튼은 '눌러서 작동하는 모든 것' 이라는걸 알게 된 후

용어를 정리하고 디자인 시스템을 만들어야겠다는 다짐을 하게되었다.

 

그렇게 디자인시스템을 검색하던 중 찾게 된 툴!

 

Zeroheight

https://petpharm.zeroheight.com/landing

zeroheight · document your design systems, together

 

주요 기능

1. 피그마, 스케치, XD와 연동가능, 디자인 에셋을 불러오면 자동으로 디자인시스템에 추가된다.

 

 

2. 협업이 가능하다. (설명에 질문, 답변 가능)

 

 

3. 프로젝트/회사 도메인 생성, 웹에 게시할 수 있다.

 

 

 

---

 

사용방법

피그마 파일 업로드 👇

https://www.youtube.com/watch?v=zXhmLERdoms&t=117s 

 

1. 가입을 하고 팀, 도메인 이름을 설정한 뒤 스타일가이드 업로드 클릭

2. 스타일이 지정되어있는 파일 링크 업로드

*피그마에 컬러, 텍스트 스타일이 지정되어 있어야 함

 

지정한 스타일이 자동으로 업로드, 여러가지 프로젝트 가능

 

 

3. 업로드 된 스타일을 카테고리에 맞게 정리해준다.

 

피그마로 한 번에 업로드 된 스타일을 선택, 지정해준다.

텍스트도 마찬가지!

 

 

 

---

 

 

장단점

장점

문서화되서 한 눈에 보기 편하다. (특히 한 회사에서 프로젝트가 크거나 많을 때 통일하기 좋을 듯)

히스토리 관리가 편하다(버전마다 보관이 쉽다. 피그마의 약점)

 

단점

가격이 비싸다. 

5명 에디터 / 커스텀 도메인 생성 / 메모 남기기 / 최대 3가지 스타일가이드가

한 사람당 한달에 5만5천원 정도..?

Enterprises는 대시보드 분석도 해주는데 안쓰는 디자인 컴포넌트 등을

걸러내기 유용한 기능같다. 하지만 가격이 어떨지...

 

 

---

 

결론

회사내 여러가지 프로젝트가 있고, 그것을 통합할 디자인시스템 관리툴이 필요하다면

고려해볼만 한 듯! 아무래도 가격이 비싸서 지금 회사에서는 사용을 할 수 없을 것 같다.

일단은 피그마에 스타일가이드와 컴포넌트를 잘 정리해놓고

노션을 이용해서 디자인시스템을 정리해야 할 것 같다.