[UI Kit] Figma 플러그인을 위한 무료 스타터 키트
요약
Figma 플러그인 개발을 위한 무료 스타터 키트가 공개되었습니다. 이 키트는 버튼, 필드 등 20개 컴포넌트를 포함하며, 라이트/다크 모드 및 FigJam과 일치하는 Figma 자체 색상을 사용합니다. 또한 하드코딩된 오류를 잡아주는 검사 기능과 다양한 예제 플러그인을 제공하여 개발 초기 단계를 지원합니다.
핵심 포인트
- 20개 컴포넌트로 구성되어 UI 디자인의 기반을 다질 수 있습니다.
- 라이트/다크 모드를 모두 지원하는 Figma 네이티브 색상을 사용했습니다.
- 하드코딩 오류를 잡아주는 검사 기능과 500개 이상의 단위 테스트가 포함됩니다.
- AI 에이전트를 활용하여 플러그인 개발 워크플로우를 구축하기에 최적화되어 있습니다.
20개의 컴포넌트: 버튼, 필드, 메뉴, 다이얼로그, 알림 등. 이들은 Figma 자체 색상을 사용하므로 라이트 모드, 다크 모드 및 FigJam과 일치합니다. 컴포넌트 외에도 스타터 플러그인은 다음을 제공합니다:
- 콘텐츠에 맞는 창. 모서리를 드래그하여 크기를 조정할 수 있으며, 플러그인이 크기를 기억합니다.
- 학습하거나 시작할 수 있는 6개의 예제 플러그인: 레이어 이름 변경, 내보내기(exporting), 샘플 콘텐츠로 텍스트 채우기, 색상 변수 편집, 대비 확인, 그리고 Figplug 투어 자체입니다.
이 키트에는 Figma에서 플러그인을 열기 전에 흔히 발생하는 실수(예: 하드코딩된 색상, 잘못된 컨트롤 크기, 누락된 레이블 및 매니페스트 오류)를 잡아주는 검사 기능이 포함되어 있습니다. 키트 자체는 500개 이상의 단위 테스트(unit tests)로 커버됩니다.
설정할 번들러나 프레임워크가 필요 없습니다. 폴더를 Figma 데스크톱 앱에 바로 가져올 수 있습니다.
사용하는 가장 좋은 방법: 코드를 다운로드하여 AI 에이전트에게 전달하고, 처음부터 시작하기보다는 그곳에서 작업하는 것입니다. 레포지토리에는 AI 에이전트를 위해 작성된 가이드가 포함되어 있어, 에이전트가 컴포넌트를 사용하는 방법을 알고 모든 변경 후 검사를 실행할 수 있습니다.
플러그인 데모: https://www.figma.com/community/plugin/1545605168743471916
파일 (무료, MIT 라이선스): https://github.com/alekseikipin/Figplug-ui-kit
제출자: /u/wtf_kolbaska [링크] [댓글]
AI 자동 생성 콘텐츠
본 콘텐츠는 r/FigmaDesign (top/week)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기