[260131] TIL

Today I Learned (2026-01-31)

피그마 플러그인 구현 진행

피그마 좌표계

absoluteTransform

• 캔버스(최상단 페이지) 기준으로 노드가 어떻게 변환돼 있는지 나타내는 2x3 변환 행렬

iframe

• 현재 웹 페이지 안에 다른 웹 페이지를 통째로 끼워 넣는 HTML 태그

샌드박스

• 코드가 사고 치지 못하게 가둬놓은 안전 구역

공통 메시지 로직으로 묶는 방식

import type { SelectionPayload } from './types'

export type MessageType = 'SELECTION_CHANGED' | 'LOAD_SELECTION' | 'CANCEL'

export type MessagePayloadMap = {
  SELECTION_CHANGED: SelectionPayload
  LOAD_SELECTION: undefined
  CANCEL: undefined
}

export type MessagePayload = MessagePayloadMap[MessageType]

type Message = {
  type: MessageType
  payload?: MessagePayload
}

type EventHandler = (payload?: MessagePayload) => void

const eventHandlers = new Map<MessageType, EventHandler>()
let initialized = false

export function on(type: MessageType, handler: EventHandler): () => void {
  eventHandlers.set(type, handler)

  if (!initialized) {
    invokeEventHandler()
    initialized = true
  }

  return () => {
    eventHandlers.delete(type)
  }
}

export function send(type: MessageType, payload?: MessagePayload) {
  const message: Message = { type, payload }

  // UI Process
  if (typeof window !== 'undefined') {
    window.parent.postMessage({ pluginMessage: message }, '*')
    return
  }

  // Main Process
  figma.ui.postMessage(message)
}

function invokeEventHandler() {
  // UI Process
  if (typeof window !== 'undefined') {
    window.onmessage = (event: MessageEvent) => {
      const message = (event.data as { pluginMessage?: Message })?.pluginMessage
      if (!message) return

      const handler = eventHandlers.get(message.type)
      handler?.(message.payload)
    }
    return
  }

  // Main Process
  figma.ui.onmessage = (message: Message) => {
    const handler = eventHandlers.get(message.type)
    handler?.(message.payload)
  }
}