Lesson 11

협업과 코멘트 — 팀과 함께 디자인하기

3 min Views 1

실무에서 디자이너, 기획자, 개발자가 Figma 안에서 어떻게 소통하는지 배운다. 코멘트 달기, 멀티플레이어 편집, 버전 히스토리, 브랜치, 팀 라이브러리 공유까지 협업의 전체 흐름을 익힌다.

이번 강에서 배울 것

  • 코멘트 달기 — 위치 기반 피드백 주고받기
  • 멀티플레이어 — 실시간 동시 편집
  • Version History — 과거 버전으로 되돌리기
  • Branch — 실험적 작업 안전하게 분기
  • Team Library — 팀 전체에 컴포넌트/스타일 공유

코멘트(Comment) 시스템

코멘트 달기:
단축키: C → 화면 특정 위치 클릭 → 피드백 입력 → Enter

멘션:
코멘트 입력 중 @ 입력 → 팀원 이름 검색 → 알림 발송

답글:
기존 코멘트 클릭 → Reply → 스레드 방식으로 대화 이어가기

해결:
코멘트 우측 체크 아이콘 → Resolve (완료 표시)
Resolved 코멘트는 패널에서 필터링 가능

코멘트 보기:
상단 툴바 말풍선 아이콘 → Show/Hide Comments
Sidebar Comments 패널: 전체 코멘트 목록 확인

멀티플레이어 실시간 협업

동시 편집:
같은 파일에 여러 사람이 접속하면 커서가 이름과 함께 표시
각자 다른 프레임 작업 시 충돌 없이 편집 가능

다른 사람 화면 따라가기:
상단 아바타 클릭 → "Follow [이름]"
→ 해당 사람의 화면 이동을 실시간으로 따라감
→ 온보딩, 발표, 리뷰에 유용

Observation Mode:
편집 없이 조용히 참관 (아무 클릭 없이)

주의사항:
같은 요소를 동시에 편집하면 마지막 저장이 반영
중요한 작업은 서로 구역을 나눠서 진행

Version History — 버전 관리

자동 저장:
Figma는 변경사항을 자동으로 저장하고 버전 히스토리 유지
무료: 30일치 히스토리
유료(Professional): 무제한

버전 히스토리 접근:
File 메뉴 → Show Version History
또는 Ctrl+Alt+S

버전 이름 저장:
주요 작업 완료 시: File → Save to Version History
이름 지정 (예: "로그인 화면 1차 완성 - 2024.12.01")

이전 버전 복원:
Version History 패널에서 버전 클릭 → 우클릭 → Restore Version
또는 Duplicate to new file로 복사 후 참고

실무 팁:
클라이언트 피드백 전 반드시 버전 저장
"클라이언트 검토 전", "개발 이관 완료" 등 마일스톤 이름으로 저장

Branch — 실험적 작업 분기

Branch 생성 (Professional 플랜 이상):
상단 파일명 옆 드롭다운 → New Branch
이름 지정 (예: "홈 화면 리뉴얼 실험")

Branch 작업:
Main 파일에 영향 없이 자유롭게 수정
Branch 아이콘으로 현재 Branch 확인

Merge Branch:
작업 완료 → Review and Merge → 충돌 해결 → Merge
결과: Main 파일에 반영

Delete Branch:
필요 없어진 Branch 삭제 (Main에 영향 없음)

활용 시나리오:
- A/B 테스트 디자인 비교
- 대규모 리뉴얼 시 현재 버전 보존
- 팀원별 작업 독립 진행

Team Library — 팀 컴포넌트 공유

Library 발행:
Assets 패널(Ctrl+Alt+O) → 팀 아이콘 → Publish
→ 현재 파일의 모든 컴포넌트, Color Style, Text Style 팀 공유

다른 파일에서 가져오기:
Assets 패널 → Libraries 아이콘 → 팀 라이브러리 Enable 토글
→ 팀의 컴포넌트를 다른 파일에서 드래그 앤 드롭으로 사용

라이브러리 업데이트:
원본 컴포넌트 수정 후 재발행 → 사용 중인 파일에 Update 알림
→ "Update" 클릭 → 모든 파일의 Instance 일괄 업데이트

효율적인 팀 구조:
Design System 파일: 컴포넌트, 스타일만 관리 (Library 파일)
Product 파일: Design System Library 구독하여 컴포넌트 사용
→ 디자인 시스템 변경 시 모든 제품 파일 자동 업데이트

실무 협업 워크플로우

단계담당자Figma 활용
기획PM와이어프레임 코멘트로 요구사항 전달
디자인디자이너Branch에서 실험, Main에 Merge
검토PM+클라이언트Share Prototype 링크로 피드백 코멘트
수정디자이너코멘트 Resolve 처리하며 수정
이관디자이너+개발자Inspect 탭으로 스펙 확인 (다음 강)
QA개발자구현 화면 vs 디자인 비교 코멘트

강의 핵심 요약

  • 코멘트 + 멘션으로 화면 위에서 직접 피드백 — 이메일/슬랙 왕복 불필요
  • Version History로 중요 시점 버전 저장 및 복원 가능
  • Team Library로 컴포넌트 1회 수정 = 팀 전체 파일 일괄 업데이트
  • 다음 강(최종): Inspect 탭과 개발자 핸드오프 완전 정복

관련 검색어  ·  피그마 협업, 피그마 코멘트, 피그마 멀티플레이어, 피그마 버전 히스토리, 피그마 Branch, 피그마 Team Library, 피그마 디자인 시스템 공유

채용정보
공지사항
인사이트
MY