[Design] Xd 사용법 익히기 (3)

하이~~!!

 

오늘은 Xd 사용법을 익히는 마지막 포스팅이다.

 

집중해서 보도록하자.

 

오늘 처음 다뤄볼 내용은 Asset 이다. Asset은 공통적으로 들어가는 색상이나 텍스트, 구성요소를 저장해서 사용하는 걸 의미한다.

 

일단 새 아트보드에 이런 사각형이랑 색상을 채워보자.

 

좌측에 보면 색상 옆에 '+' 기호가 있다. 클릭하자.

 

테두리와 채우기에 설정된 색상이 asset에 등록된걸 볼 수 있다. 이제 이 색상은 언제든 필요할 때 가져와서 사용할 수 있게 된다. 그리고 언제 쓸지를 알 수 있게 하기 위해 이름을 바꿔두는게 좋다!

 

텍스트도 하나 만들고 문자 스타일 옆의 '+' 기호를 눌러보자.

 

역시나 해당 텍스트의 요소가 애셋에 등록되는 것을 볼 수 있다.

 

이번에는 구성요소를 한번 만들어보자.

두개를 합쳐서 그룹핑해보자. 그룹핑은 지난 포스팅에서 ctrl+ G로 할수 있다고 했다.

이 그룹 전체를 애셋으로 등록을 하는 것이다. 구성요소 옆에 '+' 기호를 눌러보자.

 

해당 구성요소가 애셋으로 등록되는 걸 볼 수있다. 그리고 등록된 구성요소는 초록색으로 바뀌는데 이건 구성요소 애셋을 의미하는 색상이고, 왼쪽 상단에 색칠된 초록색 마름모가 있다. 이 마름모를 가진 구성요소는 마스터 구성요소이다.

즉, 얘를 고쳐주면 서브 구성요소들이 다 수정된다는 얘기다.

 

실제로 서브 구성요소는 색칠이 안되어 있다. ㅎㅎ 

 

그리고 아까전에 말했듯이 마스터 구성요소를 고치면 서브 구성요소도 바뀌는 걸 볼 수 있다.

 

그리고 위와 같은 그룹을 하나 만들어보자. 

 

만들고 난 뒤에 우측 상단에 반복 그리드를 클릭하면 ..

 

이렇게 바뀐다 오른쪽이나 왼쪽을 쭉 끌어다 당기면 !! ㅎㅎㅎ

 

이렇게 리스트를 쉽게 만들어 낼 수 있다. 굉장히 유용한 기능이다.

 

그리고 다시 우측 상단 반복 그리드 해제 버튼을 누르면 이렇게 각각의 요소로 그룹이 나눠진다.

 

그리고 왼쪽 아래에 플러그인 버튼을 눌려서 Xd에서 제공하는 플러그인 을 사용할 수 있다. 나는 User Profile 이라는 플러그인을 이용해서 사람 이미지를 채워 넣었다.

 

그리고 프로토 타입 탭을 눌려서 프로토 타입을 만들어 낼 수 있다. 프로토 타입은 아트 보드를 연결해 주면 된다. 아트보드 왼쪽 상단에 파란 배경의 집모양은 메인 화면을 뜻한다. 여기서 프로토타입이 시작된다.

 

그리고 우측 상단에 실행 버튼을 누르면 ..

이렇게 프로토 타입을 실행할 수있다.

 

이번에는 오버레이를 사용해보자. 버튼을 가진 아트보드와 작은 크기의 아트보드를 만들어보자.

 

그리고 프로토 타입 탭에서 서로 연결을 하고 위와 같이 설정을 해주자.

 

그리고 실행을 해보면 네비게이터 처럼 동작하는 화면을 만들어 낼 수 있다. ㅎㅎ

 

자 !! 이렇게 Xd 포스팅을 마치겠다. 이정도면 당신도 개발자지만 어느정도 디자인을 할 수 있는 사람이 될 수 있을것이라 생각한다. 그럼 즐겁게 디자인하자 ^^