디자이너가 ChatGPT로 Figma 플러그인을 직접 만들었다!
by DD
1년 전
조회수 9
넷마블 디자이너가 Figma 플러그인 제작을 통해 업무 효율을 높임
ChatGPT를 활용하여 플러그인 개발, 스타일 동기화 기능 구현
플러그인 도입 후 작업 속도 50% 이상 향상 및 UX 개선
Figma 플러그인 아키텍처
Figma 플러그인은 code.ts와 ui.html로 구성되며, postMessage와 onmessage API를 통해 통신한다. 구체적으로, TypeScript로 code.ts를 작성하고, ui.html은 UI를 담당한다. 따라서, UI/UX를 개선하고, API를 활용하여 기능을 확장한다.
ChatGPT 활용의 장단점
ChatGPT는 코드 생성에 도움을 주지만, API 정보 오류 가능성이 존재한다. 따라서, ChatGPT가 생성한 코드를 API 문서와 대조하여 검증해야 한다. 반면, ChatGPT는 개발 속도를 높이고, 비전공자도 플러그인을 제작할 수 있도록 돕는다.
플러그인 개발 시 UX 개선
플러그인 사용성을 높이기 위해 입력 폼 검증 및 UI 디자인을 적용했다. 구체적으로, 버튼 활성화 조건을 설정하고, clientStorage를 활용하여 사용자 설정을 저장한다. 결과적으로, 반복 작업을 줄이고, 사용자 편의성을 향상시켰다.
댓글 0
첫 번째 댓글을 남겨보세요!
