여기쏙 — Figma plugin 제작기 : 2. UI
31
AI 요약
이 글은 AI가 원문을 분석하여 핵심 내용을 요약한 것입니다.
이 게시물은 Figma 플러그인 UI 설계와 기술 선택을 정리
핵심 기술 스택
- 경량화: Preact
- 상태관리: @preact/signals
- 데이터 fetching: @tanstack/react-query
- 스타일: goober
- 플러그인 템플릿: create-figma-plugin
UI 구조 및 라우팅
- Region×PageType 조합의 미니 라우터
- Always-Mount로 페이지 상태 유지 및 즉시 전환
API·캐시 설계
- 적용 버튼 기반 수동 API 호출 및 React Query 캐시 재사용
- 프록시 레벨 캐시 고려로 네트워크 비용 절감 목표
프로세스 구조
- UI 프로세스(iframe)와 Main 프로세스(Figma API)로 분리, postMessage로 통신
