Back to Plugins
mds-icon-extract-plugin
extract mds icon and make pull request
Plugin Preview
About this plugin
MDS Icon Extract Plugin
SOPT 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.tsx
import React from "react";
interface Props {
size?: number | string;
color?: string;
className?: string;
}
const IcAlarmClockFilled: React.FC<Props> = ({
size = 24,
color = "currentColor",
className,
}) => {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
className={className}
>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
</svg>
);
};
export default IcAlarmClockFilled;
📞 문의
Admin팀 FE 김규홍
Plugin Details
| Version | 6 |
|---|---|
| Created | September 25, 2025 |
| Last Updated | October 6, 2025 |
| Category | ui-kits |
| Creator | 김규홍 |
| Stats | 0 installs, 0 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:index.html
- main:plugin.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- https://api.github.com
More Like This
Discover other plugins in the ui-kits category.