바이브코딩 : Figma AI Icon 자동생성기
Figma에 SVG를 자동으로 그리는 OpenAI 기반 디자인 실험
Figma에서 프롬프트 한 줄로 아이콘을 생성하는 GPT 기반 플러그인
Design System의 아이콘 제작 가이드를 기반으로 System Prompt로 정제해 고정 규칙을 유지하고, 사용자가 Figma 플러그인에 필요 아이콘 입력 시 가이드를 자동으로 준수하는 아이콘을 Figma 상에 생성해 주는 AI 플러그인 제작 하였습니다.
1. 왜 이걸 만들게 됐을까?
(1) 제가 이전에 쓴 'Talk to Figma MCP' 글을 통해, 페이지나 템플릿 단위의 UI 요청 시 ‘모바일 로그인 페이지’와 같은 정형화된 UI는 꽤 괜찮은 결과물이 나왔습니다. 하지만 Frame을 Rectangle로 처리하는 등의 구조적인 문제가 있었고, 대시보드처럼 UI가 복잡해지면 결과물의 퀄리티가 급격히 떨어져 실사용에 어려움을 느꼈습니다.
실무를 할때는 디자이너마다 스타일 차이로 인한 일관성 이슈를 줄이고, 반복적인 아이콘 제작 공수를 줄이고 싶다는 니즈가 있었습니다.
이러한 경험을 바탕으로, 정형화된 UI를 잘 생성한다는 장점을 살려, 디자인 시스템의 아이콘 가이드를 기반으로 Figma에서 OpenAI를 활용해 텍스트 프롬프트만으로 SVG 아이콘을 자동 생성할 수 있게 만들면 어떨까 하는 아이디어로 이어졌습니다.
2. 아이디어에서 구현까지
제가 만든 플러그인의 핵심 구조는 다음과 같습니다:
(1) 디자인 시스템을 System Prompt로 정제예: 24px 그리드, 1.5px stroke, radius 규칙 등 고정
(2) 사용자는 설명만 입력예: “캘린더 아이콘을 만들어줘” 또는 “calendar icon” 입력
(3) GPT가 SVG를 생성하고, Figma에 바로 삽입
Figma 플러그인 내부에서는 OpenAI API를 통해 응답된 SVG를 보안 필터링한 뒤, figma.createNodeFromSvg()로 바로 삽입하게 됩니다.
3. 결과는 이렇게 나옵니다
간단한 입력만으로도, 디자인 시스템에 맞춘 아이콘이 자동으로 생성됩니다.
4. 마무리하며
디자인 툴에서의 AI 활용은 이제 시작입니다. 이 플러그인은 단지 '자동화'를 위한 도구가 아니라, 디자인 가이드를 실무에 자연스럽게 녹여내는 방법에 대한 하나의 실험입니다. 앞서 Figma MCP를 활용했을 때 아직 복잡한 페이지에 대해선 프레임 생성에 대한 부분이 제대로 이루어지지 않았는데요. 앞으로는 아이콘뿐만 아니라, Organism, Templetes 레벨에서도 자동화될 수 있을 거라 기대합니다.
플러그인 다운로드 (GitHub) → 링크
Gemeni API (Free)로도 가능합니다.
