AI를 활용한 Figma Plugin 개발기 (Cursor IDE 활용 사례)

• 들어가며: Figma를 사용하면서 Text Styles을 코드로 export 할 때 발생하는 불편함을 AI를 활용하여 해결하기 위한 프로젝트 시작.
• AI에게 Figma API 문서 학습시키기: Node로 설정된 기본 Figma Plugin install tsconfig 파일을 watch 모드로 실행하고, AI에게 Figma API 문서 학습.
• Cursor Composer를 활용한 개발: AI를 통해 Cursor Composer를 이용하여 UI 파일 생성 및 Figma variables를 SCSS로 export 하는 기능 구현.
• 개선을 통한 완성: 초기 결과물 개선을 통해 중복되는 단어 제거, 폴더명 포함 여부 선택 옵션 추가 등을 통해 일관된 결과물 얻음.
• Text styles 개선: AI의 도움을 받아 font-size가 실제 수치로만 입력되는 문제 해결.
• Figma Plugin 개발 시간 및 효율성: AI를 활용한 전체 개발 과정은 약 2-3 시간 소요되며, 기존 개발 방식보다 효율적.
• AI 개발 도구 Cursor IDE Composer의 경험: Cursor Composer를 통한 코드 개발 및 수정의 효율성 및 상세한 주석으로 개발 과정 향상 확인.