Figma Plugin Hub
Back to Plugins
Image Map Exporter

Image Map Exporter

Figma에서 선택 영역 좌표로 HTML 이미지맵 생성

Plugin Preview

Image Map Exporter preview

About this plugin

Figma Image Map ExporterFigma에서 디자인한 영역을 웹 페이지의 이미지 맵(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)을 선택하기만 하면 바로 ``과 `` 태그를 포함한 HTML 코드를 생성합니다.- 부모 프레임 기준 좌표 계산: `` 태그와 `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 페이지의 좌측 상단을 기준으로 좌표가 계산됩니다.이는 `` 태그의 `usemap`과 `` 태그를 사용할 때, 부모 역할을 하는 이미지(``)를 기준으로 영역(`area`)의 좌표를 설정하는 HTML 표준에 맞춰 동작하도록 설계된 것입니다.플러그인 사용 예시 Rectangle 17 Rectangle 18

Plugin Details

Version3
CreatedSeptember 12, 2025
Last UpdatedSeptember 15, 2025
CategorySoftware development
Creator유니(구유정)
Stats5 installs, 1 likes
PricingFree
Install Plugin

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none

More Like This

Discover other plugins in the Software development category.

Figma to Code (HTML, Tailwind, Flutter, SwiftUI)

Figma to Code (HTML, Tailwind, Flutter, SwiftUI)

Code Conversion Made Easy: Figma to Web & Apps

Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)

Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)

Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.

SkewDat

SkewDat

Skew any layer or group with all layers preserved to edit.

View All Software development Plugins