핸드오프란? 디자인 단계에서 개발 단계로 전달하는 과정을 뜻합니다. 피그마가 인기 있는 이유 중의 하나입니다.
기존 디자인 툴들은 핸드오프 과정에서 많은 작업들이 필요했습니다.
디자인팀은 개발팀에게 대량의 디자인 이미지와 추출한 애셋파일 그리고 여러 페이지의 워드 문서를 첨부해서 공유 했습니다. 거기에 디자인 파일에 접근하기 위해 비싼 디자인 소프트웨어의 라이센스가 필요했습니다. 그리고 디자인이 새롭게 업데이트 되면 관련된 모든 사람에게 변경 내용을 공유해야 했습니다.
물론 피그마 이전에 제플린, 인비전 같은 툴의 발전으로 이전보다 과정이 간소화 되고, 개발자들이 디자인파일에 대해 더 좋은 접근 권한을 가지게 되었습니다. 사용자들이 최신 버전의 디자인을 쉽게 찾을수 있게 되었지만 디자이너들은 아직도 별도의 툴을 써야 했고 최신 버전을 맞추기 위해 추가적인 작업이 필요했습니다.
그러나 피그마는 피그마 하나로 전체 디자인, 이미지 파일, 폰트, 간격, 사용자 인터렉션 등 많은 것들을 전달 할 수가 있습니다. 또한 코멘트를 주고 받을수도 있습니다.
피그마 더 알아보기
처음 피그마를 접하게 되면 브라우저로 열지, 데스크탑 용 앱을 다운로드 할지 선택 할 수 있습니다. (윈도우용, 맥OS용 모두 지원하고 있습니다.)
데스크탑용 앱은 네이티브로 개발된 것은 아니고 크로스 플랫폼을 지원하는 일렉트론 앱 입니다. 브라우저와 데스크탑 버전의 기능은 데스크탑 앱은 로컬 폰트 지원이 내장되어 있는 반면 브라우전 버전은 로컬 폰트를 사용하기 전에 피그마 폰트 도우미(Figma Font Helper)를 설치 해야 한다는 것을 제외하면 대부분 동일합니다.
피그마의 인터페이스는 크게 세 부분으로 나뉘어 있습니다.
왼쪽에는 레이어와 에셋, 파일의 페이지를 볼수 있는 '사이드바 영역'
가운데는 디자인의 모든 요소가 놓이는 '캔버스 영역'
오른쪽에는 파일요소에 대한 정보를 볼수 있는 '툴바 영역'으로 나눌 수 있습니다.
파일은 여러개의 페이지로 구성 될 수 있으면 모든 페이지는 한 개의 캔버스로 구성됩니다. 디자이너의 따라 종종 디자인 시스템, 아이콘, 에셋파일들을 별도의 페이지로 만들어서 내용을 정리할 수도 있습니다.
기본사용 방법
파일을 열면 캔버스 영역에 프레임의 맞게 가장 크게 확대된 비율로 디자인이 보입니다.
화면 확대/축소는Cmd ⌘(ctrl) + 마우스 휠을 하거나 + 나 - 키를 눌러서 할 수 있습니다.
화면 이동은 스페이스바 + 마우스 드래그로 할 수 있습니다.
빠른 확대는 단일 프레임이나 요소를 선택한 상태에서 Shift + 2 를 누르면 됩니다.
캔버스에 모든 요소가 보이도록 하는 빠른 전체화면은 Shift + 1 을 누르면 됩니다.
그외 단축키 들은 Ctrl + Shift + ? 를 눌러서 확인 할 수 있다. 좋은점은 내가 사용했던 단축키들이 불이 들어와서 처음 사용해보지 않은 단축키들을 알아볼 수 있다는 점이 좋습니다.
이미지 추출
피그마에서는 다양한 파일 형식으로 이미지를 추출 할 수 있다. 원하는 요소를 선택하면 오른쪽 툴바 영역에서 요소에 대한 정보들이 뜹니다. 그 중 아래에 있는 내보내기(export) 버튼을 통해서 저장 할수 있습니다. 또한 이미지를 배수로 저장할 수도 있고, 파일 유형을 선택 할 수 있습니다.
원하는 요소를 오른쪽 클릭해서 빠르게 추출 할 수 도 있고, 오른쪽 클릭 후 표시되는 Copy/Paste 메뉴에서 선택해서 이미지나 SVG 코드로도 복사할 수 있습니다.
추출 가능한 모든 이미지를 한 번에 내보낼 수도 있습니다. 왼쪽 상단의 피그마 메인메뉴 > File > Export 를 클릭하거나
Shift + Cmd ⌘ + e 누르면 됩니다.
그럼 파일에서 추출할 애셋으로 표시한 모든 애셋 항목이 목록으로 표시됩니다. 표시된 목록의 이미지 파일 유형과 수치를 확인 하고 필요없는 파일은 제외 할수 있으며, 썸네일 이미지에 마우스를 올려놓으면 저장 할 때의 파일명과 유형을 확인 할 수 있습니다.
디자인 요소 정보 확인
디자인 요소를 클릭하면 최상위 단계의 요소만 선택됩니다. 특정 레이어를 선택하려면 Cmd ⌘ 를 누른 상태에서 클릭하거나 요소를 오른쪽 클릭해서 모든 중첩된 레이어를 볼 수 있는 메뉴를 열어 원하는 레이어를 선택 할 수 있습니다.
만일 요소를 더블 클릭하면 더블 클릭할 때마다 한 단계 아래의 요소가 선택됩니다. 원하는 항목을 선택할 때까지 계속 들어갈 수 있습니다. 요소를 선택하면 오른쪽 툴바영역에서 Inspect에 Code에서 선택한 요소에 대한 CSS 정보를 볼 수 있습니다. CSS 정보는 자동으로 생성되는 것으로 표시되는 정보가 정확하지 않을 수 있으니 가이드 정도로 이용하는 것이 좋습니다.
요소들의 간격 확인
디자인 요소와 요소 사이의 거리를 측정하고 싶을때는 시작점의 요소를 선택한 후 Option(Alt) 키를 누른 상태로 마우스를 다은 요소에 올리면 치수를 측정할 수 있습니다.
Measuring distance between elements
피그마는 요소 사이의 거리를 빨간 선으로 표시하고 거리를 픽셀 단위로 보여줍니다. 다른 그룹 또는 프레임의 특정 하위 요소 까지의 거리를 측정하려면 해당 내부 요소를 선택하는 것과 마찬가지로 Cmd ⌘ 키를 누르면 됩니다.
코멘트 기능
코멘트 기능을 활용하여 디자이너와 소통 할수 있습니다. 상단 툴바에 있는 채팅버플 모양의 아이콘을 클릭하거나 C 를 눌러서 코멘트를 달수 있습니다. 클릭한 상태에서 드래그 하면 영역을 지정해서 코멘트를 달수도 있습니다.
코멘트를 모두 작성하고 나면 V 또는 Esc 를 눌러서 다시 일반 커서 모드로 돌아오면 됩니다. 댓글을 달때 알림을 원한다면 @ 를 활용해서 멘션을 달아주면 됩니다.
코멘트를 읽고 더 이상 필요없거나 구현이 완료되면 완료(resolve) 표시를 눌러서 코멘트가 쌓이는 것을 방지 할 수 있습니다.
