피그마 기초 완전 정복 - 협업 및 공유

1. 오늘 학습 키워드

- 디자인 핸드오프

- 디자인 공유하기

---

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

 

<핸드오프 (Hand-off)>

- 개발자에게 전달하기 위해 디자인 사양을 정리한 문서

- 자세하게 작성해야 의도한 디자인이 실제 개발 과정에서도 동일하게 구현 가능해짐

https://www.designsystemsforfigma.com/blog/design-to-engineering-handoff

 

 

핸드오프 작성 원칙

• 통일된 구성
  - 어떤 디자인을 설명하더라도 일관된 목차와 구성으로 정리함
  -  문서 구조가 통일되어야 전달과 이해가 쉬움
  
  
• 최대한 자세하게 적기
  - 디자인 목적, 구조, 제작 방법을 구체적으로 작성함
  - 처음 보는 사람도 이해할 수 있도록 설명함
  
  
• 쉬운 언어로 표현하기
  - 디자이너만 아는 표현보다 쉬운 말로 풀어서 작성함
  - 개발자, 기획자도 이해할 수 있도록 설명함

 

핸드오프의 구성

- 실제 개발에 필요한 가이드라인이다보니, 구성이 어느정도 정해져 있음

1. 디자인의 전체적인 구조
2. 각 프레임의 크기 및 길이
3. 각 프레임의 여백 및 간격

4. 사용된 폰트 및 컬러 스타일 등

- 예시

1. 버튼을 화면 하단에 고정한다고 생각했지만 문서에 작성하지 않음

2. 개발자는 일반 버튼으로 이해하고 스크롤 시 함께 움직이도록 구현함

3. 결과적으로 의도와 다른 화면이 만들어져 추가 수정이 발생함

 

 

 

핸드오프 문서 생성하기

 

플러그인 - DesignDoc[Spectral]

주소 - figma.com/community/plugin/1177722582033208360/designdoc-spectral-measures-annotations-and-handoff

→ 선택한 디자인의 핸드오프를 자동으로 만들어주는 플러그인

 

 

 

<디자인 정리하기>

 

 

 

<디자인 공유하기>

- 피그마 파일을 공유하는 방법은 다양함
- 기본적으로링크를 공유하는 방식임
- 파일 자체의 링크 공유, 특정 페이지나 특정 프레임의 링크 공유도 가능함

1. 피그마 파일 링크 공유하기

 

1. 디자인 파일 우측 상단의 공유하기(Share)를 클릭하기
2. 링크 복사(Copy link)를 클릭하기

 

 

2. 프로토타입 공유하기

 

1. 디자인 파일 우측 상단의 재생 버튼을 클릭하기

2. 프로토타입 공유(Share prototype)을 클릭하기

3. 링크 복사(Copy link)를 클릭하기

 

 

3. 특정 페이지나 프레임 공유하기

 

1. 공유하고자 하는 페이지나 프레임에 마우스 우클릭 하기
2. 복사/붙여넣기(Copy/Paste as)에서 선택 항목 링크 복사(Copy link to selection)를 클릭하기

---

3. 학습하며 겪었던 문제점 & 에러

1) 

 학습 과정 도중 핸드오프 문서를 어느 정도 수준까지 상세하게 작성해야 하는지 궁금했다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 개발자가 추가 질문 없이 구현할 수 있을 정도로 디자인 의도와 동작 방식을 구체적으로 작성해야 한다는 점을 알게 되었다. 또한 위치 고정 여부, 상태 변화, 간격, 예외 상황 등 구현에 영향을 주는 정보는 반드시 포함해야 한다는 점을 이해했다.

2)

 학습 과정 도중 디자인 공유 과정에서 발생할 수 있는 문제가 무엇인지 궁금했다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 잘못된 권한 설정으로 파일을 열지 못하거나, 수정 권한과 보기 권한이 혼동될 수 있다는 점을 알게 되었다. 또한 오래된 링크를 공유하거나 다른 버전의 파일을 전달하면 협업 과정에서 혼선이 발생할 수 있다는 점을 이해했다.

3)

 학습 과정 도중 피그마 파일 링크와 프로토타입 링크의 차이가 무엇인지 궁금했다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 피그마 파일 링크는 디자인 원본 전체를 확인할 수 있는 링크이며, 프로토타입 링크는 사용자가 실제 앱처럼 화면 이동과 인터랙션만 체험할 수 있는 링크라는 점을 알게 되었다. 따라서 두 링크는 공유 목적과 제공되는 정보가 다르다는 점을 이해했다.