Image Map Exporter

About this plugin

Figma Image Map Exporter

Figma에서 디자인한 영역을 웹 페이지의 이미지 맵(Image Map) HTML 코드로 쉽게 변환하세요.

이 플러그인은 특정 이미지 위에 여러 개의 클릭 가능한 영역(area)을 정의하여 각기 다른 링크나 자바스크립트 함수를 연결할 수 있게 해줍니다.

배너, 이벤트 페이지 등 다양한 영역에 유용하게 활용할 수 있습니다.

플러그인 설치 방법

아래 링크를 통해 바로 설치할 수 있습니다.

https://www.figma.com/community/plugin/1548162467032140907/image-map-exporter

또는 Figma 앱 내에서 직접 검색하여 설치할 수도 있습니다.

1. Figma에서 검색하기: Figma 앱이나 웹사이트에서 상단 메뉴의 `Plugins` > `Find more plugins`를 클릭합니다.

2. 플러그인 찾기: 검색창에 `Image Map Exporter`를 입력하고 엔터를 누릅니다.

3. 설치하기: 검색 결과에서 플러그인을 찾아 `Install` 버튼을 클릭하여 설치합니다.

주요 기능 요약 및 준비 단계

주요 기능

- 빠른 HTML 생성: 클릭 가능한 영역(Rectangle/Frame)을 선택하기만 하면 바로 `<map>`과 `<area>` 태그를 포함한 HTML 코드를 생성합니다.

- 부모 프레임 기준 좌표 계산: `<img>` 태그와 `usemap`을 사용할 때 가장 정확한 좌표를 제공하기 위해, 선택된 레이어의 부모 프레임을 기준으로 위치를 계산합니다.

- 설정값 자동 저장: 한 번 설정한 링크/스크립트 정보는 해당 Figma 레이어에 영구적으로 저장됩니다.

- 다양한 액션 지원: 단순히 링크(`link`) 연결뿐만 아니라, 자바스크립트 함수(`javascript`) 실행도 지원하여 다양한 인터랙션 구현이 가능합니다.

준비하기

1. 플러그인 실행: Figma 파일에서 플러그인을 실행합니다.

2. 영역 선택: 이미지 맵으로 만들고 싶은 Rectangle 또는 Frame 레이어를 모두 선택합니다.

⚠️ 주의: 선택된 레이어가 없는 경우 `👉 먼저 클릭 영역(Rectangle/Frame)을 선택해주세요.` 알림이 나타나며 플러그인이 종료됩니다.

사용법

1. 플러그인 UI 확인

플러그인이 실행되면 선택한 레이어들이 목록으로 나타납니다. 각 레이어의 `Map ID`와 `Map Name`을 설정할 수 있습니다.

2. 영역별 설정

레이어 이름

Figma의 레이어 이름이 그대로 표시됩니다. 이는 `alt` 속성으로 사용됩니다.

타입 (Type)

각 영역이 어떤 동작을 할지 선택합니다.

`link` (기본값): 외부 URL로 연결됩니다.

`javascript`: 자바스크립트 함수를 실행합니다.

값 (Value)

선택한 타입에 따라 URL이나 자바스크립트 코드를 입력합니다.

`link` 타입: `https://example.com/`과 같은 전체 URL을 입력합니다.

`javascript` 타입: `javascript:myFunction();`과 같이 함수 호출 코드를 입력합니다. (예시 코드 `javascript:couponDownload('0000');`가 기본값으로 자동 입력됩니다.)

설정값 저장 (플러그인 데이터)

플러그인 UI에서 설정한 값(`link` 또는 `javascript` 정보)은 해당 Figma 레이어에 영구적으로 저장됩니다.

플러그인 코드가 Figma가 제공하는 `setPluginData()` 기능을 사용하여 각 레이어에 값을 저장하기 때문입니다.

따라서 플러그인을 닫았다가 다시 열어도 이전에 입력했던 설정값이 그대로 유지되므로, 작업을 이어서 하거나 수정하기가 편리합니다.

좌표 계산 방식 (부모 레이어 기준)

이 플러그인은 선택한 레이어의 위치를 가장 가까운 부모 Frame의 좌측 상단(`(0, 0)`)을 기준으로 계산합니다.

만약 선택된 레이어가 Frame 내부에 있지 않다면, Figma 페이지의 좌측 상단을 기준으로 좌표가 계산됩니다.

이는 `<img>` 태그의 `usemap`과 `<map>` 태그를 사용할 때, 부모 역할을 하는 이미지(`<img>`)를 기준으로 영역(`area`)의 좌표를 설정하는 HTML 표준에 맞춰 동작하도록 설계된 것입니다.

플러그인 사용 예시

<map id="imagemapfoot" name="eventBanner">

<area shape="rect" alt="Rectangle 17" coords="123,366,738,920" href="https://www.naver.com/" target="_blank" />

<area shape="rect" alt="Rectangle 18" coords="524,1332,1139,1886" href="javascript:couponDownload('1234');" target="" />

</map>