adobeXD 정리

adobeXD

ui/ux 전용이다.

xd자체는 ui만 그리기 때문에 간단하고 단순하다.
포토샵, 일러스트보다 간단하다. 단 합성이나 이런 딥한부분은 할 수 없음.

 

 

시작부분

내 작업

클라우드 문서 → 어도비 환경에 적용되는것

나와 공유됨 → 같이 공유하며 실시간으로 확인 가능함

 

 

문서 에셋 아이콘(첫번째 아이콘)

도화지에 도형을 그려본 다음에 마우스 오른쪽 클릭 → 에셋에 색상과 현재 사용하고 있는 폰트도 추가됨

저장은 클라우드로 해야 다른 문서에서도 사용할 수 있음.

저장을 안하면 이 문서에만 사용가능함

에셋 링크를 누르면 전에 클라우드 문서에 저장되었던 색상과 폰트내용이 나온다.

적용하고자 하는 곳을 클릭하고 에셋에 있는 내용을 클릭하면 그 내용대로 바뀐다.

 

오른쪽 상단 툴 내용

반복그리드

해당 반복하고자 하는 오브젝트를 그룹화한다.

그룹화 → Ctrl+G or 마우스 오른쪽 클릭 그룹화

그룹화하고 반복그리드를 클릭하면 복사가된다.

움직임, 수정부분(컬러 등)도 전부 같이 바뀌어서 좋지만 하나의 오브젝트에 의한 텍스트는 바뀌지 않는다.

따로따로 적용 가능함. 

 

반응형 크기 조정

완벽하지 않아서 따로 만들어서 쓰는게 편하다. 느낌만 보는 용도로 사용하기 좋다.

자동과 수동이 있음

수동 → 이미지 좌측고정, 텍스트 오른쪽 고정으로 설정해두면 사잇값이 벌어짐!

 

 

디자인

채우기 → 면의색상만 채워짐 + 클릭하면 현재 색상이 저장된다

 

- 점선 

대시 → 점선

간격 → 점선과 점 사이

오브젝트 흐림효과 → 전체 흐림효과 적용됨

뷰포트 높이 → 뷰포트를 지정하면 오른쪽 위에 재생버튼을 눌렀을때 보이는 정도

 

프로토타입

스크롤 시 위치 고정 → 해당오브젝트 클릭하고 위치 고정해두면 미리 보기를 클릭했을때 그 오브젝트는 고정된다.

전환 → 화면전환

자동 애니메이트 → 화면이 밀리면서보임 (약간의 인터렉션 됨)

 

공유

공유하기전에 공유하려면 클라우드에 꼭 저장해두어야함.

디자인검토 & 개발

디자인검토 → 링크만들기 → 링크복사해서 링크 전달. 기획자나 디자이너한테 확인할 수 있음.

개발 → 연결 업데이트 → 링크복사해서 전달. 

개발은 오른쪽에 보면 개발자모드가 추가됨. 이미지,폰트 컬러 리스트가 쭉 나옴

 

이미지 저장할때는 이미지 들어가서 디자이너가 공유를 눌러줘야

다시 링크들어가서 확인해보면 저장이 되도록 되어있음.

 

핸드폰과 XD동기화

핸드폰에 XD깔고 로그인하면 클라우드에 저장된 내용 확인 가능함.

실시간으로 저장하면 바로 핸드폰으로도 확인 할 수 있음