디자인 생산성을 높이는 피그마 플러그인을 만들어보자 2부: 개발 편
프론트엔드
디자인 생산성을 높이는 피그마 플러그인을 만들어보자 2부: 개발 편
두줄요약
피그마 플러그인으로 실제 데이터를 디자인 시안에 적용하는 구조와 구현 과정을 정리했습니다. 샌드박스, CORS, 라우팅 제약을 우회한 방법과 로그 수집 개선 사례도 소개했습니다.
문제 상황
- 디자이너가 피그마 시안에 가격, 이미지, 평점 등 실제 데이터를 매번 수작업으로 교체하는 비효율
- 피그마 플러그인 환경의 샌드박스, CORS, 라우팅, 저장소 제약으로 일반 웹 방식이 그대로 동작하지 않는 문제
구조와 흐름
- UI Process와 Main Process를 분리하고 Message Passing으로 통신하는 피그마 플러그인 실행 구조
- manifest.json에서 main, ui entry와 권한, API 버전을 정의해 플러그인을 로딩하는 방식
- 플러그인 내부에서 텍스트·이미지 레이어에 실제 데이터를 적용하는 흐름
해결 방법
- 프록시 서버를 두고 S3 스냅샷 데이터를 활용해 CORS와 실시간 데이터 변동 문제를 우회
- MemoryRouter로 주소 변경 없는 내부 라우팅 구현
- figma.clientStorage와 mixpanel-figma 기반으로 유저 액션 로그 수집