Figma – 보기 레이어, 페이지 및 컴포넌트 (왼쪽 사이드 바)

이 기능을 사용할 수 있는 사용자

모든 팀 또는 플랜(Plan)의 사용자.
편집 액세스 권한이 있는 사용자는 레이어 패널의 모든 부분과 상호 작용할 수 있습니다.
보기 액세스 권한이 있는 사용자는 레이어 목록만 볼 수 있습니다.

편집기에 있으면 캔버스의 양쪽에 사이드바가 표시됩니다. 도구 모음과 함께 이러한 사이드바는 Figma UI를 구성합니다.

Figma UI를 사용하면 디자인 요소에 액세스하고, 만들고, 조정할 수 있습니다.

오른쪽의 사이드바를 사용하면 모든 개체의 속성을 보고 조정할 수 있습니다. 파일의 프로토타입 설정에 액세스하고 선택한 개체의 코드를 볼 수도 있습니다. 이것을 속성 패널(Properties panel)이라고 합니다. 속성 패널에 대해 자세히 알아볼 수 있습니다.
왼쪽의 사이드바를 통해 파일에 포함된 레이어(Layers), 자산(Assets) 및 페이지(Pages)에 액세스할 수 있습니다. 이것을 레이어 패널(Layers Panel)이라고 합니다.

이 글에서는 왼쪽 사이드바인 레이어 패널을 자세히 알아 볼 것입니다.

레이어 패널 열기

레이어 패널 상단에는 세 개의 제목이 있습니다. 이를 사용하여 각 탭 간에 전환하거나 키보드 단축키를 사용할 수 있습니다.

Mac

레이어(Layers) 패널 및 페이지(Pages) 목록: ⌥ Option – 1
자산(Assets) 패널: ⌥ Option – 2

윈도우

레이어(Layers) 패널 및 페이지(Pages) 목록: ⌥ Alt + 1
자산(Assets) 패널: ⌥ Alt + 2

View of the Assets tab of the Layers panel

팁!

키보드 단축키를 사용하여 레이어 패널의 표시 여부를 전환할 수 있습니다.

Mac: ⌘ Command – Shift – \
윈도우: Ctrl + Shift + \

UI 표시/숨기기 키보드 단축키를 사용하여 전체 Figma UI의 표시 여부를 전환할 수도 있습니다.

Mac: ⌘ Command – \
윈도우: Ctrl + \

이렇게 하면 Figma UI 없이 캔버스에서 디자인을 볼 수 있습니다.

레이어(Layers)

캔버스에 추가한 모든 프레임, 그룹 또는 개체는 레이어 패널에 표시됩니다. 레이어 옆에 있는 아이콘으로 레이어가 프레임, 그룹 또는 특정 유형의 개체인지 확인할 수 있습니다.

Visual representation of the icons used to differentiate objects in the Layers panel

Figma는 상위 그룹 또는 프레임 내에 하위 개체를 중첩합니다. 이를 통해 그룹 또는 프레임 내에서 레이어를 축소 및 확장할 수 있습니다.

새 레이어가 목록의 맨 위에 추가되거나 포함된 그룹 또는 프레임의 맨 위에 추가됩니다. 또는 현재 선택한 레이어 바로 위에 있습니다.

레이어 패널에서 할 수 있는 많은 상호 작용이 있습니다.

팁!

레이어 패널의 너비를 조정할 수 있습니다.

사이드바의 오른쪽 가장자리에 커서를 갖다 댑니다. 양방향 화살표가 나타납니다.
클릭하고 끌어 패널의 너비를 조정합니다.
손을 떼면 사이드바 너비가 설정됩니다.

팁!

마우스 오버 시 레이어 강조 표시(Highlight Layers on Hover) 설정을 활성화하거나 비활성화할 수 있습니다. 메뉴에서 하이라이트(Highlight)를 검색하세요. 또는 Menu > Preference > Highlight Layers on Hover로 이동합니다.

자산 패널(Assets Panel)

컴포넌트는 재사용할 수 있는 디자인의 일부입니다. 버튼이나 아이콘일 수도 있고 탐색 메뉴나 상태 표시줄과 같은 더 복잡한 UI 요소일 수도 있습니다.

자산 패널은 모든 구성 요소를 찾을 수 있는 곳입니다. 자산(Assets) 패널의 구성 요소를 캔버스로 끌어 인스턴스를 생성할 수 있습니다.

자산(Assets) 패널을 열려면 레이어 패널에서 자산(Assets) 제목을 클릭하십시오.

또는 키보드 단축키를 사용합니다.

Mac: ⌥ Option – 2
윈도우: Alt + 2

자산(Assets) 패널을 열면 다음을 수행할 수 있습니다.

검색(Search) 필드를 사용하여 특정 컴포넌트 요소를 찾습니다. 현재 파일에서 컴포넌트와 액세스 권한이 있는 라이브러리를 찾습니다.
컴포넌트의 그리드(Grid) 보기와 목록(List) 보기 간 전환
팀 라이브러리 (Team Library)모달 열기
현재 파일에서 생성된 로컬 컴포넌트(Local Components) 보기
이 파일에 대해 비공개(Private to this file)인 컴포넌트 보기
파일에 사용된(Used in the file) 컴포넌트 보기
활성화된 라이브러리(Enabled Libraries) 탐색

Annotated image of the Assets tab of the left sidebar

참고

자산(Assets) 패널의 컴포넌트는 제목별로 그룹화됩니다. 컴포넌트가 많은 경우 ‘file > page > Frame‘ 경로로 표시합니다.

화살표를 클릭하여 확장하여 파일, 페이지 또는 프레임 탐색
자산(Assets) 패널에서 더 많은 공간을 만들려면 각 제목을 접습니다.
자산(Assets) 패널에 활성화된 팀 라이브러리가 나열됩니다.
자산(Assets) 패널에서 캔버스 위로 구성 요소를 끌어 구성 요소 인스턴스 만들기

팀 라이브러리

팀 라이브러리를 사용하면 파일에서 라이브러리로 컴포넌트를 게시할 수 있습니다. 그런 다음 구성 요소의 인스턴스를 만들고 다른 파일에서 사용할 수 있습니다.

전문 팀에 있는 경우 자산 패널에서 팀 라이브러리에 액세스할 수도 있습니다. 아이콘을 클릭하여 라이브러리 모달을 엽니다.

팀 라이브러리 관리하기 문서에서 자세히 알아보세요.

페이지

파일 내에서 필요한 만큼 페이지(Pages)를 만들 수 있습니다.

각 페이지에는 디자인을 탐색하고 반복할 수 있는 자체 캔버스(Canvas)가 있습니다. 각 페이지에서 별도의 프로토타입(Prototypes)을 만들 수도 있습니다.

페이지 만들기 및 관리 문서에서 페이지 사용에 대해 자세히 알아보세요.

원문: https://help.figma.com/hc/en-us/articles/360039831974-View-layers-pages-and-components-left-sidebar-