by
Jul 11. 2023
피그마 파일 관리 기법_v 1.1
서비스 기획자가 피그마 파일을 관리하는 방법
업데이트이력
- v1.1 / 24-09-13
- v1.0 / 23-07-11
인트로
27주 차 회고록의 #3의 내용처럼 피그마로 기획서를 제작하는 것에 앞서, 피그마로 파일(문서)을 어떻게 관리할 것인지에 대해 정리해 보았다.
모쪼록 이 기법들은 내가 피그마를 사용해 오면서 이렇게 관리할 수 도 있을 텐데라고 생각하던 것들을 정리한 만큼 실제 사용성에 대해서는 고려되지 못한 부분이 분명 있을 것이다. 이 부분은 사용하면서 차차 채워나가고 업데이트할 생긱이다 . 혹시 이 기법들을 도입하는 분들이 생긴다면 함께 고민을 나눠봐도 좋을 듯하다.
노션에서 최신 버전을 관리하고 있다. 노션에서 확인하는 것도 추천(하하) ☞ 피그마 파일 관리 기법_v 1.0
1. 개요
피그마는 디자이너와 개발자의 협업을 주 목적으로 나온 디자인 전용 툴이다. 그럼에도 불구하고 기획서 등 문서를 피그마로 만들고 관리해야 할 일이 많기 때문에, 이를 효율적으로 관리하기 위한 관리 기법을 정의하고 개선하고자 한다.
2. 목표
피그마로 기획서를 관리하는 기법을 정의하고, 각 기법별 특징/장점/단점/예시를 정리한다.
3. 고려사항
- Professional 플랜 결제한 계정을 전제로 한다. (Team libraries, Projects 사용을 위함)
- 피그마는 Axure처럼 폴더 트리를 만들 수 없다. 단, Team 내에 프로젝트(폴더 역할)를 생성해 Project 안에서 다수의 피그마 파일을 관리할 수 있다.
- Jira 플러그인을 통한 업무에 대한 Sync 조정 등은 기법과 별개로 Ground rule을 정하고 공통 적용한다.
- Ready for Dev나 섹션별 문서, 스토리보드 등의 정리 방식은 기법과 별개로 Ground rule을 정하고 공통 적용한다.
- 디자인 산출물의 경우 디자이너가 따로 별개의 피그마 파일에서 최신 버전을 관리하는 것이 좋으며, 이 기법은 개발 협업을 위한 기획서를 관리에 집중한다.
- 문서 내에서 화면설계시, 디자이너가 만든 디자인 시스템의 컴포넌트를 사용하거나 공통된 디자인 키트의 컴포넌트를 사용해 제작한다.
디자인 키트 예시 ☞ MUI, LITHIUM DESIGN SYSTEM, Design Systems For Figma, Ant Design Systems
4. 기법
4.1. 제품 개발 주기별 관리
주기별 파일 정리 기법이란 마일스톤, 스프린트와 같이 특정 주기를 기준으로 피그마 파일 기획서를 관리하는 기법을 의미한다.
4.2. 단위별 파일 관리
단위별 파일 관리 기법이란 프로덕트, 모듈, 버전, 기획서와 같이 특정 단위를 기준으로 피그마 파일 기획서를 관리하는 기법을 의미한다.
4.3. 정리
ⓒ작가편집4.4. 위계
피그마의 위계는 [팀 → 프로젝트 → 피그마 파일 → 파일 내 페이지 → 페이지 내 섹션]으로 이루어져 있다.
ⓒ작가편집
ⓒ작가편집5. 기법 상세 정리
5.1. 요약
ⓒ작가편집5.2. 주기별 관리 기법 종류
5.2.1. 마일스톤별 관리(예시 피그마)
- 마일스톤을 기준으로 피그마 파일을 생성하고 관리한다.
- 피그마 Project는 협업 관계자들의 공통 기준을 만들어 생성한다.
- 파일 내 Page는 스프린트별로 생성하고 관리한다.
- 페이지 내 Section은 기획서별 생성하고 관리한다.
5.2.2. 스프린트별 관리(예시 피그마)
- 스프린트를 기준으로 피그마 파일을 생성하고 관리한다.
- 피그마 Project는 마일스톤별로 생성한다.
- 파일 내 Page는 기획서별로 생성하고 관리한다.
- 페이지 내 Section은 장표별로 생성하고 관리한다.
스프린트별 파일 정리 ⓒ 327roy5.3. 파일별 관리 기법 종류
5.3.1. 프로덕트별 관리(예시 피그마)
- 프로덕트를 기준으로 피그마 파일을 생성하고 관리한다.
- 피그마 Project는 협업 관계자들의 공통 기준을 만들어 생성한다.
- 파일 내 Page는 아래 두 가지 중 한 가지 방법으로 관리할 수 있다.
→ 버전별로 Page를 생성하고 관리한다.
→ 모듈 혹은 기능별로 Page를 생성하고 관리한다.
- 페이지 내 Section은 스프린트, 기획서별로 생성하고 관리한다.
5.3.2. 버전별 관리(예시 피그마)
- 프로덕트의 버전을 기준으로 피그마 파일을 생성하고 관리한다.
- 피그마 Project는 마일스톤 등 주기를 기준으로 생성한다.
- 파일 내 Page는 기획서별로 생성하고 관리한다.
- 페이지 내 Section은 정책, 플로우, SB 등 장표별 생성하고 관리한다.
5.3.3. 기획서별 관리(예시 피그마)
- 기획서 단위로 피그마 파일을 생성하고 관리한다.
- 피그마 Project는 주기(마일스톤, 스프린트 등) 혹은 프로덕트의 기능이나 모듈 단위로 생성한다.
- 파일 내 Page는 기획서의 장표별로 생성하고 관리한다.
- 페이지 내 Section은 SB 장표를 제외하고 사용하지 않아도 무관하다.
5.4. 기타
5.4.1. 프로젝트별 관리
- 프로젝트별로 파일을 생성하고 관리한다.
- 프로젝트의 사이즈(기간 등)에 따라 주기별/단위별 파일 관리 기법의 내용을 혼합해 사용한다.
6. 참고 자료
#피그마 플랜
ⓒFigma#피그마의 팀과 프로젝트
ⓒ작가편집#아토믹 디자인 방법론
- Atomic Design Methodology
- [카카오 엔터] 아토믹 디자인을 활용한 디자인 시스템 도입기
- 특징 및 장단점
ⓒ Atomic Design Methodology