[태그:] Asset

팀이나 회사 내에서 components 구조를 정의하고 문서화하는 것이 좋다.

이렇게 하면 Assets 패널에서 components를 더 쉽게 찾을 수 있다. 그뿐만 아니라 관련 components instances를 교체한다.

Components를 구성하는 방법에는 여러 가지가 있다. Assets 패널 및 관련 components의 components를 구성하는 방법을 보도록 하자.

Assets 패널

파일의 components에 액세스하는 가장 빠른 방법은 Asset 패널을 사용하는 것이다.

Asset 패널을 열려면 다음을 수행한다.

• 왼쪽 사이드바에서 Asset 탭을 클릭한다.
• 또는 키보드 단축키를 사용합니다.
  • 맥 : ⌥ Option + 2
  • 윈도우 :  Alt + 2

구조

Asset 패널에서 다음 components에 액세스할 수 있다.

• 로컬 구성 요소(Local Components) : 이 파일에서 생성한 components이다.
  • 이 파일에 비공개(Private) : 이 파일에서 생성했지만 팀 라이브러리에 게시하지 않은 components이다.
• 이 파일에서 사용됨 : 이 파일에서 이미 사용한 다른 라이브러리의 components이다.
• 활성화된 라이브러리 : 팀(Team)  또는  조직(Organization)에서 누구나 활성화한 기본 라이브러리이다.

Assets 패널에는 이러한 각 섹션에 대한 제목이 있다. 파일 이름을 제목으로 하여 활성화된 모든 라이브러리를 나열한다. 제목을 축소하여 차지하는 공간을 줄일 수 있다. 또는 확장하여 해당 파일 내의 components를 탐색한다.

라이브러리 파일 탐색

파일 구조를 미러링 하는 경로에 components를 표시한다. 파일 경로는 다음과 같은 일반 구조를 따른다. file > page > frame

경로의 각 단계는 Asset 패널의 제목을 나타낸다. 화살표를 사용하여 파일 경로를 확장하고 각 프레임 내의 components를 탐색할 수 있다.

원본 파일의 순서가 아닌 알파벳 순서로 페이지를 표시한다.

관련 components

Design tab의 Instance 섹션에서 선택한 components를 볼 수 있다.

이를 사용하여 파일을 떠나지 않고 관련 components 간에 전환할 수 있다.

우리는 다음을 통해 관련 components를 결정한다.

• Components의 이름을 지정하는 방법이다. 예를 들어 우리는  UI/Button/Active,  UI/Button/Hover 그리고  UI/Button/Inactive 함께 표시할 것이다.
• 원본 파일에서 components를 정렬한 방법이다. 예를 들어 우리는 관련 components와 동일한 프레임 내의 모든 components를 취급한다.

예제

Components 이름

조직의 다른 계층을 추가하려는 경우 특정 방식으로 components의 이름을 지정할 수 있다. Component/State와 같이 슬래시로 구분된 규칙을 사용하는 것이 좋다.

다음과 같이 프레임에서 components의 이름을 지정했다고 가정해 보겠다.

• Login/Active
• Login/Hover
• Login/Inactive
• Create/Active
• Create/Hover
• Create/Inactive

일괄 레이어 이름 변경 방법 알아보기 →

Components 구성

이 예에서는 위치를 기반으로 components를 구성했다. 페이지와 프레임을 사용하여 components를 그룹으로 구성했다.

• Figma UI 파일에는  Figma UI를 구성하는 components가 있다.
• Left Sidebar에 대한 페이지를 만들었다. 페이지에는 해당 사이드바와 관련된 모든 components가 있다.
• left sidebar는  Layers 패널과  Assets 패널의 두 가지 기본 패널로 구성된다. 이러한 패널 각각에 대한 프레임을 만들었다.
• 각 아이콘에 대해  16px  및  32px의 두 가지 크기를 지원한다. 각 프레임에 두 아이콘 세트를 모두 추가한다.
• 아이콘 크기를 쉽게 구별할 수 있도록 components의 이름을 지정한다. Layers 패널에서 슬래시 규칙을 사용하여 각 components의 이름을 지정한다(예: 16 / Team Library  또는  32 / Team Library ).

닫기 아이콘이 필요한 대화 상자 창을 다른 파일에 만들었다. Assets 패널에 대해 이미 이 중 하나를 만들었으므로 다시 사용할 수 있다.

해당 components의 32px 버전이 필요하다. Assets 패널에서 찾으려면 다음으로 이동한다. Figma UI / Left Sidebar / Assets Panel / 32

그런 다음 Assets 패널에서 해당 components를 파일로 드래그할 수 있다.