08. 실습 2: 라이브러리 만들기

Note

이 문서는 Figma 라이브러리를 직접 만들고 관리하는 실습 가이드입니다. 라이브러리란?에서 배운 내용을 바탕으로 진행됩니다.

8.1. 실습 목표

디자인 시스템 파일 준비: 이전 실습에서 만들었던 컴포넌트(버튼, 카드 등), 스타일(색상, 텍스트), 변수 등을 포함하는 Figma 파일을 준비합니다. 이 파일을 디자인 시스템의 '원본' 파일로 사용할 것입니다.
새 작업 파일 생성: 라이브러리를 사용할 새로운 Figma 파일을 생성합니다. 이 파일은 디자인 시스템의 컴포넌트를 가져와 사용할 '작업' 파일이 됩니다.

디자인 시스템 파일 열기: 준비된 디자인 시스템 파일을 Figma에서 엽니다.
Assets 패널 이동: Figma 좌측 사이드바에서 Assets 패널을 클릭합니다.
라이브러리 게시: Team library 아이콘 (책 모양)을 클릭한 후, Publish 버튼을 클릭합니다. 변경 사항이 있다면 Publish changes 버튼이 활성화됩니다.
변경 사항 설명 추가: 게시 또는 업데이트 시, 어떤 변경 사항이 있었는지 간략하게 설명하는 메시지를 입력합니다. (예: "Initial publish of core components", "Added new button variants")
게시 완료 확인: 게시가 완료되면, 이 파일의 컴포넌트와 스타일이 다른 파일에서 사용 가능해집니다.

새 작업 파일 열기: 새로 생성한 Figma 작업 파일을 엽니다.
Assets 패널 이동: 좌측 사이드바에서 Assets 패널을 클릭합니다.
라이브러리 활성화: Team library 아이콘을 클릭합니다. 사용 가능한 라이브러리 목록이 나타나면, 방금 게시한 디자인 시스템 라이브러리를 찾아 토글 버튼을 활성화합니다.
컴포넌트 사용: Assets 패널에 디자인 시스템 라이브러리의 컴포넌트들이 나타나는 것을 확인합니다. 원하는 컴포넌트를 캔버스로 드래그하여 사용합니다.
스타일 및 변수 사용: 오른쪽 사이드바의 Design 패널에서 색상, 텍스트 스타일, 이펙트 스타일, 변수 등이 라이브러리에서 가져온 것으로 표시되는지 확인하고 사용합니다.

디자인 시스템 파일에서 변경: 디자인 시스템 원본 파일로 돌아가서, 기존 컴포넌트의 색상을 변경하거나 새로운 컴포넌트를 추가하는 등 변경 사항을 만듭니다.
라이브러리 업데이트 게시: 변경 사항을 Publish changes 버튼을 통해 다시 게시합니다.
작업 파일에서 업데이트 확인: 작업 파일로 돌아오면, Figma 우측 하단에 라이브러리 업데이트 알림이 나타납니다. Review 버튼을 클릭하여 변경 사항을 확인하고 Update all을 클릭하여 최신 버전을 적용합니다.
변경 사항 확인: 작업 파일 내의 컴포넌트들이 업데이트된 것을 확인합니다.

Tip

라이브러리 관리는 팀 프로젝트에서 디자인 일관성과 효율성을 유지하는 데 매우 중요합니다. 변경 사항을 게시할 때는 항상 명확한 설명을 추가하여 팀원들이 쉽게 이해할 수 있도록 하세요.

Note

다음 내용인 실습 3: 장바구니 페이지 만들기에서는 지금까지 배운 Figma의 다양한 기능과 라이브러리를 활용하여 장바구니 페이지를 디자인하는 실습을 진행합니다.