Figma 플러그인, 디자이너가 직접 만들어 보기

문제동일한 디자인 산출물을 여러 이미지 크기와 언어로 변형해야 하는 일이 많았는데, 기존 Figma 플러그인으로는 이 반복 작업을 매끄럽게 처리하기 어려웠다.

접근TypeScript와 Figma Plugin API로 UI(HTML/CSS)와 로직(code.ts)을 분리해 직접 플러그인을 만들었다. html-inline-css-webpack-plugin으로 경로 문제를 풀고, UI·code.ts 양쪽에서 입력을 이중 검증했으며 WAI-ARIA로 접근성을 챙기고 clientStorage로 입력값을 24시간 보존했다.

결과다국어 프레임 복제와 강조 구문 효과 등 핵심 기능에서 기존 대비 약 50% 이상 작업 속도와 효율이 개선됐고, 실제 디자인 업무에 안착했다.