mds-icon-extract-plugin

About this plugin

MDS Icon Extract PluginSOPT Makers의 디자인 시스템(MDS)을 위한 피그마 플러그인입니다. 피그마에서 아이콘을 추출하여 GitHub의 MDS 레포지토리에 자동으로 코드를 생성하고 Pull Request를 만들어줍니다.🎯 개요이 플러그인은 디자이너와 개발자 간의 아이콘 작업 흐름을 자동화합니다:피그마에서 아이콘 선택자동으로 React 컴포넌트 생성GitHub에 PR 생성주요 기능🎨 피그마 아이콘을 SVG로 추출⚛️ React 컴포넌트 코드 자동 생성📁 카테고리별 파일 구조 자동 생성🔄 기존 index.ts 파일에 export 구문 자동 추가🚀 GitHub에 Pull Request 자동 생성🎉 성공/실패 알림 (Toast)🚀 사용법GitHub 토큰 설정GitHub에서 Personal Access Token 생성`repo` 권한 필요`workflow` 권한 필요 (선택사항)플러그인 실행 후 Github Token input에 토큰 입력아이콘 추출하기피그마에서 아이콘 선택추출하고 싶은 아이콘들을 선택복수 선택 가능Extract Icons 버튼 클릭결과 확인성공 시: PR 링크가 포함된 알림 표시실패 시: 에러 메시지 표시📁 생성되는 파일 구조packages/icons/src/├── category1/│ ├── ic-icon1.tsx│ ├── ic-icon2.tsx│ └── index.ts (자동 업데이트)├── category2/│ ├── ic-icon3.tsx│ └── index.ts (자동 업데이트)└── ...생성되는 컴포넌트 예시// ic-alarm-clock-filled.tsximport React from "react";interface Props {size?: number | string;color?: string;className?: string;}const IcAlarmClockFilled: React.FC = ({size = 24,color = "currentColor",className,}) => {return ();};export default IcAlarmClockFilled;📞 문의Admin팀 FE 김규홍