[피그마 사용법] 오토레이아웃 단축키 및 여백 주기

웹에서 요소를 클릭할때, 정확하게 그 요소를 클릭하지 않아도 클릭 처리를 해야한다. 작은요소라면 더더욱이 필요하다. 내가 원하는 요소가 클릭이 쉽지 않다면, 사용자는 불편함을 느끼고 다른 사이트를 이용할 것을 예측할 수 있다.

쉽게 클릭하기 위해서 요소에 패딩값을 설정해주어야 한다.

(패딩이 설정된 여백을 클릭하더라도 해당 요소에 들어갈 수 있게 만들어 주어야 한다.)

기본적으로 디자인 패널의 우측 TEXT 영역에 양쪽을 가르키는 화살표가 선택되어있을 것이다. 패딩이 설정되지 않은 순수한 텍스트 크기에 맞게 설정된 값이다.

패딩을 주기 위해서 해당 요소를 클릭한 뒤

SHIFT+A를 클릭하여 오토레이아웃(패딩)이 설정되는 것을 확인한다.

사각형 안 사각형이 들어간 아이콘 우측에 표시된 '10'을 확인할 수 있다.

10만큼의 패딩이 설정되었다는 의미이다.

또는 ALT를 이용하여 어느정도의 여백이 설정되었는지 확인할 수 있다.

단, 컴포넌트화 된 요소에는 패딩을 적용할 수 없다. 컴포넌트화 하기 전 패딩을 설정할 것. (라고 말하지만 사실상. 이게 가장 어렵다......... ㅎ.. 레이아웃은 쉽게 수정될 여지가 많으니)

전체적으로 오토레이아웃이 된 모습을 확인할 수 있다.

여백을 선택하더라도 해당요소에 접속할 수 있다.

'메일'요소의 패딩을 선택하더라도 메일 URL 로 접속한다.