Figma 프로젝트 구조 모범 사례

이 문서는 Figma 파일을 보다 체계적이고 탐색하기 쉬우며 팀 협업에 최적화하는 데 도움이 되는 구조 및 명명 규칙에 대한 모범 사례를 제공합니다.

원본 Gist (opens in a new tab)

파일 구성

• 팀 및 프로젝트 구조:
  • 부서(디자인, 마케팅 등)를 팀으로 구성합니다.
  • 팀 내에서 제품, 기능 또는 디자인 프로세스 단계에 따라 프로젝트를 생성합니다.
• 파일 계층 구조:
  • 모든 프로젝트에서 일관된 구조를 유지합니다.
  • 각 파일에 버전 업데이트, 제목, 이모티콘 등 명확한 시각적 표시가 있는 커버를 만듭니다.
  • 파일을 논리적 섹션으로 나누기 위해 페이지를 사용합니다 (커버, 프로덕션, 컴포넌트, 아카이브 등).
• 다중 브랜드 조직:
  • 성능을 위해 파일당 하나의 컴포넌트를 유지합니다.
  • 별도의 UI 키트/브랜드 라이브러리 파일을 만듭니다.
  • 디자인 옵션(색상, 간격 등)을 위한 Foundations 파일을 설정합니다.

명명 규칙

• 레이어 명명:
  • "Rectangle 1"과 같은 기본 이름 대신 설명적인 이름을 사용합니다.
  • 일관된 대소문자 스타일을 선택합니다 (가독성을 위해 Title Case 권장).
• 컴포넌트 명명:
  • 컴포넌트 이름의 첫 글자는 대문자를 사용합니다.
  • 하이픈(-)으로 이름을 구분합니다 (예: Button-Primary).
  • 이중 밑줄(__)을 사용하여 변형을 정의합니다.
  • 슬래시(/)를 사용하여 요소별로 그룹화합니다.
  • 해당하는 경우 이름에 크기를 포함합니다 (예: icon-16-home).
• 파일 및 프레임 명명:
  • 목적을 나타내는 설명적이고 간결한 이름을 사용합니다 (예: Homepage-Mobile).
  • 일관된 구분 기호(하이픈 또는 camelCase)를 유지합니다.

레이어 구성

• 계층 및 그룹화:
  • 레이어 패널의 상단에서 하단 순서는 캔버스에서 앞에서 뒤로의 순서와 같습니다.
  • 명확한 계층 구조를 위해 프레임이나 그룹 내에 논리적으로 레이어를 중첩합니다.
  • 관련 요소를 함께 그룹화하여 관리를 용이하게 합니다.
• 가시성 및 제어:
  • 가시성 토글(눈 모양 아이콘)을 사용하여 특정 요소에 집중합니다.
  • 실수로 이동하거나 편집하지 않으려는 레이어는 잠급니다.

페이지 구조

• 효과적인 페이지 구성:
  • 대규모 프로젝트의 다른 섹션에 대해 별도의 페이지를 만듭니다.
  • UI 키트, 작업 중인 디자인, 최종 승인된 디자인, 프로토타입, 로컬 컴포넌트, 이전 버전 아카이브 등을 위한 전용 페이지를 만듭니다.
• 버전 관리:
  • 이전 디자인을 삭제하지 말고 아카이브 페이지로 이동합니다.
  • 이전 버전을 보존하기 위해 새 프레임에서 편집합니다(복사 후 편집).

성능 모범 사례

• 소규모 팀 (10명 미만):
  • 모든 컴포넌트를 한 페이지에 두는 대신 페이지당 하나의 컴포넌트를 사용합니다.
  • 모든 컴포넌트를 표시하기 위한 UI 키트 "쇼룸" 페이지를 만듭니다.
• 대규모 프로젝트:
  • 최상의 성능을 위해 파일당 하나의 컴포넌트를 사용합니다.
  • 대규모 프로젝트를 여러 페이지로 나눕니다.
  • 다중 브랜드 시스템의 경우 더 나은 복잡성 관리를 위해 Tokens Studio 사용을 고려합니다.