팔레트
필요한 기능을 쉽게 찾기 위해선 Quick Actions를 눌러 검색해서 기능을 찾을 수 있다.
하나하나 기능을 찾으러 다니는 것 보다 모든 기능을 볼 수 있는 이 퀵 액션을 사용하면 쉽게 여러 기능을 사용할 수 있으므로 quick actions의 단축키를 외워두자!
❗️ 단축키는 각 운영체제마다 다르므로 피그마에 적혀있는대로 사용하면 된다.
정렬
간격이나 가로 세로에 대해 정렬을 할 때는 어떤 속성을 사용하여 쉽게 정렬 할 수 있을까?
정렬하고 싶은 요소들을 드래그 한 후오른쪽 사이드바에 나오는 Position 속성을 사용하면 쉽게 한번에 정렬 할 수 있다.
가로 세로 균등 분할 & 정리정돈
위의 사진과 같이 가운데에 아이콘을 균등 분할 하여 가운데에 위치하도록 하고싶다.
이 때는 position의 속성 중 더보기 칸에서 Tidy Up을 선택하면 가운데에 위치하며 균등 분할이 되도록 설정된다.
이미지 불러오기
간단하게 화면에 이미지를 드래그하여 가지고 오면 된다!
색상 표 (색상 추출)
디자이너가 개발자들에게 자신이 사용한 이미지나 페이지의 색상에 대해서 알려주기 위해서는 어떻게 할까?
색상 표를 만들어 이 곳에 사용된 색을 알려준다면 개발자들은 이 색을 복사해 쉽게 사용할 수 있다.
그렇다면 피그마로 이러한 색상 표를 만드려면 어떻게 해야할까?
우선 색상을 넣을 박스를 만든다. 각 박스 안에 다른 색상을 채워넣고 내가 원하는 크기로 조절한다.
❗️ 그 후 command+k 라는 퀵 액션을 눌러 pick color 를 검색하고 내가 원하는 색을 클릭하여 추출한다.
❗️ 내가 채워넣을 박스를 클릭한 후 채워넣을 색상이 있는 부분을 pick color로 클릭하면
색상 박스의 색이 내가 클릭한 색으로 채워진다.
한번에 요소들 이름 바꾸기
shift 키를 누른 후 바꾸고 싶은 요소들을 모두 드래그 한 후 우클릭으로 rename을 선택하거나 (맥 기준) command+R을 선택하면 쉽게 한번에 쉽게 이름을 바꿀 수 있다.
이름에 통일성을 주고싶다면 원하는 요소의 이름을 작성한 후 current name을 클릭하면 밑의 사진과 같이 내가 원하는 요소의 이름 + 현재 이름으로 제대로 바뀐 것을 알 수 있다.
비슷한 맥락으로 Number 버튼을 선택하면 아래와 같이 나타나는 것을 볼 수 있다.
그 후 이 요소들을 다시 드래그 하여 우클릭 --> 그룹으로 묶으면 한번에 속성을 묶을 수 있다.
그룹화
요소들을 하나로 묶을 때에는 auto layout을 사용하여 hug 속성으로 바꿔야 안의 요소들이 삐져나오거나 정렬 안되는 것을 막고 원하는대로 스타일링을 할 수 있다.
프레임
프레임 >>>> 그룹
css의 flexbox처럼 사용 가능
Auto layout
flex-wrap 쓸 수 있어서 콘텐츠 어떻게 갖는지에 따라 유연하게 배치 가능
