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

간단 소개

디자이너가 ChatGPT를 활용하여 Figma 플러그인을 개발하고, 업무 효율성을 향상시킨 경험 공유.

AI Summary

Figma 플러그인 개발 동기 및 목표
- 넷마블 사업디자인팀에서 Figma를 활용한 업무 효율성 향상 및 디자인 트렌드 대응을 위해 플러그인 개발 시작
- ChatGPT를 활용하여 비전공자도 플러그인을 제작할 수 있다는 자신감을 고취하고, 실제 제작 과정 공유
플러그인 개발 과정 및 주요 기능
- TypeScript를 사용하여 매크로 수준의 플러그인 개발, 스타일 동기화 기능 구현
- Figma Plugin DS 라이브러리를 활용하여 Figma와 유사한 UI 디자인 적용
- 웹 접근성 및 시맨틱 웹 고려, 사용자 경험 개선을 위한 기능 추가 (마지막 메뉴 기억, 입력 폼 데이터 저장 등)
개발 과정의 어려움 및 해결
- ui.html 내 TypeScript 분리 문제, loadFontAsync 문제, FontName 스타일 타입과 StyledTextSegment 폰트 weight 타입 불일치 문제 등 발생
- webpack 설정, API 문서 참고, 예외 처리 등을 통해 문제 해결 시도 및 일부 개선
- ChatGPT 활용 시 최신 API 정보 확인 및 코드 검증의 중요성 강조