---
url: "/ko/emailify/design/library.md"
description: "Figma 라이브러리에서 Emailify 컴포넌트를 불러오고, 정리하고, 검색하세요."
---

# 재사용 가능한 컴포넌트 라이브러리 만들기

> Figma 라이브러리에서 Emailify 컴포넌트를 불러오고, 정리하고, 검색하세요.

Emailify 플러그인에서 Figma에 추가한 요소는 모두 자동으로 네이티브 Figma 컴포넌트로 추가되고, 스타일과 콘텐츠를 원하는 대로 바꿀 수 있어요. 현재 Figma 파일 안의 Emailify 컴포넌트는 헤더 탭 줄의 **Library** 아이콘 버튼을 클릭해 플러그인에서 바로 사용할 수 있어요.

## Emailify는 현재 Figma 파일의 컴포넌트만 불러오나요? {#does-emailify-load-components-from-the-current-figma-file-only}

네. **Library** 탭은 Figma에서 현재 열려 있는 파일의 Emailify 컴포넌트를 불러와요.

팀원이 다른 파일을 열면, Emailify는 그 파일에 이미 있는 Emailify 컴포넌트만 보여 줘요. 현재 파일에서 컴포넌트를 추가하거나 업데이트한 뒤에는 **Load all Emailify Components from this Figma file**을 클릭하거나 **Refresh**로 파일을 다시 검색하세요.

## Component Library 탭에서 컴포넌트 추가하기 {#adding-components-from-your-component-library-tab}

### 영상 튜토리얼: Figma에서 HTML 이메일 디자인용 컴포넌트 라이브러리 만들기(영어)

이 영상은 Emailify Figma 플러그인으로 HTML 이메일용 Figma 컴포넌트 라이브러리를 디자인하는 방법을 보여 줘요.
[Embedded media](https://www.youtube-nocookie.com/embed/lQb9-_9maxs)

[Video](/assets/videos/emailify/load-component-library.mp4)

**Load all Emailify Components from this Figma file**을 클릭하면 파일 안의 모든 Emailify Figma 컴포넌트를 찾아 미리보기를 불러와요. 플러그인에서 컴포넌트를 클릭하면 다른 카테고리와 마찬가지로 선택한 Emailify 프레임에 자동으로 추가돼요.

처음 컴포넌트를 불러온 뒤 Figma 파일에 새 컴포넌트를 추가했다면 플러그인의 **Refresh** 아이콘 버튼을 클릭하세요. Figma 파일에서 Emailify 컴포넌트를 다시 확인해 목록에 포함해 줘요.

## 사용자 지정 카테고리로 컴포넌트 라이브러리 정리하기 {#organizing-your-component-library-with-custom-categories}

### 영상 튜토리얼: Figma 이메일 컴포넌트에 사용자 지정 카테고리 추가하기(영어)

이 영상은 Emailify Figma 플러그인으로 Figma 이메일 컴포넌트에 사용자 지정 카테고리를 추가하는 방법을 보여 줘요.
[Embedded media](https://www.youtube-nocookie.com/embed/M6p5AY2-g54)

[Video](/assets/videos/emailify/create-custom-categories.mp4)

기본적으로 모든 Figma 컴포넌트는 *Uncategorized* 상태이지만, 컴포넌트 라이브러리 하위 헤더 탭 줄의 **Pencil** 아이콘 버튼을 클릭해 원하는 사용자 지정 카테고리를 만들 수 있어요.

여기서 새 사용자 지정 카테고리를 만들고, 기존 카테고리의 컴포넌트를 직접 추가한 다른 카테고리로 옮길 수 있어요.

사용자 지정 카테고리는 언제든 삭제할 수 있어요. 카테고리를 삭제해도 Figma 컴포넌트는 지워지지 않고, 그 카테고리에 있던 컴포넌트는 자동으로 *Uncategorized* 카테고리로 돌아가요.

### Component Library 검색 및 정렬하기 {#searching-and-sorting-your-component-library}

[Video](/assets/videos/emailify/search-and-sort-components.mp4)

컴포넌트 라이브러리 탭에서 사용자 지정 Figma 컴포넌트를 빠르게 찾으려면 **Search** 입력 필드에 Figma 컴포넌트의 레이어 이름을 입력해 목록을 좁히세요.

컴포넌트 목록은 다음 옵션으로 정렬할 수도 있어요.

**Sort by Figma Layer Age**
- Newest to Oldest ↓
- Oldest to Newest ↑

**Sort by Figma Layer Name**
- Figma Layer Name ↓
- Figma Layer Name ↑

**Sort by Figma Layer Order**
- Figma Layer Order ↓
- Figma Layer Order ↑

**Sort Visually (Rows)**
- Visually Top to Bottom ↓
- Visually Bottom to Top ↑

**Sort Visually (Columns)**
- Visually Left to Right →
- Visually Right to Left ←

시각적 정렬은 위치가 살짝 어긋난 컴포넌트도 같은 행이나 열로 묶어요. 레이어 이름 정렬은 숫자를 인식하기 때문에 `Hero 2` 같은 이름이 `Hero 10`보다 앞에 표시돼요.

### Figma 컴포넌트에 메타데이터 추가하기 {#adding-metadata-to-your-figma-components}

[Video](/assets/videos/emailify/figma-component-metadata.mp4)

Figma에서 컴포넌트 레이어를 클릭한 다음, Figma 오른쪽 사이드바에서 컴포넌트 이름 옆에 있는 **Component configuration** 아이콘 버튼을 클릭하면 Figma 컴포넌트에 메타데이터를 추가할 수 있어요. 여기에 컴포넌트 사용 방법을 설명하는 텍스트(**How to use this component**)와 문서 링크 URL(**Link to documentation**)을 입력할 수 있어요.

Emailify 컴포넌트에 이 정보가 있으면, 컴포넌트 라이브러리 탭의 컴포넌트 레이블이 문서 URL로 자동 연결되고, 썸네일에 마우스를 올리면 컴포넌트 사용 방법 설명이 툴팁에 표시돼요.