[피그마] 퍼블리셔가 피그마 사용하기

작업환경: 윈도우

 

 

 

 

 

 

 

기존의 글 퍼블리셔가 제플린 사용하기에 이어 피그마 사용하기를 정리했다.
사실 피그마는 제플린보다 더 간단하다!

디자이너가 작업해 놓은 피그마 대지를 열어서
원하는 이미지를 자르고, 추출하고,dev 환경에서 스타일을 보면 끝이다.

 

 

 

 

 

---

 

 

 

 

 

자주쓰는 단축키

ctrl + shift + \       : 왼쪽 사이드 네비 on/off
ctrl + \                   : 왼쪽,오른쪽 사이드 네비 on/off
shift + 0                : 100% 화면 보기
alt + shift + A       : 오토 레이아웃 해제
shift + D               : 개발자 모드

 

 

 

 

 

 

---

 

 

 

[ Design Mode ]

 

 

 

 

이미지 슬라이스

 

보통 이미지 추출할 때 Export로 하지만, 내가 원하는 스타일을 입히기 위해 디자인 되어져 있는 이미지 이상의 것이 필요할 때가 있다.

 

제플린에서는 해당 기능이 없어서 매번 디자이너에게 요청을 하거나 내가 디자인 파일을 수정해서 Export를 해야 했었다면, 피그마에서는 바로 포토샵처럼 슬라이스를 할 수가 있다.

 

 

 

 

 

 

주의할 점은, 슬라이스 후에 해당 레이어를 선택한 뒤 Export를 해야 하기 때문에,

아래 이미지와 같이 슬라이스된 레이어를 잘 봐야한다.

 

 

왼쪽 네비 > 레이어 > 슬라이스

 

 

 

 

우측 네비 > Export 옵션들

 

 

 

 

 

 

---

 

 

 

 

컴포넌트 사이의 길이 구하기 1

 

컴포넌트 사이의 길이를 구할 때는 alt를 누른 상태에서 다른 컴포넌트 위로 마우스를 올리면 된다.

이 때, 컴포넌트를 선택해서 움직이면 복붙이 된다.

 

추가로 shift + alt 를 누른 상태로 움직이면 같은 그리드에서 복붙이 된다.

 

 

 

그냥 선택했을 때

 

 

 

alt 키를 누르고 마우스를 올렸을 때

 

 

 

 

 

 

---

 

 

[ Dev Mode  / pro ]

 

 

 

컴포넌트 사이의 길이 구하기 2

 

 

 

 

dev모드에서 자를 선택하고 레이어 사이를 드래그하면 사이 너비를 알 수 있다.

 

 

 

 

 

 

레이어 위치를 옮기면 자로 잰 여백도 같이 변한다. 

다시 자로 잴 필요가 없다.

 

 

 

 

 

---

 

 

 

 

컴포넌트 프로퍼티 보여주기

 

 

 

 

dev모드 세번째 버튼을 누르면 위처럼 프로퍼티를 등록하는 창이 뜬다.

 

 

 

 

 

 

프로퍼티를 선택하면 위와 같이 등록이 된다.

이는 주로(나는) 디자이너가 수정한 내용을 체크하면 참고하는 용도로 사용한다.

 

 

 

 

 

 

 

---

 

 

 

 

현재는 이정도면 작업하는데 문제가 없지만, 추후 작업하면서 팁들이 생기면 계속 추가해야겠다.