Adobe XD는 무료로 사용할 수 있는 프로토타이핑 툴이다. 앱 디자인 툴은 Sketch나 Figma 같은 툴도 자주 사용되고 있지만 난 무료라는 이유 하나만으로 Adobe XD를 사용하고 있다.

앱을 개발할 때 iOS든 Android든 각각 애플과 구글에서 디자인 가이드를 배포하고 있다. 이번 포스팅에서는 Adobe XD에 UI Kit를 추가하는 방법을 간단하게 알아본다.

#UI Kit 다운로드

우선 Adobe XD 사이트에 가서 iOS와 Android 용 UI Kit를 다운 받는다.

키트를 다운로드 했으면 압축을 풀고 안에 있는 zzz.xd 파일을 클릭하여 열면 된다.
그러면 각종 디자인에 필요한 색깔, 폰트, 컴포넌트가 들어있는 아트보드가 열린다.

#UI Kit를 Library에 추가

Library에 추가 버튼을 눌러준다.

Publish 버튼을 눌러준다. 그러면 XD Cloud Document에 먼저 저장해야 된다는 알림이 나온다. 거기서 Continue를 눌러준다.

이름을 지정해주고 저장을 누르면 내 Adobe Cloud 계정에 업로드 된다. 같은 방식으로 모든 UI Kit를 업로드 해주자.

모두 업로드가 끝나면 라이브러리에 추가 된 것을 확인 할 수 있다. 이제 클릭만으로 자유롭게 각 플랫폼의 디자인 가이드에 맞는 폰트, 색상, 컴포넌트를 사용할 수 있다.

이번 포스팅에서는 가장 기본적인 iOS와 Android의 공식 UI Kit를 추가하는 법을 알아보았다. 이것들 외에도 온라인상에는 여러가지 UI Kit들을 무료로 나눔하는 곳도 있으니, 만약 마음에 드는 걸 찾았다면 같은 방식으로 추가해줌으로서 간편하게 디자인 컴포넌트들을 사용할 수 있다.