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

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

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

Emailify는 현재 Figma 파일의 컴포넌트만 불러오나요? ​

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

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

Component Library 탭에서 컴포넌트 추가하기 ​

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

이 영상은 Emailify Figma 플러그인으로 HTML 이메일용 Figma 컴포넌트 라이브러리를 디자인하는 방법을 보여 줘요.

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

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

사용자 지정 카테고리로 컴포넌트 라이브러리 정리하기 ​

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

이 영상은 Emailify Figma 플러그인으로 Figma 이메일 컴포넌트에 사용자 지정 카테고리를 추가하는 방법을 보여 줘요.

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

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

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

Component Library 검색 및 정렬하기 ​

컴포넌트 라이브러리 탭에서 사용자 지정 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 컴포넌트에 메타데이터 추가하기 ​

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

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