Adobe XD 공부기록 1 구성요소, 이미지넣기, 횡스크롤, 패딩옵션

 

 

 

구성요소 (component) 

객체를 모두 선택하고 ctrl+k 

cmd를 눌러 그룹의 구성요소를 개별로 선택할 수 있다. 

구성요소를 아트보드로 드래그하면 복사할 수 있다. 

---

패딩(padding)을 통해 텍스트 길이에 따라 늘어나는 사각형 만들기

텍스트와 사각형을 cmd+g로 그룹을 만든 후

우측 메뉴의 패딩을 클릭해준다. 

우측메뉴에 패딩! 

---

객체 잠그기

cmd+l 

혹은 마우스 우클릭하면 각종 기본 어레인지 메뉴가 있다. 

(앞으로 보내가 뒤로보내기....자르기,,복사,,) 

 

---

이미지 넣기와 수정

구성요소(component)된 상태에서 대지로 드래그해도 구성요소가 복사된다. 

이미지를 이미지 박스 (사각형으로 만들면 됨)에 드래그 하면 

같은 구성요소를 복사한 이유로 동일하게 이미지가 복사된다. 

 

다른 이미지를 선택해서 드래그 하면 수정할 수 있다. 

 

 

이미지를 더블클릭하면 마스킹된 위치를 옮길 수있다. 

사이즈도 확대할 수 있다.  

(cmd를 눌러서 이미지박스만 개별로 선택한 뒤 더블클릭) 

 

 

---

메인 컴포넌트와 하위 컴포넌트의 구별 

드래그해서 가지고온 하위 컴포넌트는 구별할 수 있다. 

구성요소를 클릭했을때 좌측 모서리 다이아몬드의 컬러가 꽉차있으면 메인 

비어 있으면 하위 컴포넌트다 

---

 

스크롤 그룹 옵션 scroll grup option 

이미지, 컴포넌트를 횡스크롤하기 

 

횡스크롤될 이미지를 나열하고 cmd+g로 그룹화

우측 메뉴 가운데 스크롤 그룹 옵션 클릭

횡 스크롤 버튼눌러서 설정 (세로, 멀티 스크롤 옵션도 있음)

그리고 프리뷰버튼을 눌러서 확인해보면 됨. 

 

스크롤된 상태에서 일부만 보이는데 아무곳이나 더블클릭하면 펼쳐진다. 

 

 

---

state 수정

 

구성요소 하나를 클릭하고

우측 구성요소 중 기본상태에서 +버튼을 누르면 선택됨, 마우스오버 등 선택 시 변환되는 디자인을 정의할 수 있다. 

 

테두리 외곽선을 넣어서 선택을 표시해본다. 

 

cmd를 눌러서 가장 밑의 사각형을 선택해야함

선택 후 테두리 옵션으로 테두리를 준다. 

프로토타입 탭으로 이동해서 전환 메뉴를 설정한다