Figma에서 페이지를

Figma의 Pages는 하나의 파일 안에서 작업을 목적별로 나누어 정리하는 유연한 구조다. 글은 플랫폼, 기능, 디자인 단계, 원자적 디자인 방법론에 따라 Pages를 구성하는 네 가지 방식을 소개하며, 팀 규모와 프로젝트 특성에 맞는 체계를 선택하라고 제안한다. 적절히 나누면 협업, 프로토타이핑, 검색, 개발자 전달이 쉬워진다.

Pages를 활용한 파일 구조화

• Figma 파일의 왼쪽 탭에 여러 Pages를 만들어 디자인을 분류할 수 있다.
• 조직 방식에는 정답이 없으며 회사, 팀, 개인의 작업 방식에 따라 달라진다.
• 디자인 파일을 무작정 한 곳에 쌓기보다 작업 목적에 맞게 구분하면 정리보다 디자인 자체에 집중할 수 있다.

플랫폼 또는 화면 크기별 구성

• Android, iOS, 데스크톱처럼 여러 플랫폼을 지원하는 제품에 적합하다.
• 플랫폼별로 Page를 나누면 각 환경의 프레임 프리셋과 제약 조건을 적용하기 쉽다.
• 각 Page에 독립적인 프로토타입을 구성할 수 있어 플랫폼별 사용자 테스트가 간편하다.
• 반응형 디자인을 플랫폼별로 비교하고 관리하기에도 유리하다.

앱 기능별 구성

• 여러 디자이너가 다양한 기능을 동시에 개발하는 대규모 앱에 적합하다.
• 프로필, 홈 화면 등 제품의 주요 기능을 각각 별도의 Page로 분리한다.
• 담당 디자이너는 특정 기능에 집중하면서도 다른 Page를 참고해 전체 제품과의 일관성을 유지할 수 있다.
• 기능별로 별도의 프로토타입을 만들어 특정 사용자 흐름만 독립적으로 테스트할 수 있다.

디자인 프로세스 단계별 구성

• 아이디어부터 최종 결과물까지 작업 진행 상태를 명확히 보여줄 수 있다.
• 예를 들어 다음과 같이 Page를 구성할 수 있다.
  • 썸네일 → 와이어프레임 → 디자인 → 아카이브
  • 문서·리서치 → 작업 중인 시안 → 리뷰 준비
  • 사이트맵 → 와이어프레임 → 목업 → QA → 마케팅용 스크린샷
• Done Page에 완료된 디자인을 모으면 개발자는 실제로 구현해야 할 결과물을 쉽게 확인할 수 있다.
• 초기 아이디어와 브레인스토밍을 별도 Page에 두면 완성도 높은 화면이 작업 중인 시안에 묻히지 않는다.
• 팀이 복잡한 체계를 원하지 않는다면 단순히 “진행 중”과 “완료” 정도로 나누는 방식도 가능하다.

Atomic Design 방법론에 따른 구성

• 디자인 시스템을 원자적 디자인 방식으로 운영할 때 적합하다.
• 구성 요소의 계층에 따라 Page를 분리한다.
  • Atoms: 타이포그래피, 아이콘 등 기본 요소
  • Molecules: 버튼 등 조합된 컴포넌트
  • Organisms: 전체 페이지처럼 복잡한 구성
• Team Library에서 Page 이름을 기준으로 컴포넌트를 찾기 쉬워진다.
• 레이어 이름에 컴포넌트 유형을 반복해서 넣지 않아도 된다.
  • 예: button-selected, button-hovered 대신 selected, hovered처럼 상태만 이름에 표시
• 결과적으로 레이어 패널이 단순해지고 컴포넌트 검색과 관리가 쉬워진다.

프로젝트의 핵심 기준을 먼저 정한 뒤 Pages를 구성하는 것이 좋다. 여러 플랫폼을 지원하면 플랫폼별로, 협업 규모가 크면 기능별로, 개발 전달이 중요하면 프로세스 단계별로 나누고, 디자인 시스템 중심이라면 Atomic Design 구조를 적용하면 된다.