해당 글은 피그마 협업을 위해 필요한 아주 기초적인 내용들을 다룹니다. 사실 사이드 프로젝트에서 개발자들에게 전달했던 노션의 백업 용도에 가깝습니다. 기획자와 디자이너의 입장에서 작성되었음을 알립니다.
비트맵 이미지로 복사하기
Ctrl+Shift+C를 통해 벡터 데이터인 피그마 프레임을 비트맵화하여 복사-붙여넣기 할 수 있습니다. 노션, 슬랙, 카톡 등 이미지 확장자 파일 전송을 지원하는 모든 플랫폼에 적용되는 방식이니, 알아두면 협업이 매우매우 편해집니다.
가령, 피그마에서 Ctrl+C 후 노션에 Ctrl+V는 불가능하지만, 피그마에서 Ctrl+Shift+C 를 한다면 가능합니다.
개발자모드
Shift+D를 통해 개발자모드에 진입하여 컴포넌트들의 Inspects 등을 확인할 수 있습니다. 이는 유료 기능이나 교육계정을 통해 해당 기능을 사용할 수 있습니다.
Ready for devs
말그대로 개발 준비가 완료되었다(=디자인이 끝났다) 는 사인을 보내는 기능입니다.
Ready for devs 기능을 활용하면 핸드오프 과정에서 발생하는 휴먼 리소스를 대폭 줄일 수 있습니다.
Compare History
말 그대로 이전 버전과 비교하여 프레임내에 무엇이 바뀌었는지 알려주는 기능입니다. 위의 초록딱지(Ready for devs) 가 활성화된 프레임이 있다면 아래 가이드를 따르면 됩니다.
데이터필드 연동
위와 같이 특히 기획단에서 수정이 잦은 경우 용이합니다.
피그마에서도 데이터 필드를 연동하는 기능이 있다! 는 정도만 알아두면 편합니다. 서비스 기획에서 짜준 스프레드 시트 등을 연동할 때에, 길고 다양한 데이터들로 인해 필드가 터져나가거나 다양한 Variation 화면이 필요한 경우가 있습니다. 이 때, 피그마에도 데이터 연동이 가능하니 상황에 따라 자세한 내용은 아래 글을 참고해주세요.
엑셀 복붙에서 벗어나기: 피그마 Google Sheet Sync 활용법
이 글은 다국어를 예시로 들었으나, 번역 플러그인을 활용하는 것이 아니다. 별도로 번역본이 정리된 엑셀 등의 데이터시트가 있다는 전제 하에 그것을 와이어 프레임에 빠르게 불러오는 방법
notseoul.tistory.com
디자인 토큰 확인하기
디자인 모드에서 아무 리소스를 선택하지 않은 상태(아무데나 빈 화면 선택)로 Local variables 확인할 수 있습니다.
화면 프로토타입 빠르게 확인하기
프레임을 선택한 채로 Shift+Space 로 진입할 수 있습니다. 단, 디자이너가 프로토타입을 미리 만들어둔 경우에만 가능합니다. 디자이너가 플로우를 설정해 둔 경우에는 Figma 어플리케이션을 통해 휴대폰 미러링도 가능합니다.
프레임 바깥의 내용물 확인하기
대부분의 화면에서 프레임보다 내용물이 많아 넘치기 때문에 디자이너가 임의로 Clip해두는 경우가 있습니다. 혹시 프레임 바깥의 잘린 화면이 궁금하다면 Clip content를 해제해주세요. 하지만 이 부분은 디자이너와 미리 이야기 해두는 편이 좋습니다.
개발자 모드에선 안되니 Shift+D를 눌러 디자인 모드를 확인하고 시도해주세요
