코딩 전혀 몰라도 할 수 있는 피그마 플러그인 개발!
초보자를 위한 기본 세팅 가이드
안녕하세요.
이번 글에서는 피그마 플러그인을 제작해 본 경험을 공유드리려고 해요.
저는 피그마를 n년간 사용해 오면서 플러그인을 직접 만들어 보고 싶다는 생각을 종종 했지만, 개발에 대해 정말 아무것도 모르는 디자이너라 도전을 망설이고 있었습니다. 그러던 중 ChatGPT를 활용해 피그마 플러그인을 만든다는 아티클을 보고, 용기를 얻게 되었어요! 덕분에 저도 도전해 보았습니다.
결론적으로, 개발 지식이 전무한 저 같은 디자이너도 Claude와 ChatGPT의 도움 덕분에 플러그인을 제작하고 실행해 볼 수 있었습니다!
물론 코드 구조와 작성은 대부분 AI 서비스가 담당해 주었지만, 이를 위해 초기 설정을 몇 가지 해야 했습니다. 이 글에서는 그 과정을 개발 초보자 관점에서 최대한 쉽게 정리해 보았습니다.
플러그인 개발을 위한 준비 과정
플러그인을 만들기 위해서는 다음과 같은 준비가 필요합니다:
피그마 API 문서 이해: 피그마 API 문서에서는 피그마에서 제공하는 여러 기능을 어떻게 활용할 수 있는지 설명합니다.
JavaScript 기본 개념: JavaScript에 대한 기초적인 이해가 도움이 되긴 하지만, 사실 꼭 필요하지는 않았습니다. 저도 여전히 개발에 대해서는 아는 바가 거의 없습니다!
아래 이미지를 통해 이러한 준비 과정을 요약해 보았습니다.
Node JS Download Link : https://nodejs.org/en/download/package-manager
이 6단계의 초기 세팅만 마치면 플러그인 개발 준비가 완료됩니다. 이후 구현하고자 하는 기능을 AI와의 대화로 구체화하고, 필요한 코드를 요청하여 붙여 넣으면 플러그인이 완성됩니다!
추후, 코드 작성과 구동 과정에서 궁금한 점이 있으시다면 언제든 댓글로 질문해 주세요. 필요하시면 다음 글에서 다음 단계를 정리해 올리겠습니다.
오늘도 읽어주셔서 감사합니다. 이 글이 많은 분들께 유용한 도움이 되기를 바랍니다.
