피그마 컴포넌트 네이밍 및 구성

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

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

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

Tip! Components 라이브러리 구축을 어디서부터 시작해야 할지 모르십니까? 모범 사례 : Components, Styles 및 shared libraries 문서에는 몇 가지 유용한 팁이 있다.

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

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

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

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

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

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

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

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

Tip! 슬래시로 구분된 네이밍을 사용하는 경우 인스턴스 메뉴에서 해당 components를 함께 그룹화한다 . 예) file / page / frame /**name**/

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

다음과 같이 프레임에서 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를 파일로 드래그할 수 있다.

Note: 이 접근 방식의 경우 Assets 패널에서 라이브러리를 활성화해야 한다. 기본 라이브러리 활성화에 대해 자세히 알아보자.