Design System AI
디자인 토큰부터 컴포넌트까지, 한눈에 진단
Plugin Preview
About this plugin
Design System AI는 디자인 시스템의 구조와 자동화 수준을 진단하고 시각화하는 Figma 플러그인입니다.
Design System AI - v1.3 Release Notes
- 이메일 기반 로그인 기능 추가로 안전한 사용자 인증 지원
- Supabase 인증과 연동하여 이메일 및 매직 링크 로그인 구현
- 원활한 로그인 흐름 개선 및 보안 강화
Design System AI - v1.2 Release Notes
히스토리 관리 기능과 향상된 CSV/JSON 내보내기 기능이 추가되었습니다!
🎯 주요 기능
- 디자인 토큰, 컴포넌트, 자동화 상태 대시보드
- 중복 토큰 및 네이밍 불일치 탐지
- 토큰·컴포넌트 사용량 시각화
- 디자인 자동화율 측정
🛠️ 사용 방법
1️⃣ Select a Frame
🔲 프레임 하나를 선택하세요 (디자인 시스템이 적용된 화면 또는 컴포넌트 포함 프레임)
2️⃣ Run the Plugin
🚀 플러그인을 실행하면 자동으로 분석이 시작돼요
3️⃣ Check the Dashboard
📊 토큰 수, 컴포넌트 수, 자동화율, 사용률 차트를 확인하세요
4️⃣ Export CSV
📥 “Export CSV” 버튼을 눌러 토큰 리포트를 다운로드할 수 있어요
여러분의 많은 관심과 피드백 부탁드립니다!
Design System AI is a Figma plugin that diagnoses and visualizes the structure and automation level of your design system.
🎯 Key Features
- Design Token, Component, and Automation Status Dashboard
- Duplicate Token & Naming Inconsistency Detection
- Token & Component Usage Visualization
- Design Automation Rate Measurement
🛠️ How to Use
1️⃣ Select a Frame
🔲 Choose a frame (a screen where your design system is applied, or a frame containing components)
2️⃣ Run the Plugin
🚀 The analysis starts automatically when you run the plugin!
3️⃣ Check the Dashboard
📊 View your token count, component count, automation rate, and usage charts.
4️⃣ Export CSV
📥 Click the "Export CSV" button to download your token report.
We appreciate your interest and feedback!
Plugin Details
Version | 7 |
---|---|
Created | June 23, 2025 |
Last Updated | July 20, 2025 |
Category | Software development |
Creator | Arkly |
Stats | 39 installs, 21 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- https://cdn.tailwindcss.com
- https://fonts.googleapis.com
- https://private-user-images.githubusercontent.com
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
Export designs to responsive code (React, HTML, Vue, Tailwind, etc) with AI
SkewDat
Skew any layer or group with all layers preserved to edit.